[Powered by Google Translate] [Seminarium - Windows 8 - App / spelutveckling med HTML5] [Chris Bowen, Edwin Guarin - Harvard University] [Det här är CS50. - CS50.TV] 

Hej, alla. Mitt namn är Edwin Guarin. Det här är Chris Bowen. Jag ska låta honom presentera sig på en sekund. Jag vill bara göra ett snabbt meddelande. Först av allt, allt du CS50 studenter får Windows 8 gratis. Så om du funderar på att faktiskt använda det för ditt slutprojekt, det är ditt. Nate kommer att skicka ut ett mail senare för instruktioner. Det andra är om du väljer att skriva en Windows 8 app för din CS50 slutprojekt, vi kommer att göra några giveaways: en Xbox, Vi kanske kan ge en skiffer bort, sånt. Så om det är något som håller dig tillbaka, lät Chris eller jag vet hur vi kan hjälpa dig att bygga något riktigt coolt. Så tack igen för att du kom idag, och jag ska lämna över till Chris. 

Tack, Edwin. Tack, alla, för att gå med oss ​​i dag. Jag är Chris Bowen. Jag är en av Edwin s kolleger här i nordost. Jag ville bara tillbringa lite tid med dig att prata om hur man gör en Windows Store ansökan med HTML5, JavaScript och CSS och typ av få alla frågor du kan ha om det svarade för dig som du tittar mot att tänka på kanske använder det för en CS50 finaler tillfälle. 

Som sagt, vi bara dyka rätt i. Jag ska gå över till diabilder hit. Om du har några frågor, tveka inte att skicka mig ett mail. Jag är cbowen@microsoft.com, och det är min blogg och mitt Twitter. Men du vill komma i kontakt med mig, det är bra. Jag har ungefär en timme av saker, och jag vill få dina frågor på vägen, så var inte blyg om att ha frågor under denna. De kan inte se vem som ställer frågorna på inspelningen, så du kommer att vara så anonym som du vill vara. 

Låt mig dyka rätt i, bara ge dig en snabb introduktion till Windows 8, och visa dig några av de saker om Windows Store apps som du kan överväga när du funderar på att utveckla ett program. Vi tittar på Windows 8. Vi har varit ute för ett par veckor nu. Många stark adoption där ute redan. Du kanske redan har sett de Surface maskiner som vi har också. Det är en hit faktiskt kan du ta en titt på om du är här personligen. Jag vill verkligen prata med dig, visa dig runt lite om Windows 8. Tanken med Windows 8, det egentligen lägga fram allt det du vet om Windows in några nya erfarenheter - särskilt saker som på ytan maskinen med beröring, denna typ av flera mobila enheter som nu finns på marknaden, men det är också Windows som kärna. Så det betyder att du kan installera det verkligen på något som kör Windows 7, från din största triple SLI gaming rig ner till din bärbara dator och till din skinande nya andra enheter som du kan plocka upp i dag. De kommer att köra Windows 8. Jag ska visa dig runt bara lite, och alla de upplevelser som du ser här är saker som du kan skapa. Tanken är om det är touch, mus, tangentbord, oavsett enhet är att du kör programmet på, det kommer att köra bra. Windows 8 kommer att hjälpa till med alla dessa scenarier. 

Dessa glider åt sidan, låt oss bara få rätt i att ta en titt runt här. Låt mig visa dig runt min startskärmen. Det här är min startskärm. Jag ska bara ge er en liten bit av en turné här. Jag är på en icke-touch maskin, så mycket som jag vill beröra min laptop skärm, det kommer inte att göra en sak, så jag ska bara rulla runt här lite och visa dig. Några saker som du kanske märker är att dessa så kallade live-plattor faktiskt kan animera, och de kan ge information till dig - kanske uppdateringar på statistik för ett spel eller visa nyheter från några av de tidigare program som är här på vänster sida. Så där. Jag är säker på att det bara är positivt och fantastiskt goda nyheter. Du kan se här det verkligen ringa din uppmärksamhet tillbaka till programmet och sade "Hej, det är något nytt här. Titta. Kom tillbaka in och se vad som är nytt för dig." Det kallas levande kakel, och du kan göra anmälningar antingen direkt från själva ansökan eller om du tar en titt på mer i detalj, får du reda på hur man skriver en fjärrtjänst som faktiskt kan skjuta information till kakel, vilket är vad som händer med dessa nyheter apps. De är faktiskt få nyheter från molnet och uppdatera kakel just där så att folk vet att det finns en anledning att öppna upp programmet och ta en titt oavsett på vilken de senaste nyheterna är i någon av dessa eller om det finns nya recept eller ett nytt rekord att slå eller en vän spelar eller vad på dessa ansökningar. Det är något att locka dig igen Så det är de levande kakel, och det kan vara en person, kan det vara en hemsida också. Vanligtvis är det ett program. 

Ganska mycket alla dessa saker som jag har här kom från Windows Store. Jag ska starta det. Det är ett av de program som du får som standard på alla maskiner som kör Windows 8. Du kan komma hit för att hitta något du skulle vilja, från saker som är markerade med spel som jag inte har sett förut. Åh, wow, vi har fått en ny flipper här. Du kan installera dessa rätt här från butiken, och vi kommer att prata om hur man kan utveckla dessa. Du har en massa val i hur du skapar dem. Vi kommer att fokusera på JavaScript historien med HTML och CSS, men för användaren, till köparen av app, det spelar ingen roll vad det skrevs i. De kan gå vidare och arbeta med det. Jag är fascinerad av den här, så jag måste öppna upp detta och ta en titt. Varje app, inklusive de som du kan skicka in och sälja eller ge bort gratis, vad du vill göra i butiken, kommer att få en hemsida som denna. Du kan skicka in din ansökan ett gäng skärmdumpar - du se några här - information om programmet, och med tiden kommer du att samla både betyg - de är i princip bara stjärnklassificering - och recensioner, som ger lite mer insikt. Egentligen har någon att skriva något och berätta hur fantastisk du är, och som kommer att gå in i ditt Recensioner avsnitt hit, som jag inte har tittat på. Fantastiskt. "Kommer inte ens öppna." Hur stor. Jo, för folk för vilka detta gjorde öppna och köra, verkar de verkligen njuta av det. [Skrattar] Ha detta i åtanke. Internet. Vem som helst kan säga vad de vill om din ansökan. Så se till att du gör ett bra jobb med det, se till att du gör det så bekvämt för användaren som du kan eftersom de är ett par klick bort från att ge en översyn, och som kommer att ackumuleras upp till din övergripande betyg översyn. Och du vill göra ditt bästa för att du kommer att vara upp mot andra applikationer. Det kommer att finnas tusentals program redan i butiken, och risken är stor, kan det vara något som gör liknande funktionalitet till vad du gör. Så om du verkligen kan stå ut från mängden, det kommer att vara till din fördel, förstås. 

Vi kommer att komma in i butiken lite senare. Jag vill verkligen fokusera på att skapa appar. Men den korta versionen av butiken är världsomspännande distribution, Det är automatiskt en del av Windows 8, folk bara brand det upp och ta en titt på olika appar här, har du Dress-Up Sticker Book och alla typer av olika appar. Fresh Paint, använder jag detta mycket - dåligt, men jag använder den mycket. Det visar att jag redan äger den. Låt mig visa dig något som jag inte har - UVideos jag inte har så helt nya. Du ser här att det är gratis, så att du kan installera det direkt från affären. Du har val också. Du kan givetvis ge bort. Du kan sätta reklam i appen eller spel. Du kan också ta betalt för det, och du kan lätt ge en rättegång för programmet samt så att du kan låta folk prova det i en vecka eller vad du vill göra. Det är bara anpassningsbar genom portalen. Du behöver inte skriva någon kod för det. Så du säger, "Du kan använda det här i en vecka och sedan har du fått för att köpa den," eller du kan göra saker som, "Du kan spela de tre första nivåerna av detta spel "Och sedan du måste köpa för att komma åt resten." Du kan till och med göra i-app inköp också, så du kan säga, "Vi har ytterligare äventyr eller uppsättningar av grafik eller saker som är upplåsta - "Fler recept som är upplåsta -. Om du köper dessa utökade uppsättningar" Och du kan göra det allt inom app eller spelet i sig. Så, helt upp till dig, ditt val. Det finns en massa saker som du kan göra i butiken, och sedan i princip att du skickar in den till en certifiering kanal. Vi kan prata allt om det lite senare, men det är målet. Du vill få din app i hela världen synlighet i butiken här. 

Tillbaka på startskärmen här, skulle jag vilja visa dig runt lite mer. Om jag startar dessa program, låt mig ge er ett exempel på en cross-app funktionalitet här. För att göra det, kommer jag att lansera Fresh Paint. En sak du ser här är varenda bit av skärmen, alla pixlar på skärmen, gå till din app. Borta är de dagar då du har dessa gränser runt fönster med massor av knappar som alltid är det tar upp plats hela tiden. Nu du verkligen vill komma bort från det och bara ha ditt innehåll vara i fokus. Vi kan göra saker med Windows genom att gå andra typer av menyer. En av dem är faktiskt vad som kallas den charm bar, och det kommer ut från sidan av skärmen. Du kan faktiskt bläddra från sidan om du har en pekskärm, du kan högerklicka om du har en mus, det finns ett kortkommando för det, det finns alltid mer än ett sätt att göra något i miljön här. Som lyfter fram ett antal saker som du kan göra. Den mest uppenbara är att du kan gå tillbaka till startskärmen, men de andra 4 är vad som kallas charm. De avtal som du kan plugga in som en app utvecklare. De är ganska coolt. Sök, jag är säker på att det är något du ska göra, dela Jag ska visa dig i en sekund, och enheter och inställningar, dessa är alla saker som din app kan kopplas till att utnyttja Windows, för att säga: "Jag har gjort min del "Och jag vill att Windows ska stödja vissa andra funktioner, "Och jag vill inte skriva en massa kod för att förverkliga detta." Det är verkligen en fördel med att använda dessa funktioner. Låt mig visa dig något. För att göra det, ska jag göra en ny målning. Jag pratade också om att använda varje pixel för din app. Som standard är detta vad färgen appen ser ut när du använder den. Det handlar egentligen bara om vad du ritar, ditt innehåll. Jag skulle kunna göra hemska saker här. Vad ska jag göra? Jag vet inte. Scribbles? Åh, bra. Jag kan göra klotter. Fantastiskt. En kalkon? [Skrattar] Detta är det mest abstrakta kalkon du kommer att se. Jag kan också ta upp vad som kallas appen bar, och detta är verkligen en av de viktigaste sätten som du kan använda att gömma undan alla saker som kan ha varit på din app eller spel innan bara tar upp plats hela tiden. Så nu kan du lägga upp den här, och detta är verkligen en av de mer vackra upplevelser med appen bar som jag har sett. Sätt de val här för att välja ut olika färger. Vi ville ha en kalkon, så vi ska lägga lite brun här, börja blanda i ett par färger. Vi tar en mellanliggande färg här och sedan komma tillbaka hit. Du kan börja rita. Det är din kalkon. Fantastiskt. Jag kan inte dra till att börja med, men att göra det med en pekplatta inför en publik är ännu bättre. Det är häftigt. Tanken är dock allt som jag bryr mig om är just här på ytan. Låt oss säga att jag är så nöjd med detta att jag måste dela den med någon. Normalt vad du skulle göra med andra versioner av Windows, Du skulle kanske ta en skärmdump, skulle du göra en del copy-pasta av din text eller saker som det som du vill dela ut, och sedan gå och öppna ett annat program och lägga den i det. Här behöver du inte göra det. Du kan faktiskt ta fram det charm bar och säga, "Jag vill dela det här." På denna punkt det kommer att visa dig alla appar som vet hur man arbetar med vad som delas. I det här fallet är det en bild, så det kommer att säga, "jag ser att du har en bild." "Vill du dela med dig av det?" Du kan se jag maila mig saker hela tiden. Man inser att, och det erbjuder mig att som en genväg, men det har också visat mig varje app som vet hur man handskas med att ta en bild och göra något med den. Dessa har alla uppgett för Windows att de kan göra det. Vid denna punkt är Windows. Användaren väljer precis vad de vill göra med det. Jag ska göra mitt vanliga i PuzzleTouch. Du kan se att jag har skapat alla typer av pussel över tiden. Jag tar PuzzleTouch och säga, "Jag vill dela denna fantastiska skapelse med PuzzleTouch." Det kommer att gå vidare och säga, "Bra. Vill du dela denna? Fantastiskt." "Vill du göra ett pussel som är lätt, medel, vad?" Jag ska göra en mellanliggande en här. Den gör pusslet. Det kommer att bli en fruktansvärd pussel eftersom det är mestadels tom. Men det är klart, och det är faktiskt tillbaka i det andra programmet. Om jag kommer ut här, kan jag söka efter den och starta den. Om vi ​​nu rulla över bara lite här, ska vi se min skapelse någonstans. Vart tog jag vägen? Vilken typ av pussel gjorde jag göra? Har jag göra det enkelt? Åh, det är det, precis där. [Småskrattar] Det är lätt att känna igen kalkon pussel som är här. Men jag vill påpeka för er, det häftiga här är apparna inte visste något om varandra. De sa bara, "Jag har en bild att dela, och jag vet hur man handskas med bilder." Och du som utvecklare, behöver du inte att skriva koden. När någon ber mig att dela, kommer jag att ställa några uppgifter i denna lilla datastruktur och jag är klar. Den andra appen tar över, gör sin grej, och det är slutet på erfarenhetsutbyte. Det är bara en sak som du kan göra - riktigt, riktigt kraftfull - och det kommer att bli en av de saker som verkligen kan hjälpa skilja din app och även ditt spel också i butiken. Folk kommer att kunna säga: "Det här är verkligen användbart." "Jag använder detta pussel skapare hela tiden. Det är fantastiskt." 

Det är nog av en kort översikt av vad som händer här. Det finns ett par andra funktioner också att kanske vi ska lyfta fram när vi går igenom koden. Men jag vill dyka in i bilderna, och att göra det, kommer jag att gå till skrivbordet, som i sig är en annan levande kakel här. Jag kan gå in i detta och, mycket riktigt, jag är på mina bilder, men låt mig visa dig egentligen var vi är. Vi är faktiskt i skrivbordsläge. Detta är verkligen där vad jag sade tidigare om Windows överföring för nya erfarenheter visar sig. Detta är det Windows som du vet. Windows-program kallas skrivbordsprogram. De kör här. Om du har befintliga program och du vill köra dem på Windows 8, Du kan absolut göra det. Dessa är inte samma saker som butiken apps, som är här borta, som Fresh Paint och dessa NBC News apps och sånt. De kommer att komma från butiken. De kan plugga in några av de funktioner som jag visar dig och andra som jag inte har visat er än. Men bara ha det i åtanke. Vi har stöd för båda dessa saker också. Jag är ledsen. Är det något som inte visas på skärmen? Jag har tappat det helt. Det är konstigt. Okej. Tack för upplysningen. Det du inte har sett på ett tag är mitt visar dig att skrivbordet är här. Vad är det sista som du såg? Såg du det? Detta är skrivbordet. Du vet redan hur det ser ut. Det är inget fruktansvärt ovanligt. Det är vår bär den erfarenheten framåt för dig och att du kan använda de saker som du har haft. Till exempel kommer jag att visa dig Visual Studio. Det är ett datorprogram. Det kommer att köra i det här läget. Det kommer att stödja en mer komplex miljö med en hel del alternativ och sånt, så det gör det ett bra alternativ som en desktop app. 

Som sagt, låt oss gå till diabilder för bara en liten bit och ge dig några inledande innehåll och sedan komma in faktiskt kodning här. Den goda nyheten är att jag har hört att du har fokus på en hel del CSS och JavaScript, HTML. Samtliga av de saker som du har inlärnings bär direkt på att göra Windows Store apps. De saker som du har hört om med tillämpning av CSS-selektorer och alla dessa saker är exakt vad du gör för att skapa en ansökan här för butiken. Vi går igenom dessa saker bit för bit. I grund och botten, jag bygger på de saker som du redan har tagit sig tid att lära sig. Detta är den övergripande diagrammet av den teknik som du kan använda att göra applikationer för Windows 8. Grejer till höger, de skrivbordsprogram, är egentligen det vi redan vet. Det är saker som verkligen är Windows 7 världens föras över till Windows 8. Alla dessa alternativ avdrag: C #, VB, Win32 typ av utveckling. Bra. Inga problem. Den nya saker är på vänster sida. Det är Windows Store apps, det är då jag vill få min ansökan fast i Windows 8 att använda alla dessa funktioner, få den in i butiken och få det riktigt cool upplevelse av Windows Store applikationer. För att göra det, kan du se här att du har alla dina val med XAML, C + +, C #, VB, kan du göra DirectX, sådana saker, saker som går utanför bilden. Men för oss, vi kommer att fokusera rätt på att HTML, CSS och JavaScript är verkligen en första klassens medborgare för att göra applikationer för Windows 8 och för Windows Store. Så det här är bra för alla här och folk tittar på video eftersom du kan bara utnyttja alla de upplevelser som du har och verkligen knyta till vad Windows erbjuder. Du kommer att göra det genom en uppsättning API: er, vilket borde vara någon överraskning. Varje OS har sina egna API: er. Vi avslöja vad Windows kan göra genom vad som kallas WinRT. Det är en uppsättning API: er som bara gör allt för dig. Om du behöver för att öppna filer, måste du använda kameran, geolocation, saker, de går igenom vad Windows kan erbjuda dig. För att komma åt det, vi har lite mer Javascript som kommer att göra det ännu enklare för dig att göra det. Vi kommer till det om en stund. Men för nu, det är i grunden din färdplan. De saker som du redan har gjort på toppen av vissa API: er som hjälper dig att arbeta med Windows lika butiks app. Och det är egentligen allt du behöver veta från den höga nivån. 

Vi kommer att dyka in faktiskt arbetar med grejer nu. De saker som du har säkert redan sett ett gäng, med IE9 ett tag tillbaka vi infört stöd för en hel del av den, på den tiden, nyare standarder inom webben, så en hel del nya CSS-funktioner, en hel del nya HTML, ECMAScript 5, vilket är verkligen JavaScript. Så allt för att med undantag för strikt läge var i IE9. Bara massor av saker med CSS, CSS3, allt där. Och allt det här bär framåt i vad vi gör med Windows 8. Du kan använda dessa saker, och du kan använda allt som är nytt i IE10. Med IE10 introducerar vi stöd för alla dessa saker också. De är alla hårdvaruaccelererad, så om du är på en maskin som har någon form av GPU, vilket förmodligen är ganska mycket varje maskin som du kan få under de senaste 8 åren, du kommer att kunna få hårdvaruaccelererad utdata, visuell utgång med CSS, Canvas, SVG. Alla dessa saker kommer att gå igenom hårdvaruacceleration och vara så mycket snabbare och effektivare. Den korta versionen av allt detta - jag kommer inte att gå igenom varenda sak här - om du ser den på den här listan, om du kan göra det i IE10, om det är en webb-app som du kör som fungerar i IE10, det är något du kan göra som en Windows Store app. Och det är ganska mycket det. Så om det fungerar i IE10, det kommer att fungera som en Windows Store app. Det är på bordet som något som du kan använda. 

Det finns en hel del här. Vi har fram till midnatt, så jag kan inte granska allt här. Men det finns några webbplatser som hjälper dig att förstå vad dessa saker kan göra, och jag ska visa dig en av dem i en sekund. Jag ville bara påpeka några av de viktigaste sakerna som du kan titta på. Kanske har du redan sett en del av dessa i dina studier, men dessa är riktigt bra, särskilt med Windows Store apps, från CSS sidan. Så att kunna göra transformer och övergångar, ger motion med animation - Dessa är alla en del av CSS nu, och de är alla stöds av moderna webbläsare, och IE10 och IE9 har lagt till stöd över tiden för alla dessa saker. Och så varför skriva det själv, varför gå igenom alla besväret att göra dessa saker för hand när du kan använda en enkel CSS transform för att skapa en 3D-effekt för din ansökan? Bra. Det är så det fungerar. Jag kan inte göra det något svårare än så. Om du vet hur man gör det i CSS, vet du hur man gör det i Windows Store-appen. 

Att gå längre än så för layout, saker som även butiken app, men går längre än att titta på kanske en nyhet app som är visar dig artiklar eller recept eller sånt, de andra typer av funktioner i CSS verkligen är användbara: Grid, är Flexbox CSS Regioner mer av en relativt ny standard också. Dessa saker är alla kommer att hjälpa dig att lägga ut innehåll och flödes innehåll mellan sektionerna, kunna göra sidnumrering och avstavning utan att du behöver skriva grejer själv. Du bara säga, "Gör följande för mig" och eftersom skärmen fastigheter är olika på olika maskiner eller som du ser i ett ögonblick, när du knäppa ett program att ha mindre mängder utrymme på skärmen, det är inga problem för CSS. Det kan dra nytta av - we'll prat om medie frågor i en sekund - det kan ta hand om saker och ting med ompositionering ditt innehåll, strömmande innehåll från regioner just med dessa saker som du kanske redan har sett med webbteknik. 

På HTML5 sidan finns det också en massa saker som kommer att vara till stor hjälp för dig med Windows Store apps. Återigen kommer vi inte att gå igenom alla dessa, men de är bara här. Så om du behöver använda den, audio-video, om du vill göra validering av formulär, geolokalisering, alla de saker du kan göra i JavaScript med JavaScript 5 eller ECMAScript 5, IndexedDB för lokal lagring - dessa är alla alternativ för dig. Om du letar efter ett svar, titta bara på befintlig teknik med HTML5 och CSS och du hittar enklare svar än att behöva rulla en hel del av det där själv. Låt mig visa dig runt lite här. Jag har en webbplats som vi kan gå till. Låt mig sluta ur denna bild för en sekund. 

Om vi ​​går ut till IETestDrive.com, Jag kommer inte att göra mycket av en demo här. IETestDrive.com verkligen visar dig mycket av vad som är nytt med IE10, de saker som du kan göra. Jag tycker att detta är verkligen användbart eftersom istället för att läsa igenom en massa vitböcker, titta på några demos, och det kommer att hjälpa dig att lägga den på din egen personliga radar om huruvida en teknik är vettigt att ens göra något mer forskning med så att du förstår, "Jag ser vad det är för." "Jag förstår vad Begär Animation Frame gör för mig." "Jag förstår hur jag kunde använda regioner eller SVG-filter." Du ser dem i aktion, se dem på ett exempel här, och bestäm själv om det kommer att vara användbart för dig i dina egna projekt och utanför som du fortsätter att arbeta med webbteknik. Här vill jag bara uppmuntra dig att ta en titt. Jag tror inte att jag kommer att spendera mycket tid som faktiskt kör dessa. Vi har tillräckligt för att visa med att skriva kod. Du ser här saker från beröringseffekter till touch-baserade spel i det avsnittet, animation, riktigt snabb hårdvaruaccelererad animering där, vissa optimeringar som du ser i en del av dessa prover också, och det finns många, många fler. Om du går hit och öppna platskartan det finns bara ett löjligt antal prover här. Du kan se dem alla här. Om du tittar på något eller om du hört talas om något och du undrar kanske detta skulle vara något coolt att använda i appen, försöka titta här, och det är nog en ganska bra demo för att spara lite tid. 

Okej? Har du frågor så långt för folk här? Okej. Vi kommer att fortsätta här. Återigen, bara kolla som. De är webbstandarder, så gå till någon annan skyltfönstret på webben som du känner till och se om dessa tekniker vettigt för vad du försöker göra. 

Tillbaka till diabilder. Som sagt, du flyttar från en webbsida världen verkligen en installerad lokalt program värld, så finns det några saker att påpeka här. Först av allt, det finns ingen webbserver inblandade här. Det finns ingen Apache, det finns ingen IIS körs här betjänar upp sidor till en fjärrklient, till en avlägsen webbläsare agent. I det här fallet är verkligen allt förpackat upp för dig. Du anser att din ansökan till butiken, det blir certifierade, det är ute i butiken, och sedan folk i tusental kommer att installera ditt spel eller din app. Men i grund och botten, de drar ner det lokalt på sin maskin. Det finns ingen anledning att gå ut på webben längre om du inte har samtal som behöver en avlägsen API, och det är helt normalt och också. Men de kommer inte att vara i det läget där de måste gå förfrågan svar från en server att få nästa sida av deras innehåll. Så som sagt, det finns några mindre API skillnader. Dessa är otroligt små. De är inte troligt att träffa dig i din vanliga kodning, men de är åtminstone dokumenteras. De är typ av kant fall finns. 

Den andra saken värt att påpeka är tillförlitlighetsskillnader. Jag nämner detta eftersom jag vill bara se till att jag sa det så om du stöter på det senare, kommer du att tänka, "säger Chris något om detta, "Så kanske, ja, okej," och sedan gå tillbaka och du får reda på vad det var. Sammanhang roll. Normalt försöker vi skydda användaren från vektorer för angrepp. Det finns vissa saker som du kan göra som standard och vissa saker du behöver ändra sammanhang för att aktivera. När du använder vissa bibliotek där ute - you've redan arbetat med jQuery, men om du letar efter andra bibliotek där ute - du kanske använder vissa funktioner den typen av går utöver lokal användning, inte mer dynamiska interaktioner XHR förfrågningar, sådana saker. Ibland kanske du hittar dem inaktiveras som standard, och i så fall bara göra en sökning, leta efter lokala och webb sammanhang, och du kommer få reda på hur man fixar det. Se bara till att du visste om det när du börjar använda andra ramverk, som jag bör nämna, är du fullt kapabla att göra. Så om du hittar någon annan ram - we'll prata om det här i en sekund - för spel och du vill använda det, du vill använda vissa kontrollbibliotek som finns där ute och du inte vill skriva det där själv - det är en bra idé, eller hur? - Du kan absolut använda det här. Det är inget hålla dig tillbaka från att använda någon form av bibliotek som är baserad på JavaScript CSS, HTML5. Återigen, om det är något du kan göra i IE10, vilket är en fan av mycket dessa dagar, du kan göra det. Dra in den på din app, referens att JavaScript-bibliotek, och använda det i din ansökan, just med tanke på att du kanske slå ett säkerhetssammanhang då och då - inte särskilt ofta. 

Och sedan de funktioner, kommer vi gå igenom några fler av dem som vi går. Den UX du typ av vänja sig som du ser fler och fler applikationer från Windows Store. Du får en känsla för hur de fungerar och hur estetisk design tenderar att fungera mellan olika applikationer och vad folk kommer att användas för att uppleva. Det är egentligen den viktigaste delen. Se till att när de brand upp din app att de inte behöver läsa en manual, vilket de aldrig gör, förresten. De bör bara kunna börja spela med din ansökan och räkna ut det utan stora svårigheter. Genom att hålla sig och följa en hel del av dessa metoder, du kommer att göra användarna en stor tjänst, vilket gör det lättare. 

Okej. En sista sak på API-sidan och sedan får vi komma in faktiskt skriva kod. WinJS är det där jag nämnde helt kort med den komplexa slide med alla de olika val som du har för att ansöka. WinJS, kan du se det som en kompis. Det är din vän för att hjälpa dig att skriva saker snabbare. Det är bara Javascript och CSS. Du behöver inte använda den. Du kan använda den. Om du ska kunna ringa in till Windows-funktioner, kommer du sluta med det, men om det finns saker som vissa designmönster eller kontroller som du verkligen inte vill använda, du vill använda något annat, det är upp till dig. Bestäm vad du vill använda och de stilar som du vill använda. Funktionerna från namespacing och klass generation - upp till dig. Om du föredrar det ena eller det andra, det är helt och hållet ditt val. Det är fortfarande Javascript och CSS. Men det kommer att hjälpa dig att göra en massa saker. Till exempel, här är en delmängd av vad den kan göra, saker som att hjälpa asynkron programmering med löften. Någon av er hört talas om eller arbetat med Node.js? Det är ett vanligt mönster att arbeta med asynkron programmering. Så i princip vad du säger är, "Go göra något, "Och du kommer att ge mig ett löfte om att du kommer tillbaka till mig när du är klar." Det är i grunden vad som händer. Så du behöver inte låsa upp din ansökan medan användaren är på väg och plocka en fil eller något håller strömmade ned från webben. Användargränssnittet är fortfarande lyhörd. Och du kan göra det med hjälp av asynkron programmering. Det låter löjligt komplicerat, men det är verkligen lätt eftersom du använder löften och du bara säga, "Go gör det och när du är klar, ringa tillbaka till den här metoden." Det är ganska mycket det. Det är allt inbyggt i WinJS. Det kommer att göra det mycket enklare att skriva riktigt flexibla och kraftfulla applikationer. 

Du kan se resten här, en hel del animationer. Förmodligen en av de viktigare sakerna på den här bilden är kontroller. Jag tror att jag har en hel - Ja, det gör jag. Här är ett exempel på några av de kontroller som du kan använda i dina program. Detta är rakt upp från WinJS. Du skriver inte dessa själva, du bara säga, "Så här vill jag skriva min ansökan." "Jag ska använda en flip vy så jag kan gå mellan olika bilder." Jag har inte visat er Semantic Zoom. Jag ska visa er att i en sekund. ListViews. Det finns GridViews. Du har redan sett ett rutnät som en del av affären ansökan, så att kunna använda block av innehåll och rulla över det. Flyout menyer du ser från tid till annan. Appen bar jag visade dig med att Fresh Paint ansökan också, så du såg hur du kan anpassa den genom att sätta knappar på den och med att gömma undan när du inte bryr dig att använda det. Det är verkligen helt upp till dig att använda. Dessa är alla kontroller som ingår i WinJS. Jag ska visa dig hur man gör detta på bara en sekund, men det finns mer än just detta, och det viktiga är att använda dem om du vill, spara lite tid. 

Om du har andra kontroll bibliotek som du vill använda, det är väl bra också. Saker som jQuery UI gör en hel del av denna typ av idé också, ger fler kontroller som sträcker vad du kan göra i HTML och JavaScript. Låt oss dyka i. Jag har redan sagt det. Använd vad du vill. Bara tänk på att du kan stöta på vissa sammanhangsfrågor. Men du kan säkert blanda och matcha oavsett typ av bibliotek som du är bekväm med, du vill lära dig, du vill använda för att spara lite tid. 

Låt oss tala om verktyg bara för en sekund. Du kan få vad du behöver för att börja arbeta med Windows Store apps. Om jag går tillbaka ut, jag har för många saker här uppe. Om du går till den här sidan, vilket är dev.windows.com, du kan ladda ner allt du behöver. Som studerande har du tillgång till mer än allmänheten gör, så att du kan få högre slutet versioner av Visual Studio. Edwin nämnde du kan redan få Windows också. Men i allmänhet, för alla utvecklare, kan du gå till denna webbplats och ladda ner allt du behöver för att göra en ansökan, och det är allt gratis. Så det finns en gratisversion av Visual Studio, finns det några verktyg som kommer att installera vid sidan av det - allt du behöver för att skapa och testa din applikation. Det är bara när du ska publicera din ansökan fram till affären att du kommer att behöva en utvecklarkonto. Även detta tror jag är fri. Är det gratis för studenter också? >> [Guarin] Vilken? Utvecklaren konto, själva underkastelse. >> [Guarin] Ja. Det är mer goda nyheter. Du kommer att gå titta på det här. Det kommer att säga för en individ som standard det är $ 49. Men inte registrera dig för att som student. Vi ska ge dig lite information via dina program som du kan få ett konto gratis, och som gör att du sedan skicka in dina program ända fram till affären, så många du vill, och allt detta godhet kommer snart att följa. Så det är dev.windows.com. Du kan ladda ner de verktyg som du kan behöva härifrån. Och om du vill, kan du få en testversion av Windows här, men återigen, kommer du inte behöver. 

Den andra platsen - låt mig påpeka detta för dig snabbt - är design.windows.com. Det var dev.windows.com. Design.windows.com, kan du gissa vad det är för. Det är faktiskt en ganska trevlig plats. Det finns en hel del bra information här. Du kan arbeta igenom det. Det kommer att ge dig några råd om vissa saker att du kanske inte har tänkt på tidigare eller haft att göra med tidigare, som att designa för beröring, designa för olika formfaktorer, designa för funktionerna i Windows 8, det jag nämnde tidigare som att söka och dela, en del saker som jag inte har talat om ännu. De är alla listade här, och det är en ganska bra uppsättning hjälp fil sidor som hjälper dig att förstå hur man gör en viss typ av program, hur man gör interaktion, hur man handskas med UI och UX för din ansökan. Jag skulle rekommendera att du tar en titt på detta, särskilt om du är någon gång i hopp om att publicera en ansökan till affären. Du kommer att vilja veta hur man gör en bra ansökan eftersom jag nämnde tidigare, om du inte gör det, det är dessa recensioner igen. Folk kommer att bli olycklig. De kommer inte att kunna hitta saker som de förväntar sig på rätt ställen. Ingen vill att hända dig. 

Framåt här, låt mig stänga ner det. Nu när du vet var du kan få saker och ting, kommer jag visa dig hur man faktiskt börja använda saker. Till att börja, kommer jag faktiskt visa er här ett exempel på skrivbordsprogram på min startskärm. Här kan du se Visual Studio, kan du se Blend och andra utvecklingsverktyg som jag har. De har en något annorlunda platta. Det beror på att de är skrivbordsprogram, och i de fall de alla kommer att lansera tillbaka till mitt skrivbord egentligen bara som apps som du är van vid. Så Windows-upplevelse, det är samma sak. De är inte, till exempel, som Armed! eller dessa saker. Låt mig inleda en snabbt. Egentligen, här är intressant. Det har utvecklats av studenter som arbetar i partnerskap på NERD. Helskärm ansökan, dessa typer av erfarenheter här. Åh, fina snitt skärmar och alla typer av roliga saker. De utvecklade detta. Vi kan lika gärna visa det hela medan vi ändå håller på. I själva verket arbetade jag med dem lite, gav dem några råd om saker eftersom de gjorde JavaScript för deras tillämpning. Vänligen, jag tar äran för deras arbete, de gjorde allt arbete. Jag bara gav dem lite råd här och där, men de gjorde några bra saker med hjälp av en JavaScript-front och binda i vissa fysikmotorer och saker att göra en hel del av detta arbete. Go. Få se om det fungerar. Wow, fortfarande fungerade. Okej, bra. Men du får idén. En helskärm app, en riktigt bra upplevelse. Detta stödjer inte bara min mus och penna om jag har sånt men också röra. Om jag hade en pekskärm, kan jag bara dra på det och fortsätta arbeta med det. 

En sak jag inte visa, och anledningen till att jag tar upp detta är jag ville ha en annan app för att visa dig vad du kan göra, du kan faktiskt ta applikationer i Windows och dra dem till sidan av skärmen. Detta kallas knäppa en ansökan. I det här fallet har jag tagit Inkarus och jag har lagt det åt sidan här. Det är nu i Snap uppfattning, och som tillåter mig att göra något annat när det programmet är där. De flesta spel som du hittar kommer bara helt enkelt pausa. Det är normalt en anständig sak att göra om ditt spel på något sätt kan skala ner till det lilla av en resolution, som kanske någon form av brädspel eller sådana saker ibland. Men i allmänhet, att det lättaste att göra och den mest lämpliga sak att göra för spel är att pausa programmet. För applikationer som nyheter apps, om jag startar den här och då jag knäppa den, så ser det faktiskt förändras avsevärt i hur det är att presentera data till dig. Här är det som visar dig egentligen en mer vertikal pan att information, men jag kan fortfarande absolut använda programmet. Så det är fortfarande mycket användbar. Det faktum att det är i en mindre uppfattning inte hålla mig från att använda denna app. Så tänk på det. Det är något som du behöver för att få dina apps gör till viss del, men det är upp till dig att avgöra hur fungerar dina program bör vara i denna typ av en mindre miljö. Låt mig avsluta det man ner och gå tillbaka till där vi var här. 

Edwin, du lagt till ett foto av mig redan? >> [Guarin] Ja. >> [Bowen] Titta där. Se det? Edwin lagt ett foto. [Skrattar] 

Låt oss gå tillbaka hit i Visual Studio. Låt mig inleda detta för dig. Jag kunde ha klickat på brickan på den startskärmen. Det förde mig tillbaka till skrivbordsläge, och det är att lansera skrivbordet app för Visual Studio. Detta är det Windows som du redan vet. Jag kan gå vidare och skapa ett projekt här. Vi kommer att fokusera igen på JavaScript, HTML. Jag ska gå ut och markera upp här i JavaScript, Windows Store. Det finns ett antal mallar som du kan använda. För produktivitet, skulle jag rekommendera att du tar en titt på några av dessa andra som här som Grid och Split. De är verkligen användbart om du gör en ansökan som kommer att ha den typen av design och navigering. Du ser dem mycket. Den jag just visade dig var egentligen en instans av Grid ansökan. Så om du tror att du kommer att göra en nyhet app eller en RSS-läsare eller något liknande som behandlar flera poster som du vill visa i detalj, tycker om att använda någon av dessa mallar för att komma igång snabbt och anpassa det därifrån. Men bara så att jag kan visa dig alla rörliga delar här Jag kommer att skapa den tomma app, och sedan kommer vi att gå lite djupare in på detaljerna. Jag bara gör det tom ansökan här. Det kommer att skapa hela projektet för mig. Jag ska öppna upp de saker som jag vill visa som standard. Låt mig bara zooma in en liten bit för att visa dig vad som skapats för oss här. De saker som du kommer att titta på först är alla namngivna standard. Så du kommer att leta efter default.html, default.js och default.css. Den andra sak att påpeka är att vi redan har en referens till det jag nämnde tidigare. Detta är WinJS. Ingen faktiskt kallar det här långa namn här. Det är WinJS, Windows Library for JavaScript. Om du öppnar upp det, kan du se det är alla här inne. Det finns olika CSS-filer, finns det JavaScript. Den finns där för att hjälpa dig. Det är verkligen där för att ge kontroller och stilar och saker som du bara kan använda automatiskt. Men återigen, om det finns saker som du vill använda i stället för i form av styling och andra kontroller, det är helt upp till dig. Jag kommer att visa dig hur du använder några av dessa saker just nu. 

Tillbaka över på vår vänstra sida, låt mig visa dig standard HTML-sidan. Du har redan sett den WinJS grejer, och det är egentligen allt som händer där med de mellersta rader av uppmärkning, bara föra in den CSS som standard och föra in ett par JavaScript-filer från WinJS. Du behöver inte vara herre över vad som händer inne i dessa filer. Det är ganska intressant att ta en titt på dem att slags se över vad som händer i det eftersom det är ganska intressant mellanliggande och avancerade tekniker som pågår där inne, men det fina är som utvecklare, du kan bara dra nytta av dem, bara använda dem och egentligen inte behöver oroa sig för det. Du kan fortfarande köra bil utan att veta hur det fungerar, eller hur? Så det är sånt som händer här. Det finns kontroller och stilar och saker som du bara kan gå vidare och använda och kod som du kan använda i en sekund utan att veta vad som finns där inne. Här är dina egna filer. Dessa är dina platser som du kan ändra din egen CSS och din egen JavaScript för att få saker rullande. Du kommer att lägga säkert andra JavaScript-filer och kanske andra CSS-filer som projektet växer, men det är egentligen bara en utgångspunkt. Här är Hej, världs motsvarande HTML, så vi är tillbaka i body-taggen. Högst upp, förresten, det är HTML5 doctype, så att du känner igen det från vad du har jobbat på. Det är full IntelliSense in här också, så om du gör saker som typ i en video-taggen och utöka det ut, har du förmodligen lärt sig om det faktum att du behöver göra reserv kodning för video-taggar i HTML5 - eller kanske du har - att se till att olika webbläsare har stöd för din video. Vi har saker som detta över HTML, över JavaScript över CSS. Som är byggd på, och jag ska visa dig CSS i en sekund. Här kan du gå vidare och börja ändra koden, markeringen. Faktum är att innan jag ändra något, kommer jag att köra detta och visa dig vad du får. Du kommer att få en startbild som du kan anpassa och sedan får du Hej världen erfarenhet här. Det är fantastiskt, eller hur? Gå vidare och fartyg som, eller hur? Innehåll går här. Det är den grundläggande sak. Det kan bara bli bättre därifrån. Vi kommer att gå vidare och lägga in lite grejer. Jag har lite markup jag ska kopiera in här bara så att du inte behöver titta på mig att skriva. Låt mig gå ta fram verktygslådan här, och jag ska klämma fast detta eftersom jag kommer att göra detta några gånger. Verktygslåda, om du inte har sett Visual Studio, är där du kommer att hitta en massa kontroller. Du kan också sätta kodsnuttar i det att du kan återanvända. Här ska jag bara pop på annat HTML, inget hemskt avancerad alls här. Det är bara grundläggande HTML säger att jag har en ingång där jag kan skriva, Jag har en knapp där jag kan lämna in den, och då har jag en div som är i huvudsak en platshållare som jag kan använda för att mata ut "Hej, du skriver det här." Det är introt till HTML-exempel. Om jag kör det här, får vi automatiskt HTML, men vi också automatiskt få styling. Detta är en av de viktigaste sakerna från WinJS. Det kommer att ge dig som standard en del utseende och känsla som är riktigt konsekvent med resten av vad Windows 8 gör. Här ser du saker som knappen. Knappen som standard i HTML ser inte ut som det, men det gör det här eftersom det blir att CSS rätt från den CSS-fil i WinJS. Om du vill använda något annat, om du vill ändra på det, helt bra, gå vidare och göra vad du vill. Men det är standard. Det kommer att bli mer bekant för användarna. Och naturligtvis kommer detta inte att göra något eftersom jag inte faktiskt koppla upp någon form av kod att svara på det. Det var bara HTML. Så jag kan bli av med det, och vi kommer tillbaka i vår ansökan. 

Låt mig gå över till våra default.js. Det ser ganska komplicerat, men det är bara att göra några saker för dig. Det är standardtext. Det kommer att vara densamma i alla dina projekt. Det enda det gör är bara typ av fråga, "Hur hamnade jag här?" och sade: "Är du lansera denna app för första gången?" "Ska du återuppta appen från att det är vilande?" Ett par saker. Verkligen, är vårt fokus på denna fil här rätt om här. Vid denna punkt, är ganska viktigt här en rad kod. Det är faktiskt kommer att gå och titta igenom alla dina markeringar, och det kommer att hitta saker som du har bett att ha förvandlats till kontroller, djupare kontroller som ett betyg kontroll, liksom ett rutnät vy, liksom utfällbara och de andra saker som jag visade dig på den bilden innan. De är inte infödda HTML-kontroller. Du bara inte säga flyout som ett element och har det vet vad de ska göra. Vad vi egentligen gör är samma sak som händer i andra typer av styrramar. jQuery UI gör samma sorts allmän riktlinje. Du använder markeringar i HTML, och lite JavaScript kommer genom senare och säger, "Åh, jag vet vad det är. Som ber om detta för att förvandlas till det här," som är av annat mer uttrycks HTML att göra som ett betyg kontroll, vilket är vad jag ska visa dig just nu. Denna kodrad är ett löfte som säger, "När detta löfte uppfylls, "Allt som du har bett om har sedan skapats." Och det är det. Det ser lite komplicerat, men det är egentligen samma sak i varje projekt. Här nere är där du kan börja lägga in vad du vill ha hända, så vi ska återkomma till det i en sekund. 

Först av allt, jag behöver lite kod som kan svara på det faktum att någon har klickat på knappen. Jag kommer att gå vidare och lägga det här nere. Återigen, jag kommer inte att göra någon typning framför dig här. Mycket grundläggande JavaScript säger bara om detta är befogat vi kommer att ges några detaljer om hur vi kom hit och sedan ska vi göra några grundläggande saker. Gå hitta sak i min HTML-sida som heter nameInput, ta tag i det, ta sitt värde, slap "Hej" på framsidan av det, och hålla fast att resultatsträngen in i den div-tagg som vi hade innan som verkligen inte hade något innan. Nu ska vi hitta den taggen och göra dess inre innehåll lika sträng. Mycket enkel JavaScript. Förhoppningsvis du inser att det finns egentligen inget ovanligt händer här. Det är bara rakt upp HTML och JS här. Om jag kör det här nu, det är fortfarande inte att göra något arbete eftersom jag inte har fast det upp att ta emot händelsen. För att göra det, jag gör det här, återigen återvänder till min verktygslåda, poppar den in här. Jag förväntar mig att du har sett allt här typen av grejer innan, så jag kommer inte över-förklara det. Nu ska vi gå få helloButton. Vi kommer att säga, "Button, grattis." "Här är en händelse som du nu svarar på." "När någon klickar på dig, kallar denna funktion buttonClickHandler." Och det är denna funktion som vi lagt till precis rätt ner på botten där. Det var allt. Så nu har vi en otroligt funktionell applikation. Jag tror att du kommer att bli riktigt imponerad av detta. Chris. Vänta på det. Wow. Okej. Det är fantastiskt. [Skrattar] Men det finns mer. Köp inte det ännu. Vänta. 

Låt mig visa dig lite mer här och få ut av helskärmsläge. Vi kommer att gå innan vi kör. Låt mig gå in och faktiskt visa lite med CSS. Precis som standard, om vi ser tillbaka på den sidan här, när vi drog i dessa saker från WinJS och vi fick den ui-mörker, i själva verket kan du ändra det till standard för att använda ljus applikation. ui-mörker är bra för grafiska applikationer som använder en massa bilder, du visar en hel del visuellt innehåll. Om du visar en hel del textinnehåll, är ui-ljus i allmänhet ett bra val. Du behöver inte välja det, men jag har bytt till det och nu du ser samma kod, samma allting, det är bara att använda i princip en omvänd ordning här där allt gör det svart text på vit. Det är allt gott och väl. Låt mig komma ut hit, och låt oss faktiskt göra lite mer med CSS. Jag lägger tillbaka den på mörkt eftersom jag tycker det är nog lättare att se på skärmen när jag börjar göra dessa saker. Jag ska byta ut kroppen en gång till. Jag ska gå här. Låt mig nuke detta. Låt oss ta in kroppen med klasser. Jag tror att du har gjort grundläggande väljare med CSS och saker som det redan, så du vet antagligen vad som händer här. Bara tilldela vissa klasser till vår header, och vi skapar en ny div att linda resten av det där som vi nu kan använda för att styla alla tillsammans. Så vad jag kan göra nu är att gå över till vår standard CSS. Har du tittat på mediafrågor än? Har ni pratat om det alls? Media frågor är en del av denna framväxande trend - eller det är en etablerad trend nu faktiskt på webben - för lyhörd design eller adaptiv, och tanken är att dina program verkligen kan ställa sig på lämpligt sätt baserat på vad den enhet som de är som visas på kan göra. Så om du är på en mobil enhet, självklart att du inte kommer att ha så mycket skärmyta när du kommer på en stor 30-tums bildskärm som sitter med ett skrivbord, en stor dator så. Så det gamla svaret på det skulle vara att ha fem, sex olika versioner av samma sida och du skulle öppna upp den version som var inställd för att viss storlek skärm. Inte bra. Det är mycket, mycket repetitiva och det finns massor av underhåll för att göra det. Nu har vi något som kallas CSS mediafrågor, och vi kan använda detta för att automatiskt upptäcka när det finns vissa storlekar eller viss användning av ditt innehåll som utförs. Så du kan svara på det, och du kan säga, "Okej, i detta fall "Du förmodligen inte ens behöver mig för att berätta vad som händer här." Det är bara att säga om denna ansökan knäppte, som jag visade tidigare - ta tag i den och sätta den på sidan av skärmen - så låt oss göra följande styling. Styling handlar inte bara om färger och sånt. Det handlar också om dimensionering och marginaler och stoppningar och inriktningar av innehåll eller inaktivera eller aktivera hela delar av din sida och, i detta fall, din app eller ditt spel också. Så här kan du göra så enkelt som du vill. Detta skulle inte vara användbart i dina appar, men det är demotiden, så jag ska gå vidare och bara lägga in grundläggande kroppen väljare och säga, "När jag gick av, låt oss gå vidare och göra bakgrundsfärg och låt oss välja något." Du har IntelliSense här. Det här är faktiskt riktigt coolt. Under 2012 har vi lagt till en hel del saker till stöd för CSS och JavaScript och HTML. Du har naturligtvis fått list IntelliSense också, men det är inte det häftiga. Det häftiga är att du har visuella väljare för en massa saker också. Så du kan gå igenom och bara välja en färg, eller så kan du gå ut och vara ännu mer specifik och du kan välja - detta kommer att bli fruktansvärt. Jag ska faktiskt plocka en anständig färg här. Titta på uppmärkning också, förresten. Det är din RGB-standardformat där. Men om jag byta opacitet, det kommer att gå över till en alfakanal väljare här. Så du kan se att färgen med i huvudsak procent transparens som du har för att alla bakade rätt i det. Jag kommer att hålla det som 100% och sedan när jag är klar med det, är allt gott och väl. Nu om jag kör programmet och vi tar appen och vi knäppa den, att bakgrundsfärg håller på att justeras automatiskt bara för att vi har en del CSS som säger, "Go gör det." Du kan också skriva JavaScript för att kommer att göra samma sak eller som du kan använda för att faktiskt pausa ett spel, gör saker. Det är förmodligen när du skulle använda JavaScript. Du skulle stänga av spelslingan vid den punkten. Du skulle behöva lite JavaScript, eftersom det inte skulle vara något du skulle CSS för. Men kom ihåg att det är bara en händelse. Man kan säga, "När min ansökan ändrar storlek, "Låt oss se om vi brast." Och det är det. 

Okej? Jag har pratat en hel del. Finns det frågor så långt på var vi är? Yeah. [Elev] Finns det en handledning för alla att få mer information? >> Ja. Frågan är, finns det en tutorial för detta? Jag ska bara förlänga den till allt. Det finns några saker som du kan gå till. Låt oss faktiskt härifrån. Låt mig gå tillbaka hit. En sak att påpeka är Visual Studio själv har tutorials inbyggda i. Låt mig bli av med detta. Om du går och skapa ett nytt projekt, behöver Arkiv, Nytt projekt, och titta på den vänstra sidan, det finns en online-nod i den här väljaren. Det kommer att ta en liten bit. Jag är på MyFi här. Men det kommer att komma upp och det kommer att ge mig en chans att hitta mallar men också, vilket är viktigare, prover också. Så jag kan klicka på JavaScript. Det kommer att hitta prover för mig. Min upplösning är så hög här. Normalt skulle du se en lista på en massa olika saker här. Om det är något du vill prova, plocka språket, JavaScript här, och säga, "Jag vet inte hur man gör geolokalisering." "Jag vet inte hur man öppnar en fil." "Jag vet inte hur man kan dra nytta av webbkameran "Eller optimera för beröring eller sånt." Det finns prover för allt: dela, söka, app barer, göra fjärrsamtal till en tjänst, JSON-kodning. Alla sådana saker det finns prover för här, och de är inte enorma prover som kommer att ta dig hela natten för att dra isär bara för att finna att en sak som du ville lära. De är riktigt bra. De är små, rakt på sak typer av prover. Jag har lärt mig massor genom att gå igenom dessa själv, och så rekommenderar jag att en hel del som en sak. 

En annan sak att påpeka är också klart att jag visade dig dev.windows.com, så om du går tillbaka till det, ser du längst ner finns även proverna här. Så du kan ladda ner dem alla på en gång, men det finns också en hel del andra resurser här också som kan hjälpa dig att få upp farten. 

En annan sak, och jag skulle verkligen rekommendera att du prova detta, Jag har det på min blogg, men jag ska bara gå rätt till det. Jag ska visa dig. Min blogg har resurser och sådana saker. En av de saker att påpeka är just här, den här saken: Din idé. Din App. 30 Dagar. Om du klickar på det här, det kommer att ta dig till en riktigt bra plats. Detta är mycket mer användbar än du kanske tror. Detta kommer att bli 30 dagar av innehåll som du i princip kan få tips och tricks hela denna process som du skapar en app. Och eftersom du inte kan räkna med, kan du faktiskt få det för spel också och för telefon apps, sådana saker. Så i princip registrera dig för det, och de kommer att skicka dig tips och tricks om, "Har du tänkt på att göra det här? Stöder du Snap?" "Här är några riktlinjer för hur man gör det bra." "Har du tänkt på att skicka in till affären?" "Har du tänkt på hur du ska sälja din ansökan?" Det kommer att gå igenom alla dessa olika saker. Och faktiskt, om du är på spelspåret, någon gång du börjar känna igen den som talar till dig eftersom jag faktiskt tvungen att gå till Redmint att göra dessa och inspelade 2 videor där. Men det är en del av spelspåret, och det finns också en hel bana för allmän applikationsutveckling. Det kallas Generation App. Jag skulle definitivt rekommendera det till dig också förutom proverna. 

Det finns en hel del filmer på en plats som kallas Kanal 9 också. Det är nog det sista jag kommer att rekommendera och innan vi går vidare här. Channel9.msdn.com. Detta är bra eftersom du inte kommer att läsa igenom massor av vitböcker. Det är i princip en hel del videor, screencasts och saker som är rakt på sak. Jag skulle inte säga att det är alltid rätt på sak. Det beror vem som gör snacket. Men i allmänhet, det finns några riktigt till-punkt video här som visar dig någon särskild sak du kanske vill lära sig eller se demoed. Det finns också allt vårt innehåll från vår konferens som hände ett par veckor sedan heter Build, och du ser att just där. Det finns kärnteknologier för Windows 8 spel. Varsågod. Jag var där, faktiskt. Du kan inte se mig. Jag var här. Men hur som helst, bortsett från, skulle jag rekommendera att du tar en titt på dessa filmer. De är ganska bra. Om du har fastnat på något eller om du bara vill se vad något kan göra, skjuta upp dem. 

[Guarin] Windows Mail skickade bara mig ett mail med en länk till innehåll för studenter att ladda ner med exempelkod och sånt. >> [Bowen] Stort. Awesome. Tack, Edwin. 

Bra. >> [Elev] Jag har en fråga. >> [Bowen] Oh. Ja, tack. [Ohörbart elev fråga] >> [Bowen] Åh, jag är glad att du frågar det. Ja. Frågan var, är det ett visuellt gränssnitt för mig att skapa saker och ting? Edwin kommer att belöna dig generöst för den frågan. Det finns ett sätt att göra detta. Ska vi göra det nu? Låt oss göra det nu. Jag ska gå till det just nu. Egentligen vill jag lägga in en sak till denna demo, och sedan ska jag visa dig det verkliga svaret. Jag hade tänkt att lägga i lite mer CSS här. Jag var lite off på tangenter här. Låt mig sätta i vissa CSS här för att ta tillvara av de klasser som vi lagt till en liten stund sedan, till huvudet, till Maincontent div, och sedan till den greetingOutput. Om jag gör det och kör det, kan du se nu har vi en lite annorlunda stoppning och marginaler, så vi har faktiskt en del förskjutningar här. Dessa är mer mot vad du kommer att förvänta sig av ett slutligt polerad ansökan. Men jag bara visa detta för dig eftersom det är rakt upp CSS. Så de saker som du redan vet att du kan använda här för att anpassa innehållet som du vill. Du har redan sett hur man gör bakgrunden ändras på det sättet. 

Om jag går tillbaka ut till vår HTML, kommer jag att lägga in ytterligare en uppsättning av markeringar, och det faktiskt kommer att bli en kontroll från WinJS. Jag ska gå och ta tag i detta, en etikett. Låt mig se till att jag gör det på rätt plats. Förmodligen tillräckligt bra. Här har jag bara lagt till - och vi ska gå hela skärmen så att du kan se det hela - Jag har lagt till en etikett för nästa div. Den div heter ratingControlDiv. I sig själv det kommer att göra någonting. Om du öppnar det i en webbläsare, skulle du titta på tomt, div själv. Men på grund av den mystiska kodrad som jag visade dig tidigare, processen allt, det kommer att leta efter något som ser ut så här - uppgifter-win-kontroll - och det kommer att hitta allt som finns i den parametern. Det kommer att göra ett exempel på vad som är det pekar på. I det här fallet är det en rating kontroll, så jag säger, "Gå och byt ut den här saken "Med vad du behöver göra för att göra en rating kontroll." Det kan vara en flip-kontroll, kan det vara de framsteg ring eller vad kontroll som du vill använda. De kommer alla att arbeta i stort sett samma sätt. Du använder standarden HTML5 markup för att ange vad du vill ha, och då du kommer att få en kontroll i slutet av det här. Låt mig köra. Jag kopierade det in, och nu när uppmärkning blir detta, vilket är faktiskt ganska många HTML-element. Dessa är alla enskilda bilder, och det finns divar runt dem med väljare. Förhoppningsvis kan du se det. Det är lite subtil. Jag kan sväva över olika objekt, och det kommer att tillåta mig att se märk här. Jag kan klicka på det, och det kommer ihåg det betyg men det är om det. Det är egentligen inte gör något med betyg. 

Den sista jag vill visa dig på detta innan vi byter till en mer visuell design erfarenhet är lite kod som jag kan använda för att svara på dessa WinJS kontroller. Låt mig få ut av det, tillbaka ut hela skärmen, och växla över till JS här för sekund. Jag kan göra det här. Jag tror att jag ska byta ut det hela. Egentligen tror jag att det kommer att ersätta allt det, men vi ska ta reda på tillsammans. Jag ska sätta detta i här. Yeah. Jag ska ta bort den här också. Vad gjorde jag till? Det ser ut som en hel del. Det är inte mycket. Jag förlängde den kodrad som jag redan talat om tidigare, och jag säger, "När allt är klart, när alla mina kontroller har gjorts, "Så gör det." Så då kör denna funktion kallas färdig. I detta fall är det här du kan lista ut. Gå finna att div kontroll. Faktiskt, det är en sak jag vill påpeka. Att nästa rad faktiskt säger, "Jag har fått det ratingControlDiv." "Jag vill tala med den som om det vore en verklig kontroll, en WinJS kontroll." Så i princip, du ber om det från det. Du säger, "Jag vill prata med dig som en kontroll." Och sedan kan du börja säga saker som, "Vi kommer att lägga till en avlyssnare för dig "Så när du bytte vi kan svara på det." Och då kan vi också göra saker som detta. Faktiskt, det är den gamla koden där. Jag tror att jag saknar klistrar in ytterligare en funktion, och det skulle vara den verkliga funktionen som skulle svara på rankingkontrollen ändras. Låt mig dyker det i rätt ned här, någonstans runt där. Och i detta fall, är det enda som är nytt det faktum att vi kommer in i vad rankingkontrollen berättar och vi ber för det som kallas tentativeRating. Det finns en massa olika andra saker som att kontrollen kan berätta för dig, och den går kontroll genom kontroll. Det är mycket enkelt. Du kommer att kunna lista ut det inga som helst problem. Jag kör det här, och nu när jag ändrar betyg och klicka på betyg, du kan se nu är det faktiskt svara på det. Det är att sätta det betyg på skärmen i det annars tomma div-taggen nedanför rankingkontrollen. Det är magin i en massa saker här också. Så när du skapar applikationer för Windows Store, det finns massor av kontroller som du bara kan använda. Alla arbetar så här. 

Låt mig visa dig den visuella sidan av att designa för dessa applikationer. Den goda nyheten är att du redan har detta verktyg när du installerar allt om du går till den nedladdning och du får Visual Studio. Jag kan högerklicka på denna. Jag kommer inte att zooma in Det står bara öppen i Blend. Blend är ett annat verktyg som arbetar sida vid sida med Visual Studio och fokuserar mycket mer på utformningen sidan av saken, så det verkligen ytor verktyg som är optimerade för att skapa stilar, skapa animationer, arbeta med CSS, en massa saker i den typen av venen. Här vad som borde vara mycket intressant och ganska självklart omedelbart är vi tittar på appen. Förhoppningsvis är vi fortfarande. Istället för att se koden, vilken vi fortfarande ser i botten, vi ser den verkliga representationen av ansökan. Vad är mer, det är inte bara en representation av app, det är faktiskt appen igång. Och det är det som verkligen är trevligt om Blend. Laget har gjort en hel del arbete för att få HTML och Javascript och CSS i detta verktyg. Nu kan du faktiskt, om du är nyfiken, "Vad betyder det? Vad kan jag göra?" Jag kan faktiskt utforma till denna ansökan, även om saker som detta inte finns i min kod. Kom ihåg att betyg kontroll? Det var bara en div-tagg. Det här, att stjärnan, existerar endast vid körning. Hur vet jag det? Det är lite av magi här. Se dessa blixtar? Varje gång du ser en blixt, innebär att det skapades av något vid körning. Vissa JavaScript sprang och vände något i detta eller skapat detta med en viss logik. De stjärnor som du ser det skapades av JavaScript genom WinJS. Det fina är, det spelar ingen roll för mig, kan jag fortfarande utforma det, Jag kan fortfarande gå in och ändra det, kan jag ta reda på vad som händer här, Jag kan titta på CSS, kan jag gå vidare och ta reda på varför färgen är så det är, Jag kan börja jävlas med saker och göra saker hemsk, vad jag vill göra. Faktiskt, jag lämnar saker ensam. Men du kan se här är det all CSS och det visar du här. Om jag går upp till det, det kommer att visa dig allt som de kallar Winning, så de CSS-regler som är det mest specifika och det mest valda för det objektet, som du har förmodligen redan gått över i dina klasser, där man kan säga att det finns en allmän typsnitt som vi söker till allt, men eftersom detta är en h1 och jag har en färg som definierats för H1S, det kommer att bli den här färgen, och det är för att det är mer specifik än body1. Det här en sak här visar allt detta, och det är verkligen kraftfulla saker som du får mer komplexa, du undrar varför dessa saker är som de är. Det kommer faktiskt berätta för dig, och du kan välja någon av dessa poster här. Den färgen är inte så illa, faktiskt. Du kan välja dem. Förhoppningsvis kan du se här. För allt som du har på din ansökan, ser du en hel kaskad av all CSS som skulle ha tillämpats på det och vilken som vinner, som man faktiskt tog företräde. Dessa är typ av tråkigt. Det finns inte mycket händer i några av dessa. Om jag går och ändra färg, så kommer du att börja se några kaskad där. Du kan också använda HTML här. Jag kan gå igenom och ändra HTML-egenskaper för alla dessa saker som jag önskar. Det finns bara massor av saker här. 

Jag vill inte ta din tid genom att gå igenom allt här. Bara vet att det är här. Det finns en hel del designorienterat funktionalitet som är bara tillgänglig för dig så att du kan hålla visuell, arbeta med programmet, och inte göra en massa gissa att du måste göra normalt och cykla tillbaka från en webbläsare tillbaka in i din design, tillbaka till webbläsaren. Detta är verkligen coola grejer för det, och när du utvecklar en Windows Store app, det kommer att göra dig mycket mer produktiv. 

Du kan också se det spåra uppmärkning här och din CSS när du arbetar med olika saker. Det är nog väldigt svårt för dig att se det, speciellt på video, men det är vad som händer här, och jag skulle rekommendera dig att bli bekant med det. Det kommer att spara mycket tid. Det är Blend. Om du gör några ändringar här, de automatiskt kommer att föra tillbaka över till Visual Studio. Det är samma filer, det är samma allting. Jag lämnar den ensam. Jag har ett bättre exempel som jag vill visa dig. Men om jag gjorde en förändring där och räddade det och jag kom tillbaka till Visual Studio, skulle den säga, "Hej, bara förändrats något. Kan jag ladda om den för dig?" Ja. Och du använder samma grejer där. Det är slutet av denna speciella prov. 

Jag vill visa dig en högre slutet prov bara för att ge dig en bild av andra funktioner du kanske tycker om också. Detta är ett urval app som du kan ladda ner. Om du letar efter något som kallas Windows Camp i en låda, det inte finns några prover som finns i det, och ett av dem är Contoso kokbok. Jag kan bara köra det här för dig. Egen startbild. Detta är stödrastervyn ansökan. De har bundna några egna data här. Du kan navigera genom detta. Du kan gå och titta på olika saker som gör oss hungriga på en fredag ​​eftermiddag. Jag vet inte. Vad kommer att göra mig mest hungrig? Jag vet inte. Jag kommer bara att plocka en. Du går in i dessa saker. Det kommer att visa dig receptet. Du kan också, istället för att klicka på ett objekt, du kan gå rätt till denna kategori av innehåll, den del av innehåll. I så fall kan du läsa massor av falska Latin berätta allt om dessa recept här och sedan gå rakt in i specifika recept. Det stöder också saker som att dela som jag visade dig tidigare med bilderna. Du kan också söka i denna ansökan också. Det är mycket enkelt att göra sökningen. I grund och botten är du bara få en textsträng från Windows och du bestämmer hur du vill hantera söka med det. Det är några få rader kod för att få det, och sedan vad du gör med det när det är helt upp till dig. 

Här har de också en app bar där de använder en annan funktion. Jag ska bara berätta vad det är. En påminnelse kommer att använda vad som kallas en skål anmälan. Detta är verkligen praktiskt för att låta användaren veta när saker har hänt, som ett program har installerats eller har något klar. Det är också bra för spel också. Om du har en ihållande värld eller en ledartavla och en tjänst som är värd att kanske på en separat maskin, kan dessa meddelanden skickas i en maskin och även om användaren inte använder ditt spel, spela ditt spel eller köra din app, de kan fortfarande få meddelanden om dessa typer av evenemang. Så man kan säga, "Ditt slott har förstörts eller är nästan förstörd." "Kom tillbaka och försvara den," eller något liknande. Du klickar på anmälan, går du tillbaka in i spelet, och du kan spela det. Så sådana saker kan hjälpa verkligen dra folk tillbaka in i din app ganska effektivt. 

Det finns också stöd i denna ansökan för att använda mikrofonen, webbkameran, gör video och ta foton. Du kan också fästa en sekundär sida vid sida. Det är användbart om du vill bara ha en bricka som går rätt till visst innehåll. I detta fall går det rätt att detta recept. Allt jag nämner jag bara visar eftersom det är saker som du kan tänka på att använda också. För det mesta, är de mycket enkla att använda. Jag skulle bara rekommendera att du tar upp det provet explorer och hitta ett prov som kan visa dig hur man gör det. Det är ganska enkelt att ställa de in i dina program där också. 

Jag ska visa dig något annat som är ganska coolt här. Jag ska knäppa denna ansökan, och jag kommer att gå tillbaka till Visual Studio. Detta program körs. Det körs från Visual Studio. Jag kan göra några ganska häftiga saker med det. Jag har faktiskt en möjlighet att välja ett element, och jag kan gå hit till live ansökan och jag kan säga, "Jag undrar varför är förberedelsetiden lite ljusare grå än titeln i sig?" Jag kan klicka på den. Det kommer att synkronisera det tillbaka in i Visual Studio, och det kommer att visa mig exakt genererat innehåll som resulterade i den delen av UI. Så i detta fall, är det posten-textning och h4 dubbel konstruktion, och som förmodligen säger oss vad vi behöver veta för som en H4 i det sammanhanget, det kommer att få en viss typ av teckensnitt. Men om jag vet fortfarande inte varför, kan jag klicka på Trace Styles. Jag kan expandera ut färg och jag kan ta reda på exakt varför den färgen är inte kroppen färg men i själva verket är något annat. Detta är i huvudsak de dev verktyg från Internet Explorer till en grad tas i Visual Studio. Om du har arbetat med Chrome Dev Tools, Firebug, saker, dessa typer av verktyg som finns i webbläsaren, den typen av funktionalitet har kommit rätt in i Visual Studio så du behöver faktiskt inte för att starta en webbläsare och arbeta med dessa verktyg för sig. Nu har jag en Windows Store app bara kör, och jag kan börja dra isär den och ta reda på varför saker gör vad de är. 

Jag kan också göra det här sättet också. Jag kan gå och bara plocka något rätt från uppmärkning och ta reda på vad det är i själva ansökan. Jag tror att jag har gått med allt. Här är jag svävar över detta. Jag kan välja det. Det kommer att visa mig i själva driften program där det där är att jag nu jag klickar på i markeringen. Riktigt coola grejer. När du försöker lista ut vad som händer och vad som HTML gör, vad CSS gör, ha detta i åtanke. Kom ihåg att detta är här för dig och även att Blend kan arbeta med en live-program som körs. 

Den sista jag ville visa dig med det här programmet - Förresten, det visar du deltan som saker förändras också, så att du kan titta på för de gula höjdpunkter. De är saker som bara har ändrats i ansökan. Men en sista sak. Jag vill gå tillbaka till Blend bara för en sekund här. Vi kommer att öppna upp detta, Öppna i Blend, samma app, samma allting. Jag vill bara visa dig erfarenhet här är inte bara du har fastnat på hemsidan titta på de saker du får som standard när du kör programmet och låta det sitta där. Du kan också vända på det här ganska liten ikon upp här. Det kallas interaktivt läge. Du klickar på det. Det kommer att ta upp din ansökan. Du är inte i Design-läge längre, så att du inte kommer att klicka på saker att ändra funktionalitet, men du kan faktiskt jobba med programmet nu. Du kan klicka dig fram, du kan göra vad som helst, få till ett recept som du bryr dig om eller till en kategori. Låt oss gå till denna kategori. Jag säger, "Okej, här är där jag vill utforma." Klicka sedan på dig att knappen igen, kommer det att ta dig tillbaka till Designytan, och nu kan du göra alla de saker som jag talade om tidigare. Jag ska hålla klicka tills jag får detta markerat, ta reda på dess dimensioner, ta reda på HTML för det, CSS för det för ett program som körs, något senare delen av ansökan. Mycket, mycket användbart. Jag ska visa det här för dig. Vänligen ha det i åtanke om du tittar på att skriva kod med detta eftersom det kommer att spara dig mycket krångel, och det är ganska bra grejer. Det är ganska mycket allt jag ville visa dig på Blend och Visual Studio för allt detta. 

Har du frågor om något av dessa verktyg? Vad som helst? >> [Guarin] Jag har saker att ge ut, så bra frågor, bra grejer. 

[Bowen skrattar] Jag har redan visat er mina demos här. Jag kommer att lägga den på sidan Resurser och vända på frågor nu. Det första referens är att Generation App webbplats med spellåtar och app spåret. Anmäl dig för dem. Du behöver inte vänta 30 dagar för att få innehållet. Du kan börja gå och titta på det innehåll som du vill. Jag förstår dina tidsramar kan vara annorlunda än - [skrattar] Så när är det Hackathon? Det är ett par veckor, eller hur? Så du har inte de 30 dagar att vänta. Så ja, kan du anmäla dig till det och sedan bara börja dra innehållet ut ur det. Även Dev och designcenter. Och jag nämnde det inte, men det finns också butik Docs. Detta skulle vara för efter Hackathon när du är redo att börja skicka in dina appar för butiken. Det finns några användbara riktlinjer här, viss vägledning om hur man får saker och ting in i butiken, några vanliga problem som kan resa dig upp, och det är i slutet av dessa resurser. 

Så vad har du på hjärtat? Något annat som du - [Guarin] Vem funderar på att göra en Windows-app för CS50? Cool. [Bowen] Cool. Bra. 

Eventuella frågor om de saker som du har sett hittills och hur den förhåller sig till detta? Till exempel, med mer tid jag kunde ta ett spel som jag har skrivit och som körs i webbläsare och bara typ av gå igenom processen att föra in det i Visual Studio och gör det till en Windows Store app. Det tar mer tid än vad vi egentligen hade att inkludera i dag, men den korta versionen är att det är samma kod som du har körs i webbläsaren, och de saker som du ändrar är de saker som du väljer att ansluta till Windows 8. Så om du vill använda charm, om du vill söka eller dela, du behöver för att skapa en app bar för att gömma undan en del funktioner på det, de är den typen av saker som du vill ändra. Men kärnan i din webbprogram kan förbli intakt. Återigen, så länge som det fungerar i IE10, det kommer att bli en riktigt enkel port att få det där i Visual Studio, i Blend, och göra det till en Windows Store app. Återigen, det enda du behöver för att lära sig är de andra funktioner som du kan använda för att lysa upp ett program, som en levande kakel och sådana saker. 

Yeah. >> [Elev] Min fråga handlar om att arbeta mobilt. Så om du gör en app som fungerar som en app på skrivbordet, är det verkligen lätt att överföra den till mobil, eller finns det en - Frågan är, om jag gör en Windows Store app som verkligen är optimerad för denna miljö och jag vill ta med den till en mobil värld, vad det innebär med att göra det? Det, liksom många frågor, är alltid en ständigt föränderlig svar. Den goda nyheten är om du fastnar med HTML och JavaScript, CSS, om du börjar från en Windows Store app, det kommer att låta dig ta med den till webben och sedan använda dessa typer av tekniker, såsom media frågor och saker, att anpassa sig till olika storleksenheter. Som sagt, det finns alltid ramar och saker där ute det stöd som sträcker sig ut olika tekniker, olika plattformar. Det ändras hela tiden. Vi är också förändra saker och vi ser mot vad vi har nu faktiskt ut med Windows Phone 8. Vi har några gemensamma grundläggande infrastruktur erbjuds mellan program för sådana miljöer. Så de saker som du ska göra för att skapa en Windows Store app, en hel del som kan föra över till en Windows Phone 8 program också. Det är återigen en framväxande berättelse, så det finns en del innehåll om det på Build. SDK fick bara ut en liten stund sedan. Det var precis släppt en liten stund sedan. Men när det gäller andra plattformar också, du kör förmodligen på många plattformar ramar också. Den goda nyheten är de saker som du gör här, kärnfunktioner är rakt upp web standard grejer. De enda som inte skulle översätta lätt är de saker som Windows 8 gör, men det är ingen överraskning att det är en Windows-funktion. Du kommer inte att hitta delning eller liknande typer av kontrakt på vartannat plattform. Så de är de saker som du skulle vilja ur ett designperspektiv se till att du har sätt att slags abstrakt som ut så att du kan säga, "Om jag kör på det, kan jag göra det." Om jag inte är, det finns vissa designmönster som du kan använda för typ av gömma det där borta. Men ha det i åtanke. Yeah. Ursäkta. Varsågod. 

[Elev] Om jag vill testa min Windows-applikation ovanpå [ohörbart] [Bowen] Ja. Jag hoppade över en sak också. Yeah. Jag ska svara på din fråga först, så ska jag visa dig en funktion som jag glömde att nämna. Vi har några maskiner tillgängliga lokalt. Jag är ledsen. Frågan var, hur ska jag testa saker på enheter om jag inte råkar ha en hel del saker att välja på? [Guarin] Vi lånade er, tror jag, 5 eller 6. Hur många behöver du? [Elev] Vi har 4 av dem. >> Okej. Ni fick 4 skiffer att leka med. Så definitivt låta alla veta, tack. [Skrattar] >> [Bowen] Awesome. Det är en ännu bättre svar än vad jag skulle ge dig. Vi har kontorstid för utvecklare som vi gör på vårt kontor och nu kommer snart till Microsoft Store över i Pru, men Edwin har redan tagit hand om dig. Det finns 4 griffeltavlor som kan låna, för att testa. Så där. Det är ett exempel på en uppe. Så ja, absolut. Bra. Absolut överlägset bästa sättet att testa det är att vara på en enhet. Om du inte råkar ha en ännu eller om du inte vill gå över campus i snön att ta en eller vad som helst, det finns ett sätt att göra detta tillbaka i Visual Studio. Om jag går tillbaka till där jag var här, här istället för att använda Lokal dator, du kan ansluta till fjärrdatorn, men det är inte det jag pratar om här. Simulator är det som du kanske vill titta på. Jag ska köra det här, och egentligen vad det är, det är i grunden ett fönster på ditt eget system. Här är faktiskt mitt system igång, kör Contoso, men på ett sätt som låter mig ändra några av de parametrar utförande, miljöparametrar. Så jag kan säga här, "Vet du vad?" Oh. Jag redan har det igång i en simulerad 27-tums bildskärm med 2560 upplösning. Jag kan lätt släppa ner det och se vad min ansökan skulle göra med en mindre skärm eller genom att ändra DPI-inställningar eller vad som helst. Så på en liten skärm, en 10,6, vad kommer det att göra? Det ser fortfarande ganska bra, eller hur? Du vill göra det här, speciellt om du skickar in till butiken, eftersom vi gör som en del av testprocessen. Och om det finns problem som detta, då kanske du stöter på ett problem att få certifierade för butiken. Men det är en del av simulatorn. Riktigt coolt. Mycket lätt att göra det. Du kan även använda funktioner som att vrida det också. Jag kan klicka på knappen här, har det roterar, se vad någon skulle ha som en upplevelse roterande deras skiffer, deras tablet, och med hjälp av din ansökan med det. Det finns en del andra saker också som beröring emulering och en del andra saker, inställning GPS. Jag kan låtsas att jag är på en annan plats och se vad min ansökan gör när jag låtsas att jag är tillbaka i Seattle eller något. Men det är en riktigt användbar funktion, och det är byggt i både Visual Studio och Blend. Ja. Din fråga. 

[Elev] Om du skriver ett spel, inte Visual Studio har något stöd för animering? Yeah. Frågan är runt animering stöd, framför allt med spel. Det beror på. [Småskrattar] Med JavaScript-Jag kommer att säga att det är nog mindre stöd än det finns på XAML sidan, som har tidslinjer, har storyboards och saker som är byggda i. För animeringar på JavaScript-program, jag vet inte hur mycket av ett svar jag vill ge dig. Jag har resurser på min blogg som går igenom en hel del alternativ för både fysik animationer, alternativ för JavaScript-orienterade spel på Windows 8. Jag hänvisar till dem. I grund och botten, det finns så många val. Anledningen till att jag tvekar är att det finns så många alternativ för att göra animationer med JavaScript. Det kan vara CSS, den kunde Tote-baserade, kan det vara bara grundläggande DOM-animationer, det kan vara en massa olika saker, så det är beroende på ditt val. Om du väljer att använda något som Create.js eller lime eller andra typer av ramar - Tja, jag är inte ens säker på att du kommer att kunna använda en högre ram slut gillar Impact eller Construct. Det tenderar att generera mer kod än du kanske tänka om från början. Men i sådana fall kan du fortfarande använda en simulator, som du kan använda miljöer, och jag brukar bara använda denna miljö för min testplattform i de fall som jag utvecklar spel. Jag har varit bra, särskilt med Canvas animationer, som förmodligen är den vanligaste sak. Det bästa du kommer att förmodligen hitta är de dev verktygen i webbläsaren och dev verktygen i Visual Studio. Typ av en slingrande svar där, men förhoppningsvis jag fick ditt svar. Ja. Du. 

[Elev] Vilka är alternativen för datalagring för Windows 8 appar? Vilka alternativ för datalagring för Windows 8 program, Windows Store apps? Dina alternativ verkligen är varje program får en egen pool av lokal lagring för inställningar och för uppgifter, men det är också löjligt enkel att använda roaming lagring, att använda molnbaserad lagring. Det är gratis. Vad som händer är att du i princip välja en annan klass och du säger, "Roaming Inställningar, Spara, denna uppsättning av innehåll," och deras Microsoft-konto, oavsett vad de har loggat in som, kommer att vara nyckeln till roaming informationen runt. Så om jag använder ditt spel på min laptop och jag loggar in med samma konto och jag spelar spelet på en yta eller en tablett, som automatiskt strövar den inställningen och data mellan dessa maskiner. Det är en standard sak. Det är bra för vissa mängder data. Du skulle inte sätta en enorm databas till dem. För att du behöver gå till andra typer av lösningar, som en värd databas i molnet, sånt. Det finns några andra samhälls alternativ runt andra typer av datatekniker. Jag har sett några SQLite alternativ i samhället runt där också. Så mer och mer växer fram, men dessa är de primära saker som du skulle titta mot för ett spel eller en app. Och du hade en fråga i ryggen också. 

[Elev] När det gäller nätverket [ohörbart] uppladdning eller nedladdning av filer [ohörbart] [Bowen] Är din fråga hur kan du se det, eller hur kan du felsöka den och testa den? [Elev] Hur kan du felsöka det [ohörbart] Ursäkta. Jag kan inte höra allt. [Elev] Hur får man det bugg testas och även [ohörbart] Bra. Bra. Hur arbetar ni med nätverk? Hur kan du se vad som händer? Det finns många olika svar på den här, men låt mig visa dig förmodligen den enklaste saker här. Låt mig bli av simulatorn för en sekund. Bara ett par felsökningsalternativ för nätverk. Det finns en fullständig nätverksstacken bakas direkt i både WinRT nivå och från WinJS, så du kan lätt göra XHR, samtal AJAX typ från ditt spel eller ett program för att göra det. I första hand brukar jag använda 2 saker. Jag använder den faktiska dev verktyg själva, som har en nätverksstacken bakas in i dem. Låt mig visa dig Windows hemsida. Jag kan ta upp detta, och det finns faktiskt en nätverksproxy bakas in i dessa verktyg här. Så jag kan göra det här, jag kan uppdatera sidan, och det kommer att visa mig alla interaktioner, inklusive AJAX kräver den sessionen, för att begäran varaktighet. Detta är användbart. Det kommer att vara mycket användbart för webbläsarbaserade applikationer. För andra typer av program, inklusive Windows Store apps, Jag använder ett verktyg som heter Fiddler. Du kommer att få ett spel som svar. [Småskrattar] Fiddler är en enkel proxy. Jag tror att jag kan visa det för er. Det är bara GetFiddler.com, som, intressant nog, jag spåra min nätverksstacken går till GetFiddler. Men hur som helst, har Fiddler skrivits av en av PM på IE laget, så han vet vad han gör. Detta är en bra proxy som du kan använda för felsökning nätverkstrafik. Jag skulle rekommendera det. Fråga där borta också. 

[Elev] Finns det ett enkelt sätt att integrera främmande språk ingång, som japanska eller kinesiska, i Windows-program? Jag kan inte säga att jag har gjort för mycket av det själv, men det är bakat i. Det finns alternativ för naturligtvis avger din ansökan - Jag är ledsen, det gjorde jag inte säga i frågan - alternativ runt globalisering, lokalisering av innehåll, inklusive saker som att kunna sälja på olika marknader och rikta den versionen av programmet för de enskilda språk eller kulturer eller saker. Absolut inbyggd Vi har haft stöd för det för evigt, och som bär framåt i dina alternativ för Windows Store. Du kan göra det i själva butiken, sälja på olika marknader, du kan göra det i ansökan och också med hjälp av resurser för att definiera, "Om jag är utvecklat för denna kultur, sedan använda sådana avvikelser för min textinnehåll "Eller använda en höger till vänster-läsare." De är alla en del av standard WinJS och WinRT API: er. Bra fråga. 

Hur gör vi? Några andra? Och om någon på video har frågor, jag cbowen @ microsoft, så jag är glad att ta någon av dina frågor från framtiden. Mycket - Från framtiden, framtids [härmar echo]. Så här är jag. Låt mig lägga tillbaka min kontakt här. Så bara skicka mig ett meddelande, cbowen @ microsoft, och jag återkommer till dig så fort jag kan. 

Något annat som du undrar? Är vi bra? Bra. Okej. Tack alla så mycket. Jag uppskattar det. [Applåder] 

[CS50.TV]