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

Hey, iedereen. Mijn naam is Edwin Guarin. Dit is Chris Bowen. Ik laat hem zichzelf voor te stellen in een tweede. Ik wil gewoon een snelle aankondiging doen. Allereerst, alles wat je studenten CS50 krijgt Windows 8 voor gratis. Dus als je denkt over het gaat gebruiken voor uw uiteindelijke project, is het van jou. Nate sturen een e-mail later voor instructies. Het tweede ding is als je besluit om een ​​Windows 8 app te schrijven voor uw CS50 afstudeerproject, we gaan doen wat giveaways: een Xbox, we misschien in staat zijn om een ​​leisteen weg te geven, dat soort dingen. Dus als er iets is wat je tegenhoudt, laat Chris of ik weet hoe we kunnen helpen je iets echt cool bouwen. Dus nogmaals bedankt voor uw komst vandaag, en ik zal het overhandigen aan Chris. 

Dank je, Edwin. Bedankt, iedereen, voor het samenvoegen van ons vandaag. Ik ben Chris Bowen. Ik ben een van Edwin collega's hier in het noordoosten. Ik wilde alleen maar een beetje tijd doorbrengen met je praten over hoe u een Windows Store applicatie met HTML5, JavaScript maken, en CSS en soort van krijgen eventuele vragen die u heeft over het sluiten Wist u dat als u op zoek bent naar het denken over misschien gebruik het voor een CS50 finale kans. 

Dat gezegd hebbende, zullen we gewoon duiken inch Ik ga over naar dia's hier. Als u vragen hebt, voel je vrij om een ​​email te sturen. Ik ben cbowen@microsoft.com, en daar is mijn blog en mijn Twitter. Maar je wilt in contact te komen met mij, dat is prima. Ik heb ongeveer een uur van de dingen, en ik wil je vragen te krijgen langs de weg, dus wees niet verlegen over het hebben van vragen tijdens dit. Ze kunnen niet zien wie het stellen van de vragen over de opname, dus je zult zo anoniem als je wilt zijn. 

Laat me duiken recht in, geef je een korte introductie van Windows 8, en tonen u een paar van de dingen over Windows Store apps die je zou kunnen overwegen als u denkt over het ontwikkelen van een applicatie. We kijken naar Windows 8. We zijn uit geweest voor een paar weken nu. Veel sterke adoptie die er reeds. U misschien al gezien hebben de Surface machines die we hebben. Er is een hier eigenlijk kun je een kijkje nemen als je hier in persoon bent. Ik wil heel graag met je praten, laten zien rond een klein beetje over Windows 8. Het idee met Windows 8, het is echt naar voren te brengen alle spullen die je kent over Windows in een aantal nieuwe ervaringen - met name de dingen graag op de Surface machine met touch, dit soort meer mobiele apparaten die nu op de markt, maar het is ook Windows in de kern. Dus het betekent dat je het echt op iets dat Windows 7 loopt te installeren, van uw grootste triple SLI gaming rig neer op uw laptop en aan uw glanzende nieuwe andere apparaten die je zou vandaag ophalen. Zij zullen draaien op Windows 8. Ik zal je laten zien rond een beetje, en alle ervaringen die je hier ziet zijn dingen die je kunt maken. Het idee is of het nu druk, muis, toetsenbord, ongeacht het apparaat is dat je draait je applicatie op, het gaat om grote run. Windows 8 zal helpen met al die scenario's. 

Deze dia's terzijde, laten we gewoon te krijgen in het nemen van een kijkje hier. Laat me zien rond mijn home-scherm. Dit is mijn Startscherm. Ik geef je slechts een klein beetje van een tour hier. Ik ben op een non-touch machine, om zo veel als ik wil mijn laptop scherm aan te raken, het zal een ding niet doen, dus ik zal gewoon scrollen hier een beetje en je laten zien. Enkele dingen die je kunt opmerken, zijn het feit dat deze zogenaamde live-tegels daadwerkelijk kan animeren, en ze kunnen informatie aan u te leveren - misschien updates op de statistieken voor een spel of toon je nieuws van sommige van de eerdere apps die hier op de linkerkant. Daar gaan we. Ik weet zeker dat het alleen maar positief en fantastisch goed nieuws. U kunt hier zien dat het echt belt je aandacht terug naar de app, zeggende: "He, er is iets nieuws hier. Neem een ​​kijkje. Kom terug in en zie wat er nieuw is voor u." Dat heet live-tegel, en je kunt meldingen doen ofwel rechtstreeks vanuit de applicatie zelf of als je een kijkje nemen in meer detail, zult u ontdekken hoe u een service op afstand te schrijven dat daadwerkelijk kan informatie doorgeven aan de tegel, dat is wat er gebeurt met dit nieuws apps. Ze eigenlijk om nieuws uit de wolk en het bijwerken van de tegel daar zodat mensen weten dat er een reden is om het openstellen van de applicatie en een kijkje nemen op welk laatste nieuws in elk van deze of als er nieuwe recepten of een nieuwe high score te verslaan of een vriend spelen of wat dan ook op deze toepassingen. Het is iets om je terug te verleiden inch Dus dat is de live tegels, en het zou een persoon te zijn, het kan een website ook. Meestal is het een applicatie. 

Vrijwel alle van die dingen die ik hier kwam uit de Windows Store. Ik zal lanceren dat. Het is een van de toepassingen die je krijgt standaard op elke machine die draait Windows 8. U kunt hier komen om alles wat je zou willen vinden, van dingen die zijn gemarkeerd om games die ik niet eerder heb gezien. Oh, wow, we hebben een nieuwe flipperkast kreeg hier. U kunt deze hier te installeren uit de winkel, en we praten over hoe deze te ontwikkelen. Je hebt een heleboel keuzes in hoe je ze maakt. We zullen concentreren in De JavaScript-verhaal met HTML en CSS, maar aan de gebruiker, aan de koper van de app, het maakt niet uit wat het is geschreven inch Ze kunnen gaan en werken. Ik ben geïntrigeerd door deze, dus ik moet deze openen en een kijkje nemen. Elke app, met inbegrip van degenen die u kunt maken en verkopen of gratis weggeven, wat je wilt doen in de winkel, zal een startpagina zoals dit te krijgen. U kunt indienen bij uw aanvraag een stel screenshots - die je hier ziet wat - details over de aanvraag, en na verloop van tijd zult u zich ophopen beide ratings - ze zijn eigenlijk gewoon de sterren - en beoordelingen, die zorgen voor een beetje meer inzicht. Eigenlijk, iemand moet iets typen en je vertellen hoe geweldig je bent, en dat zal in uw Reviews sectie gaan over hier, die ik niet heb gekeken. Fantastisch. "Zal niet eens te openen." Hoe groot. Nou, voor de mensen voor wie dit deed open en rennen, ze lijken echt te genieten. [Lacht] Hou dit in gedachten. Het Internet. Iedereen kan zeggen wat ze willen over uw aanvraag. Dus zorg ervoor dat u een geweldige job met het doet, zorg ervoor dat je maakt het zo comfortabel voor de gebruiker als je kunt omdat ze een paar klikken verwijderd van het verstrekken van een beoordeling, en dat zal ophopen aan uw algehele review. En wilt u uw best doen, want je gaat tegen andere toepassingen. Er zullen duizenden apps al in de winkel, en de kansen zijn, er kan iets zijn dat vergelijkbare functionaliteit doet wat je doet zijn. Dus als je echt kunt onderscheiden van de menigte, dat gaat in je voordeel, natuurlijk. 

We gaan een beetje later op in de winkel te krijgen. Ik wil echt concentreren op het maken van apps. Maar de korte versie van de winkel is wereldwijde distributie, het is automatisch onderdeel van Windows 8, mensen gewoon brand het op en neem een ​​kijkje op verschillende apps hier, je hebt de Dress-Up Sticker Book en allerlei verschillende apps. Verse verf, gebruik ik dit veel - slecht, maar ik gebruik het veel. Het toont me Ik heb het al. Laat me iets wat ik niet heb laten zien - UVideos ik heb niet zo nieuw. Je ziet hier het is gratis, dus je kunt het installeren recht uit de winkel. Heb je keuzes ook. U kunt natuurlijk weggeven. U kunt reclame drukken in de app of game. U kunt ook in rekening mag brengen, en je kan heel gemakkelijk zorgen voor een proef voor de aanvraag, alsmede dus je kunt mensen laten proberen het voor een week of wat je wilt doen. Dat is gewoon aanpasbaar via de portal. Je hebt geen code voor dat schrijven. Dus zeg je: "Je kunt dit gebruiken voor een week en dan heb je om het te kopen," of je kan dingen als: "Je kunt de eerste 3 levels van dit spel te spelen doen "En dan heb je om te kopen om toegang te krijgen tot de rest." Je zou zelfs kunnen doen in-app aankopen zo goed, dus je kunt zeggen, "We hebben extra avonturen of sets van afbeeldingen of dingen die worden ontgrendeld - "Meer recepten die zijn ontgrendeld -. Als je de aankoop van deze uitgebreide sets" En kun je dat doen alles binnen de app of spel zelf. Dus, helemaal aan u, uw keuze. Er zijn een heleboel dingen die je kunt doen in de winkel, en dan wat je eigenlijk probeert het indienen van een certificatie-kanaal. We kunnen allemaal wel over een beetje later, maar dit is het doel. U wilt uw app wereldwijde zichtbaarheid te krijgen in de winkel hier. 

Terug op het scherm Start hier, wil ik je laten zien rond een beetje meer. Als ik start deze apps, laat me je een voorbeeld van een aantal cross-app functionaliteit hier. Om dat te doen, zal ik verse verf te lanceren. Een ding dat je hier ziet is elke bit van het scherm, alle pixels van het scherm naar uw app. Voorbij zijn de dagen waar je deze randen rond vensters met veel knoppen die altijd nemen er tot de ruimte de hele tijd. Nu je echt wilt weg van die te krijgen en gewoon je content de focus. We kunnen dingen doen met Windows door de toegang tot andere vormen van menu's. Een van hen is eigenlijk wat de charmes bar genaamd, en het komt uit de zijkant van het scherm. Je kunt eigenlijk flick van de zijkant als je een touch screen, kon je rechts klikken als u een muis, is er een sneltoets voor het, er is altijd meer dan een manier om iets te doen in de omgeving hier. Dat brengt een aantal dingen die je kunt doen. De meest voor de hand liggende is dat je terug kunt gaan naar het Startscherm, maar de andere 4 zijn wat charmes genoemd. Ze zijn contracten die u kunt aansluiten op een app-ontwikkelaar. Ze zijn wel cool. Zoeken, ik weet zeker dat is iets wat je gaat doen, delen Ik zal je laten zien in een tweede, en apparaten en instellingen, het zijn allemaal dingen die je app kunt aansluiten op om gebruik te maken van Windows, om te zeggen: "Ik heb mijn deel gedaan "En ik wil Windows naar een andere functionaliteit te ondersteunen, "En ik wil niet te veel code te schrijven om dat te realiseren." Dat is echt een voordeel van het gebruik van deze functies. Laat ik je een. Om dat te doen, zal ik een nieuw schilderij te maken. Ik heb ook gesproken over het gebruik van elke pixel voor uw app. Standaard, dit is wat de verf app eruit ziet als je hem gebruikt. Het is eigenlijk gewoon over alles wat je tekent, uw inhoud. Ik kon verschrikkelijke dingen hier doen. Wat moet ik tekenen? Ik weet het niet. Scribbles? Oh, geweldig. Ik kan krabbels doen. Fantastisch. Een kalkoen? [Lacht] Dit is de meest abstracte kalkoen u zult zien. Ik kan ook brengen wat de app bar genaamd, en dit is echt een van de belangrijkste manieren waarop u kunt gebruiken alle dingen die op uw applicatie of spel voor zou zijn geweest weg te verbergen slechts toegang tot de ruimte de hele tijd. Dus nu kunt u het hier zetten, en dit is echt een van de mooiste ervaringen met de app bar die ik heb gezien. Zet de keuzes voor het selecteren van verschillende kleuren. We wilden een kalkoen, dus we zullen wat bruine hier zetten, beginnen mengen in een paar kleuren. We zullen een tussenliggende kleur hier en dan hier terug. U kunt beginnen met tekenen. Daar is je kalkoen. Fantastisch. Ik kan niet tekenen om mee te beginnen, maar om het te doen met een touchpad in voor een publiek is nog beter. Dit is geweldig. Het idee is echter alles wat ik zorg over is hier aan de oppervlakte. Laten we zeggen dat ik ben zo tevreden met deze die ik heb om het te delen met iemand. Normaal wat je zou doen met andere versies van Windows, zou je misschien een screenshot, zou je wat copy-paste van de tekst doen of dat soort dingen die u wilt delen uit, en dan gaan en open een andere toepassing en zet het in het. Hier hoef je niet om dat te doen. Je kunt eigenlijk brengen de charmes bar en zegt: "Ik wil dit delen." Op dit punt zal je laten zien alle apps die weten hoe te werken met alles wat wordt gedeeld. In dit geval is het een foto, dus het zal zeggen: "Ik zie dat je een foto gekregen." "Wil je dat delen?" Je ziet heb ik een e-mail me spullen de hele tijd. Hij erkent dat, en het biedt mij dat als een snelkoppeling, maar het is ook het tonen van me elke app die weet hoe om te gaan met het nemen van een foto en er iets mee doen. Deze hebben allemaal aangegeven naar Windows dat ze dat kunnen doen. Op dit moment is dit Windows. De gebruiker kiest gewoon wat ze willen doen. Ik zal mijn gebruikelijke van PuzzleTouch doen. U kunt zien heb ik allerlei puzzels in de tijd gemaakt. Ik zal PuzzleTouch nemen en zeggen: "Ik wil deze geweldige creatie met PuzzleTouch te delen." Het gaat om verder te gaan en te zeggen: "Geweldig. Wil je dit delen? Fantastisch." "Wil je een puzzel die is gemakkelijk, intermediaire maken, wat dan ook?" Ik zal een intermediair een hier te maken. Het maakt de puzzel. Het gaat om een ​​vreselijke raadsel, want het is meestal leeg. Maar het is klaar, en het is eigenlijk terug in de andere toepassing. Als ik hier naar buiten komen, kan ik zoek het op en start het. Als we nu scrollen over een beetje hier, we moeten mijn creatie ergens zien. Waar ging ik heen? Wat voor soort puzzel heb ik te maken? Heb ik het gemakkelijk maken? Oh, daar is het, precies daar. [Grinnikt] Het is de herkenbare puzzel kalkoen die hier is. Maar het ding wil ik u erop wijzen, de cool ding hier wordt de apps wist niets over elkaar. Ze zei alleen: "Ik heb een foto te delen heb, en ik weet hoe om te gaan met foto's." En u als ontwikkelaar, hoef je niet naar die code te schrijven. Wanneer iemand mij vraagt ​​om te delen, ik ga een aantal gegevens in dit kleine datastructuur zetten en ik ben klaar. De andere app overneemt, doet zijn ding, en dat is het einde van het delen van ervaringen. Dat is slechts een ding dat je kunt doen - echt, echt krachtig - en het gaat om een ​​van die dingen die echt kunnen helpen differentiëren uw app en ook uw spel ook in de winkel. Mensen gaan om te kunnen zeggen: "Dit is erg handig." "Ik gebruik deze puzzel schepper de hele tijd. Het is fantastisch." 

Dat is ongeveer genoeg van een kort overzicht van wat er aan de hand hier. Er zijn een paar andere functies ook dat we misschien benadrukken als we door code. Maar ik wil duiken in dia's, en om dat te doen, ik ga naar Desktop, die zelf een andere live-tegel hier. Ik kan gaan in deze en, ja hoor, ik ben op mijn dia's, maar laat ik je eigenlijk waar we zijn. We zitten eigenlijk in Desktop mode. Dit is echt waar wat ik eerder zei over Windows verdere uitvoering voor nieuwe ervaringen toont zich. Dit is de Windows die je kent. Windows-toepassingen worden genoemd desktop applicaties. Ze lopen hier. Als u bestaande apps en u wilt ze draaien op Windows 8, je absoluut doen. Dit zijn niet dezelfde dingen als de winkel apps, die zijn hier, zoals verse verf en deze NBC News apps en dat soort dingen. Die komen uit de winkel. Ze kunt aansluiten op een aantal van de functies die ik liet zien u en anderen dat ik je niet gewoon nog niet hebben aangetoond. Maar hou dat in gedachten. We hebben ondersteuning voor beide dingen ook. Het spijt me. Is er iets niet zien op het scherm? Ik heb het volledig verloren. Dat is vreemd. Oke. Bedankt voor deze opmerking. Wat je nog niet zien voor een tijdje is mijn laten zien dat het bureaublad is hier. Wat is het laatste wat je zag? Heb je dit gezien? Dit is het bureaublad. Je weet al hoe het eruit ziet. Het is niets vreselijk ongewoon. Het is onze uitvoering die ervaring vooruit voor u en laten u de dingen die je hebt gehad te gebruiken. Bijvoorbeeld, zal ik laten zien u Visual Studio. Dat is een desktop applicatie. Het gaat in deze modus. Het gaat om een ​​meer complexe omgeving te ondersteunen met veel opties en dat soort dingen, dus het maakt het een goede optie als een desktop app. 

Dat gezegd hebbende, laten we naar dia's voor net een beetje en geven u een aantal inleidende inhoud en krijgen dan in hier eigenlijk codering. Het goede nieuws is dat ik heb gehoord dat je al gericht op een veel CSS en JavaScript, HTML. Al die dingen die je hebt carry direct leren in het maken van Windows Store apps. De dingen die je hebt gehoord over met het toepassen van CSS selectors en al die dingen is precies wat je doet om een ​​aanvraag hier te maken voor de winkel. We gaan door middel van deze dingen beetje bij beetje. Kortom, ik ben het bouwen op de dingen die je al de tijd om te leren hebben genomen. Dit is de algemene grafiek van de technologieën die je zou kunnen gebruiken om applicaties voor Windows 8 te maken. Het spul aan de rechterkant, de desktop apps, is echt wat we al weten. Dat is spul dat is echt de Windows 7 wereld in Windows 8 overgedragen. Al deze opties dragen naar: C #, VB, Win32 soort ontwikkeling. Geweldig. Geen probleem. Het nieuwe spul is op de linkerkant. Dat is Windows Store apps, dat is wanneer ik wil om mijn sollicitatie bedraad in Windows 8 met behulp van al die mogelijkheden, krijgen in de winkel, en krijgen dat echt cool ervaring van de Windows Store toepassingen. Om dat te doen, kunt u hier zie dat je al je keuzes hebt met XAML, C + +, C #, VB, kon je DirectX doen, dat soort dingen, dingen die verder gaan dan de dia. Maar voor ons, we gaan recht richten op het feit dat HTML, CSS en JavaScript zijn echt een eersteklas burger voor het maken van applicaties voor Windows 8 en voor de Windows Store. Dus dit is goed voor iedereen hier en de mensen kijken op video want je kunt gewoon gebruikmaken van al die ervaringen die je hebt en echt binden in wat Windows biedt. Je gaat dat doen door middel van een set van API's, die geen verrassing zou moeten zijn. Elk OS heeft zijn eigen API's. We bloot wat Windows kan doen door wat heet WinRT. Het is een set van API's die net doet alles voor je. Als u nodig hebt om bestanden te openen, moet u de camera, geolocatie, dat soort dingen te gebruiken, ze gaan door wat Windows kan bieden. Om toegang te krijgen dat, we hebben wat meer JavaScript dat gaat om het nog makkelijker te maken voor u om dat te doen. We zullen dat in een moment. Maar voor nu, dat is eigenlijk uw wegenkaart. De dingen die je al hebt gedaan op de top van een aantal API's die helpen bij het werken met Windows gelijk store app. En dat is echt alles wat je moet weten van het hoge niveau. 

We gaan duiken in werkelijk aan de slag met de spullen nu. De dingen die je hebt waarschijnlijk al een hoop gezien, met IE9 een tijdje geleden introduceerden wij ondersteuning voor een groot deel van de, op dat moment, nieuwere standaarden op het web, dus een hoop nieuwe CSS-functies, veel nieuwe HTML, ECMAScript 5, dat is echt webbrowser. Dus alles voor die behalve voor de strikte modus was in IE9. Gewoon een hoop dingen met CSS, CSS3, allemaal in. En al deze spullen wordt overgenomen in wat we doen met Windows 8. U kunt deze dingen te gebruiken, en je kunt alles wat er nieuw is in IE10 gebruiken. Met IE10 introduceren we ondersteuning voor al deze dingen ook. Ze zijn allemaal met hardwareversnelling, dus als je op een machine die een soort van GPU heeft, dat is waarschijnlijk vrijwel elke machine die u in de afgelopen 8 jaar kon krijgen, je gaat om te kunnen hardware-versnelde uitvoer heeft, visuele output met CSS, Canvas, SVG. Al die dingen zullen gaan door hardwareversnelling en dat veel sneller en efficiënter. De korte versie van dit alles - ik ben niet van plan om te gaan door elk ding hier - als je het ziet op deze lijst, als je het kan doen in IE10, als het een web app die je draait die werkt in IE10, het is iets wat je kunt doen als een Windows Store app. En dat is het zowat. Dus als het werkt in IE10, het gaat om te werken als een Windows Store app. Het is op de tafel als iets dat je zou kunnen gebruiken. 

Er is veel hier. We hebben geen tot middernacht, dus ik kan niet alles hier beoordelen. Maar er zijn een aantal sites die u zullen helpen te begrijpen wat deze dingen kunnen doen, en ik zal u een van hen zien in een tweede. Ik wilde alleen maar wijzen op een paar van de belangrijkste dingen die je zou kunnen kijken. Misschien heb je al een aantal van deze gezien in je studie, maar deze zijn erg behulpzaam, vooral met Windows Store apps, van de CSS kant. Dus de mogelijkheid om transformaties en overgangen doen, bieden beweging met animatie - deze zijn allemaal onderdeel van CSS nu, en ze zijn allemaal ondersteund door moderne browsers, en IE10 en IE9 hebben steun rekenen voor al deze dingen toegevoegd. En dus waarom jezelf schrijven, waarom ga door al de moeite van het doen van deze dingen met de hand toen kon je gebruik maken van een eenvoudige CSS transformeren naar een 3D-effect voor uw toepassing te maken? Geweldig. Dat is hoe het werkt. Ik kan het niet maken moeilijker dan dat. Als je weet hoe het te doen in CSS, je weet hoe het te doen in de Windows Store app. 

Die verder gaat dan die voor layout, dingen als zelfs de winkel app, maar verder gaat dan dat, kijkend naar misschien een nieuws app die getoond wordt u artikels of recepten of dat soort dingen, die andere soorten functies in CSS echt bruikbaar zijn: Grid, Flexbox, CSS Regio is meer een vrij nieuwe standaard. Deze dingen gaan allemaal om u te helpen de inhoud lay-out en inhoud stromen tussen secties, kunnen paginering en woordafbreking doen zonder dat u de spullen zelf schrijft. Je zegt gewoon: "Voer de volgende stappen voor mij," en als het scherm onroerend goed is verschillend op verschillende machines of zoals u zult zien in een moment, als je een applicatie snap om kleinere hoeveelheden van de ruimte op het scherm hebben, dat is geen probleem voor CSS. Het kan profiteren van - een vervelend gesprek over media queries in een tweede - het kan zorgen voor dingen met herpositionering uw inhoud, vloeiende content van regio's gewoon met deze dingen die je misschien al gezien hebben met webtechnologie. 

Op de HTML5 kant, zijn er ook een hoop dingen dat zal zeer nuttig zijn voor u met Windows Store apps. Nogmaals, we zullen niet gaan door al deze, maar ze zijn gewoon hier. Dus als je nodig hebt om het te gebruiken, audio-video, als je wilt om de validatie te doen van formulieren, geolocatie, alle dingen die je kunt doen in JavaScript met JavaScript 5 of ECMAScript 5, IndexedDB voor lokale opslag - het zijn allemaal opties voor je. Als u op zoek bent naar een antwoord, kijk maar om bestaande technologieën met HTML5 en CSS en je zult gemakkelijker antwoorden dan te moeten veel van dat spul zelf rollen te vinden. Laat me je een beetje rond hier. Ik heb een site die we kunnen gaan. Laat me stoppen uit deze glijbaan voor een tweede. 

Als we gaan uit naar IETestDrive.com, Ik zal niet veel van een demo hier doen. IETestDrive.com is echt laat je veel van wat er nieuw is met IE10, de dingen die je kunt doen. Ik vind dit echt nuttig omdat in plaats van het lezen door een bos van white papers, kijken naar een paar demo's, en dat gaat om u te helpen zet het op je eigen persoonlijke radar over de vraag of een technologie zinvol is om nog te doen meer onderzoek met zodat u zult begrijpen, "Ik zie wat dit is voor." "Ik begrijp wat Request Animation Frame doet voor mij." "Ik begrijp hoe ik Gewesten of SVG-filters kunnen gebruiken." Je ziet ze in actie, bekijk ze op een voorbeeld hier, en zelf bepalen of dat gaat nuttig voor u om in uw eigen projecten en daarbuiten als u blijven werken met webtechnologie. Hier zou ik je gewoon aan te moedigen om een ​​kijkje te nemen. Ik denk niet dat ik veel tijd daadwerkelijk uitvoeren van deze. We hebben genoeg om te laten zien met het schrijven van code gekregen. Je zult hier dingen vanuit aanraking effecten aan te raken-based games in dat gedeelte, animatie, echt snel hardware-versnelde animatie daar, enkele optimalisaties die je ziet in een aantal van deze monsters ook, en er is veel, veel meer. Als je hier over te gaan en het openstellen van de site map, er is gewoon een belachelijk aantal monsters hier. U kunt ze hier allemaal bekijken. Als u op zoek bent naar iets of je gehoord over iets en je je afvraagt ​​misschien zou dit iets leuks om te gebruiken in de app zijn, proberen te kijken hier, en er is waarschijnlijk een vrij goede demo voor het aan jezelf te redden wat tijd. 

Oke? Eventuele vragen tot nu toe voor de mensen hier? Oke. We zullen hier uit te voeren. Nogmaals, kijk maar dat uit. Ze zijn webstandaarden, dus ga naar een andere showcase sites die jij en kijk of deze technologieën zinvol voor wat je probeert te doen. 

Terug naar dia. Dat gezegd hebbende, je verplaatsen van een webpagina wereld om echt een geïnstalleerde lokale toepassing wereld, dus er zijn een aantal dingen om hier te wijzen. Allereerst, er is geen webserver hier bij betrokken. Er is geen Apache, is er geen IIS hier lopen waar je van pagina's naar een externe client, naar een externe browser middel. In dit geval, is werkelijk alles op verpakt voor u. U dient dat als uw aanvraag naar de winkel, het wordt gecertificeerd, het is in de winkel, en dan gaan mensen door de duizenden zal je spel of je app te installeren. Maar in principe, ze zijn het naar beneden trekken lokaal om hun machine. Er is geen noodzaak meer uit te gaan naar het web, tenzij u oproepen met een externe API nodig, en dat is volkomen normaal als goed ook. Maar ze zijn niet van plan om in die modus waar ze moeten geantwoord gaan van een server naar de volgende pagina van de inhoud te krijgen. Dus dat gezegd, er zijn een paar kleine verschillen API. Deze zijn ongelooflijk klein. Ze zijn onwaarschijnlijk dat je raakt in je normale codering, maar ze zijn in ieder geval gedocumenteerd. Ze zijn soort daar rand gevallen. 

De andere zaak gewezen is het vertrouwen verschillen. Ik noem slechts dit omdat ik wil gewoon zeker weten dat ik zei dat het dus als je later tegenkomt, zult u denken, "Chris zei iets over deze, "Dus misschien, ja, oke," en dan ga je terug en je erachter wat het was. Contexten uit. Standaard proberen we om de gebruiker te beschermen tegen aanvalsvectoren. Er zijn bepaalde dingen die je kunt doen door standaard en bepaalde dingen die je nodig hebt om context te veranderen om te schakelen. Als u gebruikmaakt van een aantal bibliotheken die er zijn - you've al werken met jQuery, maar als je kijkt naar andere bibliotheken die er zijn - je zou kunnen gebruiken sommige functies dat soort gaat dan plaatselijk gebruik, maakt meer dynamische interacties XHR verzoeken, dat soort dingen. Soms zou u kunnen vinden die worden standaard uitgeschakeld, en in dat geval, doe enkel een onderzoek, op zoek naar lokale en web context, en je zult ontdekken hoe dat op te lossen. Zorg ervoor dat je wist dat als je begint met andere kaders te gebruiken, die, ik moet zeggen, ben je perfect in staat om te doen. Dus als je een ander kader te vinden - een vervelend hierover praten in een tweede - voor gaming en je wilt gebruiken, je wilt wat controle bibliotheken die er gebruik en u niet wilt dat spul zelf te schrijven - het is een goed idee, toch? - je absoluut gebruiken dit spul. Er is niets houdt je van het gebruik van elke vorm van bibliotheek die is gebaseerd op JavaScript, CSS, HTML5. Nogmaals, als het iets is wat je kunt doen in IE10, dat is een deurklink van een veel deze dagen, je kunt het doen. Trek het in uw app, referentie die JavaScript-bibliotheek, en gebruik het in uw toepassing, enkel rekening houdend met je misschien een security context keer geraakt in een tijd - niet heel vaak. 

En dan de functies, gaan we over een paar meer van die als we gaan. De UX je soort van wennen als je ziet meer en meer toepassingen uit de Windows Store. Je krijgt een gevoel voor hoe ze werken en hoe het ontwerp esthetisch heeft de neiging om te werken over verschillende toepassingen en welke mensen zullen gebruikt ervaren. Dat is echt het belangrijkste onderdeel. Zorg ervoor dat wanneer ze start uw applicatie die zij niet nodig om een ​​handleiding te lezen, die ze nooit doen, trouwens. Ze moeten gewoon in staat zijn om te beginnen te spelen met uw aanvraag en out ervan uitgaande dat het zonder veel moeite. Door vast te houden en vast te houden aan veel van deze praktijken, je gaat om uw gebruikers een groot plezier te doen, maakt dat gemakkelijker. 

Oke. Een laatste ding op de API-kant en dan zullen we in feite het schrijven van code. WinJS is dat wat ik gezegd heel kort met dat complexe dia met al die verschillende keuzes die je hebt voor het maken van applicaties. WinJS, kunt u denken aan het als een buddy. Het is je vriend te helpen schrijven spullen sneller. Het is gewoon JavaScript en CSS. Je hoeft niet om het te gebruiken. U kunt het gebruiken. Als je gaat bellen bij Windows functies, zal je uiteindelijk het gebruik ervan, maar als er dingen zoals sommige design patterns of controles die je echt niet wilt gebruiken, je wilt iets anders te gebruiken, het is aan jou. Bepaal wat je wilt gebruiken en de stijlen die u wilt gebruiken. De kenmerken van namespacing en klasse generatie - aan jou. Als u liever een of het ander, het is volledig uw keuze. Het is nog steeds JavaScript en CSS. Maar het gaat om je te helpen een heleboel dingen. Bijvoorbeeld, hier is een subset van wat het kan doen, dingen zoals het helpen van asynchrone programmering met beloften. Iemand van jullie gehoord of werkte met Node.js? Het is een gemeenschappelijk patroon te werken met asynchrone programmering. Dus eigenlijk wat je wil zegt: "Ga iets doen, "En je gaat me een belofte dat je weer terug naar mij als je klaar bent te geven." Dat is in wezen wat er gaande is. U hoeft dus niet bevriezen uw aanvraag terwijl de gebruiker gaat en het kiezen van een bestand of er iets wordt stroomden van het web. De UI blijft responsief. En je kunt dat doen met behulp van asynchrone programmering. Het klinkt belachelijk ingewikkeld, maar het is echt makkelijk, want je gebruikt beloften en je gewoon zeggen: "Ga dit doen en als je klaar bent, bel dan terug naar deze methode." Dat is vrij veel. Dat is alles ingebouwd in WinJS. Het gaat om het een stuk makkelijker om echt flexibele en krachtige toepassingen te schrijven. 

U kunt de rest hier te zien, veel animaties. Waarschijnlijk een van de meer belangrijke dingen op deze dia zijn controles. Ik denk dat ik een heel - ja, ik doe. Hier is een voorbeeld van slechts enkele van de besturingselementen die u kunt gebruiken in uw applicaties. Dit is allemaal recht omhoog uit WinJS. U bent niet het schrijven van deze zelf, je gewoon zeggen: "Hier is hoe ik wil dat mijn aanvraag samen te stellen." "Ik zal een flip uitzicht te gebruiken, zodat ik kan gaan tussen de verschillende foto's." Ik heb je niet zien Semantic Zoom. Ik zal je laten zien dat in een tweede. Listviews. Er is GridViews. Je hebt al een raster gezien als onderdeel van de winkel applicatie, dus de mogelijkheid om blokken inhoud te gebruiken en het scrollen over die. Flyout menu zie je van tijd tot tijd. De app bar heb ik laten zien met dat Fresh Paint aanvraag, alsmede, dus je zag hoe u kunt aanpassen dat door de invoering knoppen op het en met dat verstoppen wanneer je niet kan schelen om dat te gebruiken. Dat is echt helemaal aan jou om te gebruiken. Dit zijn alle controles die deel uitmaken van WinJS. Ik zal je laten zien hoe deze te maken in slechts een seconde, maar er is meer dan alleen dit, en het belangrijkste is ze gebruiken als je wilt, wat tijd besparen. 

Als u nog andere controle bibliotheken die u wilt gebruiken, is dat ook prima. Dingen zoals jQuery UI doen veel van dit soort idee ook, het verstrekken van meer controles die verder wat u kunt doen in HTML en JavaScript. Laten we duiken inch Ik heb al gezegd dat. Gebruik wat je wilt. Houd in gedachten dat je zou kunnen lopen in sommige context kwesties. Maar je kan zeker mixen en matchen wat voor soort bibliotheken die u prettig bij voelt, je wilt leren, die u wilt gebruiken, bespaart u tijd. 

Laten we praten over instrumenten voor een tweede. U kunt krijgen wat je nodig hebt om te beginnen werken met Windows Store apps. Als ik weer naar buiten, ik heb te veel dingen hier. Als je naar deze pagina, die is dev.windows.com, je kunt alles wat je nodig hebt downloaden. Als studenten, heb je toegang tot meer dan het algemene publiek heeft wel, dus je kunt hogere eind versies van Visual Studio te krijgen. Edwin vermeld kan je al Windows te krijgen ook. Maar in het algemeen, voor alle ontwikkelaars, kunt u naar deze site en download alles wat je nodig hebt om een ​​aanvraag in te dienen, en het is allemaal gratis. Dus er is een gratis versie van Visual Studio, zijn er een aantal tools die naast dat wordt geïnstalleerd - alles wat je nodig hebt voor het maken en testen van uw toepassing. Het is pas wanneer je gaat om uw aanvraag te publiceren naar de winkel dat je gaat naar een developer account nodig. Ook dit geloof ik is gratis. Is het gratis voor studenten ook? >> [Guarin] Welke? De ontwikkelaar rekening, de daadwerkelijke overlegging. >> [Guarin] Ja. Dat is meer goed nieuws. Je gaat kijken naar dit. Het zal zeggen voor een individuele standaard het is $ 49. Maar maak je niet aanmelden voor dat als een student. We zullen je wat informatie te krijgen via uw programma's die u een gratis rekening kunt krijgen, en dat laat je dan stuur je applicaties tot aan de winkel, zoveel als je wilt, en dat alles goedheid zal spoedig volgen. Dus dat is dev.windows.com. U kunt de tools die je nodig zou kunnen hebben van hier downloaden. En als u wilt, kunt u een proefversie van Windows hier krijgen, maar nogmaals, zult u niet nodig hebt. 

De andere site - wil ik erop wijzen dit uit voor u snel - is design.windows.com. Dat was dev.windows.com. Design.windows.com, kun je raden waar het voor is. Het is eigenlijk een vrij vriendelijke site. Er is veel goede informatie hier. U kunt werken doorheen. Het zal u enkele adviezen over sommige dingen geven dat je misschien nog niet eerder hebben nagedacht of te maken gehad met vroeger, zoals het ontwerpen voor touch, het ontwerpen voor verschillende vormfactoren, het ontwerpen voor de mogelijkheden van Windows 8, de dingen die ik eerder al noemde zoals het zoeken en delen, sommige dingen die ik nog niet gesproken over nog. Ze zijn allemaal hier vermeld, en het is een vrij goede set handige bestand pagina's dat zal u helpen te begrijpen hoe je een bepaald soort aanvraag in te dienen, hoe je interactie doen, hoe om te gaan met de UI en UX van uw aanvraag. Ik zou aanraden dat u een kijkje op deze te nemen, vooral als je op een bepaald punt in de hoop om een ​​applicatie te publiceren naar de winkel. Je gaat te willen weten hoe je een goede applicatie maken omdat ik al eerder als je dat niet gezegd, er is die beoordelingen weer. Mensen gaan om ongelukkig te zijn. Zij zullen niet in staat zijn om dingen die ze verwachten in de juiste plaatsen te vinden. Niemand wil dat jou overkomt. 

We gaan vooruit hier, laat mij sluiten die naar beneden. Nu dat je weet waar je spullen te krijgen, zal ik laten zien hoe je nu eigenlijk gaan gebruiken spullen. Om te beginnen, ik zal je eigenlijk zien hier een voorbeeld van desktop apps op mijn Startscherm. Hier kunt u Visual Studio zien, kunt u zien Blend en andere developer tools die ik heb. Ze hebben een iets andere tegel. Dat komt omdat ze zijn desktop applicaties, en in die gevallen dat ze gaan allemaal terug te lanceren om mijn desktop eigenlijk net zoals apps die je gewend bent. Dus Windows-ervaring, het is hetzelfde. Ze zijn bijvoorbeeld niet, zoals Armed! of deze dingen. Laat me snel te starten een. Eigenlijk, hier is een interessante. Dit werd ontwikkeld door studenten die in partnerschap op NERD. Schermvullend programma, dit soort ervaringen hier. Oh, mooi gesneden schermen en allerlei leuke dingen. Zij ontwikkelde deze. We kunnen net zo goed laten zien de hele zaak, terwijl we toch bezig zijn. Sterker nog, ik werkte met hen een beetje, gaf hen wat advies over dingen omdat ze JavaScript deden voor hun toepassing. Alsjeblieft, ik neem geen krediet voor hun werk, ze deed al het werk. Ik heb ze maar een klein beetje advies hier en daar, maar ze hebben een aantal geweldige dingen met behulp van een JavaScript front-end en koppelverkoop in sommige physics engines en dingen die er te veel van dit werk te maken. Gaan. Eens kijken of dat werkt. Wow, het werkte nog steeds. Oke, goed. Maar je krijgt het idee. Een full screen app, echt een goede ervaring. Deze ondersteunt niet alleen mijn muis en pen als ik dat soort dingen, maar ook aanraken. Als ik een touch screen, kon ik gewoon tekenen op het en blijven werken met dat. 

Een ding dat ik niet laten zien, en de reden waarom ik ben om dit op is Ik wilde naar een andere app om te laten zien wat je kunt doen, je kunt eigenlijk toepassingen in Windows te nemen en sleep ze naar de zijkant van het scherm. Dit heet het breken van een aanvraag. In dit geval heb ik Inkarus genomen en ik heb het toegevoegd aan de kant staan. Het is nu in Snap uitzicht, en dat me in staat stelt om iets anders te doen, terwijl die toepassing is er. De meeste spellen vind je zult gewoon pauzeren. Dat is normaal gesproken een goede ding om te doen, tenzij je spel een of andere manier kan afbouwen om dat kleine van een resolutie, zoals misschien een soort van bordspellen of dat soort dingen op de gelegenheid. Maar in het algemeen, de makkelijkste om te doen en de meest geschikte ding om te doen voor games is om de applicatie te pauzeren. Voor toepassingen zoals nieuws apps, als ik start dit een en dan ik snap het, je ziet het eigenlijk aanzienlijk verandert in hoe het de presentatie van de gegevens aan u. Hier het toont je echt een meer verticale pan die informatie, maar ik kan nog steeds absoluut gebruik maken van de applicatie. Dus het is nog altijd zeer bruikbaar. Het feit dat het in een kleinere oog me niet houden van het gebruik van die app. Zo denken. Het is iets dat je nodig hebt om je apps doen tot op zekere hoogte, maar het is aan u om te bepalen hoe functioneel je apps moet in zo'n een kleinere omgeving. Laat me dat een sluiten en terug te gaan naar waar we hier waren. 

Edwin, je een foto van mij al toegevoegd? >> [Guarin] Ja. >> [Bowen] Kijk dat. Zie je dat? Edwin een foto toegevoegd. [Lacht] 

Laten we teruggaan hier in Visual Studio. Laat mij dit te lanceren voor jou. Ik kon hebt geklikt op de tegel op die Startscherm. Het bracht me terug in de desktop-modus, en het is de lancering van de desktop-app van Visual Studio. Dit is de Windows die je al kent. Ik kan gaan en maak een project hier. We zullen weer richten op JavaScript, HTML. Ik ga om uit te gaan en selecteer hier onder JavaScript, Windows Store. Er is een aantal sjablonen die u kunt gebruiken. Voor de productiviteit, zou ik adviseren u een kijkje bij enkele van deze andere die hier nemen zoals de Grid en de Split. Ze zijn echt handig als je het maken van een applicatie dat gaat om dat soort ontwerp en navigatie hebben. Je zult zien dat deze veel. Degene die ik je net liet zien was eigenlijk een instantie van de Grid applicatie. Dus als je denkt dat je gaat om het maken van een nieuws-app of een RSS-lezer of iets dergelijks, dat zich bezighoudt met meerdere vermeldingen waarvoor u wilt het detail laten zien, denken over het gebruik van een van deze sjablonen om snel aan de slag en het aanpassen van het vanaf daar. Maar gewoon zo kan ik u alle bewegende delen hier laten zien Ik ga naar de lege app te maken, en dan zullen we een beetje dieper ingaan op de details. Ik maak dat blank toepassing hier. Het gaat om het gehele project voor mij te creëren. Ik zal het openstellen van de dingen die ik wil laten zien door gebrek. Laat me even in een klein beetje inzoomen om te laten zien wat er gemaakt voor ons hier. De dingen die je gaat kijken naar de eerste zijn allemaal vernoemd standaard. Dus je gaat op zoek naar default.html, default.js en default.css. Het andere ding om te wijzen is dat we al een verwijzing naar hetgeen ik eerder al noemde. Dit is WinJS. Niemand eigenlijk noemt het deze lange naam hier. Het is WinJS, de Windows-bibliotheek voor JavaScript. Als je het opent, kunt u zien dat het allemaal hier. Er zijn verschillende CSS-bestanden, is er webbrowser. Het is er om u te helpen. Het is er echt aan controles en stijlen en spullen die je gewoon automatisch kunt gebruiken bieden. Maar nogmaals, als er dingen die je wilt gebruiken in plaats op het gebied van styling en andere controles, Het is helemaal aan jou. Ik zal laten zien hoe je een paar van die dingen op dit moment gebruiken. 

Terug over op onze linkerzijde, laat ik je de standaard HTML-pagina. Je hebt al gezien dat de WinJS spul, en dat is echt alles wat daar gaande is met die middelste lijnen van markup, maar het binnenhalen van de CSS standaard en brengen in een paar JavaScript-bestanden uit WinJS. Je hoeft geen meester van wat er gaande is binnen die bestanden. Het is vrij interessant om een ​​kijkje te nemen op hen om soort te beoordelen wat er aan de hand want er is behoorlijk interessant intermediate en gevorderde technieken gebeurt er, maar het leuke is als ontwikkelaars, je kunt gewoon gebruik maken van hen, ze gewoon gebruiken en niet echt zorgen te maken over. U kunt nog steeds een auto te rijden zonder te weten hoe het werkt, toch? Dus dat is het soort ding dat er aan de hand hier. Er is controle en stijlen en spullen die je gewoon kunt doorgaan en gebruik en de code die u kunt gebruiken in een tweede, zonder te weten wat er in zit. Hier zijn je eigen bestanden. Dit zijn uw plaatsen dat u uw eigen CSS kan aanpassen en uw eigen JavaScript om dingen rollen. U zult het toevoegen zeker andere JavaScript-bestanden en wellicht andere CSS-bestanden als uw project groeit, maar dit is echt slechts een startpunt. Hier is de Hello, world equivalent van HTML, dus we zijn weer terug in de body-tag. Op de top, door de manier, het is de HTML5 doctype, dus je zult erkennen dat van wat je hebt gewerkt op. Er is volledige IntelliSense hier zo goed, dus als je dingen zoals het type te doen in een video-tag en breiden dat uit, heb je waarschijnlijk geleerd over het feit die je nodig hebt om fallback encoding doen voor video tags in HTML5 - of misschien heb je - om ervoor te zorgen dat de verschillende browsers ondersteunen voor uw video. Wij hebben dit soort dingen over HTML, over JavaScript, over CSS. Die is ingebouwd in, en laat ik je CSS in een tweede. Hier kun je verder gaan en beginnen met het wijzigen van code, de markup. In feite, voordat ik iets veranderen, ik ga dit uitvoeren en u laten zien wat je krijgt. Je gaat naar een splash screen die u kunt aanpassen krijgen en dan krijg je de Hello, world ervaring hier. Het is fantastisch, toch? Ga je gang en het schip dat, toch? Content gaat hier. Dat is de basis wat. Het kan alleen maar beter vanaf daar. We zullen verder gaan en toe te voegen in een aantal dingen. Ik heb een beetje van markup ik ga hier kopiëren kreeg gewoon dus je hoeft me niet te kijken te typen. Laat me gaan brengen de toolbox hier, en ik zal dit speld omdat ik dit een paar keer zult moeten doen. Toolbox, als je niet hebt gezien Visual Studio, is de plaats waar je gaat een heleboel controles vinden. Je kunt ook stukjes code erin die je kunt hergebruiken. Hier zal ik gewoon pop in een andere HTML, niets vreselijk geavanceerde helemaal hier. Het is gewoon de eenvoudige HTML staat dat ik een ingang waar ik kan typen, Ik heb een knop waar ik het kan voorleggen, en dan heb ik een div dat is in wezen een tijdelijke aanduiding die ik kan gebruiken om de output van de "Hallo, u dit typ." Het is de intro van HTML voorbeeld. Als ik dit uitvoeren, krijgen we automatisch de HTML, maar wij ook automatisch styling krijgen. Dit is een van de belangrijke dingen van WinJS. Het zal u standaard een aantal look en feel die is echt consequent de rest van wat Windows 8 doet. Hier zie je dingen als de knop. De knop standaard in HTML lijkt niet op dat, maar hier doet omdat het krijgen van die CSS vanaf dat CSS-bestand in WinJS. Als je iets anders wilt gebruiken, als u wilt dat veranderen, helemaal prima, ga je gang en doe wat je wilt. Maar dat is de standaard. Het gaat meer vertrouwd aan gebruikers. En natuurlijk zal dit niets doen omdat ik niet echt de draad van elke vorm van code te reageren. Het was gewoon de HTML. Dus ik kan ontdoen van dat, en we komen terug in onze applicatie komen. 

Laat me over te schakelen naar onze default.js. Dit ziet er behoorlijk complex, maar het doet gewoon een paar dingen voor je. Het is standaardtekst. Het zal hetzelfde zijn in al uw projecten. Het enige wat dit doet is gewoon een soort van vragen: "Hoe ben ik hier gekomen?" en zei: "Bent u de lancering van deze app voor de eerste keer?" "Bent u het hervatten van de app van het hebben van het wordt geschorst?" Een paar van dat soort dingen. Echt, onze focus op dit bestand is hier ongeveer hier. Op dit punt, dit een regel code is vrij belangrijk. Het is eigenlijk aan de hand om te gaan en te kijken door alle van uw opmaak, en het gaat om dingen die je hebt gevraagd om zijn veranderd in controles vinden, dieper controles, zoals een rating controle, als een rasterweergave, zoals de vangbal en die andere dingen die ik je liet zien op die dia toe voor. Ze zijn niet inheems HTML controles. Je gewoon niet vangbal zeggen als een element en laat het weten wat te doen. Wat we eigenlijk doen is het zelfde ding dat gebeurt in andere vormen van control frameworks. jQuery UI doet hetzelfde soort algemene aanpak. U gebruikt markeringen in uw HTML, en dan komt een aantal JavaScript door later en zegt: "Oh, ik weet wat dat is. Dat is vragen om dit te worden omgezet in dit spul," die andere, meer expressieve HTML te maken als een ratings controle, dat is wat ik je laten zien op dit moment. Deze regel code is een belofte die zegt: "Als deze belofte wordt nagekomen, "Alles wat u naar vroeg werd vervolgens gemaakt." En dat is het. Het ziet er een beetje ingewikkeld, maar het is echt hetzelfde in elk project. Hier beneden is waar je kunt beginnen met het toevoegen van alles wat je wilt dat er gebeurt, dus we zullen hierop terugkomen in een tweede. 

Allereerst, ik heb een stukje code die kan inspelen op het feit dat iemand heeft geklikt op de knop. Ik ga om te gaan en we deze in hier beneden. Nogmaals, ik ben niet van plan om alle typen hier doen voor je. Very basic webbrowser gewoon zeggen wanneer dit heet we gaan worden verstrekt enkele details over hoe we hier en dan gaan we een paar fundamentele dingen te doen. Gaan vinden het ding in mijn HTML-pagina met de naam nameInput, grijpen, neemt de waarde ervan, slap "Hello" op de voorzijde van het, en blijf dat resulterende tekenreeks in die div-tag die we hadden voordat die echt niets voor hebben. Nu gaan we die tag te vinden en zijn innerlijke inhoud gelijk aan die string. Zeer eenvoudige webbrowser. Hopelijk je erkennen dat er eigenlijk niets bijzonders aan de hand. Het is hier gewoon recht omhoog HTML en JS. Als ik zonder dit nu, het is nog steeds niet van plan om enig werk te doen, want ik heb niet bedraad het omhoog het evenement. Om dat te doen, doe ik dat hier, weer terug te keren naar mijn gereedschapskist, popping het in hier. Ik verwacht dat je al dit soort dingen al eerder gezien, dus ik zal niet te verklaren. Nu gaan we naar gaan halen de helloButton. We gaan zeggen: "Button, gefeliciteerd." "Hier is een evenement dat je nu reageren op." "Als iemand klikt op u, bel deze functie, de buttonClickHandler." En dat is dat de functie we gewoon recht naar beneden op de bodem daar zijn toegevoegd. Dat is het. Dus nu hebben we een ongelooflijk functioneel applicatie. Ik denk dat je echt onder de indruk van dit. Chris. Wachten. Wow. Oke. Dat is geweldig. [Lacht] Maar er is meer. Doe het nog niet kopen. Wacht. 

Laat ik je een beetje meer hier en uitstappen van het volledige scherm. We gaan wandelen voor we lopen. Laat me gaan en eigenlijk tonen u een beetje met CSS. Gewoon standaard, als we terugkijken naar de pagina hier, wanneer we trok in deze dingen WinJS en kregen we het ui-donker, in feite, kunt u deze wijzigen naar de standaard voor het gebruik van lichte toepassing. ui-donker is goed voor grafische toepassingen zoals het gebruik van een heleboel foto's, je bent met een heleboel visuele inhoud. Als je met een veel tekstuele inhoud, de ui-licht is over het algemeen een goede keuze. Je hoeft niet te kiezen, maar ik ben overgestapt naar het en nu ben je het zien van dezelfde opmaak, alles hetzelfde, het is alleen met behulp van in principe een omgekeerde regeling hier waar alles maakt het zwarte tekst op wit. Dat is allemaal goed en wel. Laat me hier uit, en laten we eigenlijk een beetje meer met de CSS. Ik zet het terug op donkere, omdat ik denk dat het waarschijnlijk makkelijker te zien op het scherm toen ik begin deze dingen te doen. Ik ga naar het lichaam te vervangen nog een keer. Ik zal hier gaan. Laat mij dit nuke. Laten we brengen in het lichaam met lessen. Ik geloof dat u hebt elementaire selectors met CSS en dat soort dingen al gedaan, zodat u waarschijnlijk weet wat er aan de hand hier. Gewoon toewijzen van een aantal klassen om onze header, en we zijn het creëren van een nieuwe div naar de rest van dat spul dat we nu kunnen gebruiken om alle samen stijl wrap. Dus wat ik nu kan doen is ga naar onze standaard CSS. Heb je gekeken naar de media queries nog? Heb je sprak over dat helemaal? Media queries maken deel uit van deze opkomende trend - of het is een gevestigde trend nu eigenlijk op het Web - voor responsive design of adaptieve, en het idee is dat uw applicaties zelf echt adequaat kunnen aanpassen op basis van wat het apparaat zijn dat zij op zijn afgebeeld kunnen doen. Dus als je op een mobiel apparaat, uiteraard dat je niet van plan om zo veel schermruimte te hebben zoals u zult op een groot 30-inch monitor zitten met een desktop, een grote PC als dat. Dus de oude antwoord daarop zou zijn om 5, 6 verschillende versies van dezelfde pagina hebben en je zou het openstellen van de versie die is afgestemd op dat bepaalde grootte van het scherm. Niet geweldig. Het is zeer, zeer repetitieve en er is een ton van onderhoud om dat te doen. Nu hebben we iets genaamd CSS media queries, en we kunnen dit gebruiken om automatisch te detecteren wanneer er bepaalde maten of bepaalde vormen van gebruik van uw inhoud wordt uitgevoerd. Zo kunt u reageren op dat en je kan zeggen: "Oke, in dit geval "Je waarschijnlijk niet eens nodig dat ik je vertel wat er aan de hand is." Dit is gewoon te zeggen indien deze toepassing is vastgeklikt, zoals ik u eerder liet zien - grijpen het en zetten het aan de zijkant van het scherm - dan laten we het volgende doen styling. Styling is niet alleen over kleuren en dat soort dingen. Het gaat ook over de maat en marges en paddings en oriëntaties van de inhoud of zelfs uit te schakelen of waarmee hele delen van uw pagina en, in dit geval, uw app of je spel ook. Dus hier kun je zo simpel doen als je wilt. Dit zou niet nuttig zijn in je apps, maar het is demo tijd, dus ik ga om verder te gaan en gewoon toe te voegen in de basis lichaam selector en zeggen: "Als ik knapte, laten we gaan je gang en doe achtergrondkleur en laten we kiezen voor iets." Je hebt IntelliSense hier. Dit is eigenlijk echt cool. In 2012 hebben we een heleboel dingen toegevoegd voor CSS-ondersteuning en JavaScript en HTML. Je hebt natuurlijk heb drop-down IntelliSense ook, maar dat is niet het cool ding. Het leuke is dat je hebt visuele selectors kreeg voor een heleboel dingen ook. Dus je zou kunnen gaan door en kies een kleur, of u kunt gaan en nog meer specifieke en u kunt kiezen - dit gaat verschrikkelijk zijn. Ik kom hier eigenlijk kies een fatsoenlijke kleur. Bekijk de markup ook, trouwens. Dat is je RGB standaardformaat daar. Maar als ik overschakel de dekking, het gaat om over te schakelen naar een alpha-kanaal selector hier. Zodat u kunt zien dat de kleur met in wezen het percentage transparantie die je hebt voor dat allemaal gebakken recht daar. Ik ga het als 100% te houden en dan als ik klaar ben met dat, alles goed en wel. Nu als ik de app en nemen we de app en we snap het, dat achtergrondkleur automatisch wordt aangepast gewoon omdat we een aantal CSS die zegt: "Ga dat doen." U kunt ook te schrijven JavaScript dat zal hetzelfde doen of die je zou kunnen gebruiken om daadwerkelijk te pauzeren een spel, doe dat soort dingen. Dat is waarschijnlijk wanneer u JavaScript zou gebruiken. Je zou uit het spel lus op dat moment draaien. Je zou sommige JavaScript nodig hebben, omdat dat niet iets wat je zou CSS voor zou zijn. Maar houd in gedachten het is gewoon een gebeurtenis. Je zou kunnen zeggen: "Wanneer mijn aanvraag wordt aangepast, "Laten we eens kijken of we beet." En dat is het. 

Oke? Ik heb veel gepraat. Zijn er vragen tot nu toe op waar we zijn? Yeah. [Student] Is er een tutorial voor iedereen om meer informatie te krijgen? >> Ja. De vraag is, is er een tutorial voor? Ik kom net uit te breiden tot alles. Er zijn een paar dingen die je kunt gaan. Laten we daadwerkelijk wegkomen. Laat me teruggaan hier. Een ding wijzen is Visual Studio zelf heeft tutorials ingebouwd Laat me te ontdoen van deze. Als je gaat en creëer een nieuw project, doe Bestand, Nieuw project, en kijk op de linkerkant is er een online knooppunt in deze selector. Het gaat om een ​​klein beetje nemen. Ik ben op mijn MyFi hier. Maar het gaat om te komen en het zal me een kans om sjablonen te geven maar ook, nog belangrijker, samples. Dus ik kan u op JavaScript. Het gaat om monsters voor me te vinden. Mijn resolutie is zo hoog hier. Normaal gesproken zou je een lijst van een heleboel verschillende dingen hier te zien. Als er iets is wat je wilt proberen, kies de taal, JavaScript hier, en zeggen: "Ik weet niet hoe te geolocatie te doen." "Ik weet niet hoe je een bestand te openen." "Ik weet niet hoe om te profiteren van de webcam "Of optimaliseren voor touch of dat soort dingen." Er zijn monsters voor alles: het delen, zoeken, app bars, maken van externe gesprekken naar een dienst, JSON-codering. Al dat soort dingen zijn er monsters voor hier, en ze zijn niet groot monsters die gaan om u de hele nacht om uit elkaar te trekken alleen te vinden dat een ding dat je wilde leren. Ze zijn echt goed. Ze zijn klein, recht op het punt soorten monsters. Ik heb een hoop geleerd door te gaan door deze zelf, en dus ik raad dat een partij als een ding. 

Een ander ding om te wijzen is natuurlijk toonde ik u dev.windows.com, dus als je terug naar die te gaan, zie je aan de onderkant is er ook de monsters hier. Zo kunt u ze allemaal in een keer te downloaden, maar er is ook een heleboel andere middelen hier ook dat kan u helpen om op snelheid. 

Een ander ding, en ik zou echt aanraden dat je dit probeert, Ik heb het op mijn blog, maar ik ga gewoon recht op. Ik zal je laten zien. Mijn blog heeft middelen en dat soort dingen. Een van de dingen die wijzen is hier, dit ding: uw idee. Your App. 30 dagen. Als u klikt op deze, het gaat om je naar een echt nuttig site. Dit is veel nuttiger dan je zou verwachten. Dit gaat worden 30 dagen van de inhoud die u in principe kunt krijgen tips en trucs gedurende dat proces als je het creëren van een app. En zoals je misschien niet verwachten, kun je eigenlijk krijgen voor games te en voor de telefoon apps, dat soort dingen. Dus eigenlijk aanmelden voor het, en ze gaan sturen u tips en tricks op, "Heb je nagedacht over het doen? Steunt u Snap?" "Hier zijn enkele richtlijnen over hoe om dat goed te doen." "Heb je nagedacht over het indienen van naar de winkel?" "Heb je nagedacht over hoe je gaat om uw aanvraag te verkopen?" Het gaat om te lopen door al deze verschillende dingen. En eigenlijk, als je op de gaming spoor, op een bepaald punt begin je het herkennen van de persoon die tegen je praat want ik had eigenlijk naar Redmint aan die en opgenomen 2 video's daar te doen. Maar dat is allemaal onderdeel van de gaming spoor, en er is ook een volledige track voor algemene app ontwikkeling. Dat heet Generation App. Ik zou zeker aanraden dat u ook in aanvulling op de monsters. 

Er is een hoop video's op een site genaamd Channel 9 ook. Dat is waarschijnlijk het laatste wat ik zal ook adviseren voordat we hier verder gaan. Channel9.msdn.com. Dit is geweldig, want je bent niet van plan om te lezen door ton van white papers. Het is eigenlijk een veel video's, screencasts en dingen die recht op het punt zijn. Ik zou niet zeggen dat het altijd recht op het punt. Het hangt ervan af wie er aan het woord. Maar in het algemeen, is er een aantal echt to-the-point video hier dat zal u tonen wat bijzonder wat je zou willen leren of zie gedemonstreerd. Er is ook al onze content van onze conferentie dat een paar weken geleden gebeurd genaamd Build, en je zult zien dat daar. Er is kerntechnologieën voor Windows 8 spellen. Daar ga je. Ik was er, eigenlijk. Je kunt me niet zien. Ik was hier. Maar goed, dat terzijde, ik zou aanraden dat u een kijkje nemen op die video's te nemen. Ze zijn erg behulpzaam. Als je vast zit op iets of wil je gewoon om te zien wat iets kon doen, brand die op. 

[Guarin] Windows Mail net stuurde me een e-mail met een link naar inhoud voor studenten om te downloaden met voorbeeldcode en dat soort dingen. >> [Bowen] Great. Geweldig. Dank je, Edwin. 

Goed. >> [Student] Ik heb een vraag. >> [Bowen] Oh. Ja, graag. [Onverstaanbaar student vraag] >> [Bowen] Oh, ik ben blij dat je dat vraagt. Ja. De vraag was, is er een visuele interface voor mij om dingen te creëren? Edwin zal je rijkelijk belonen voor die vraag. Er is een manier om dit te doen. Moeten we nu doen? We doen het nu. Ik ga naar het nu. Eigenlijk, laat me toe te voegen in een ding op deze demo, en dan zal ik je laten zien de werkelijke antwoord. Ik was van plan om hier toe te voegen in een beetje meer CSS. Ik was een beetje korting op raaklijnen hier. Laat ik in sommige CSS hier om te profiteren van de klassen die we toegevoegd een tijdje geleden, op de kop, de mainContent div en vervolgens naar de greetingOutput. Als ik dat doe en voer het uit, zie je nu hebben we een beetje anders opvulling en marges gekregen, dus we hebben eigenlijk een aantal offsets hier. Deze zijn meer in de richting van wat je gaat verwachten van een definitieve gepolijste toepassing. Maar ik ben gewoon dit laten zien aan u, want het is recht omhoog CSS. Dus de dingen die je al weet dat je kunt hier gebruiken om de inhoud aan te passen als u wilt. Je hebt al gezien hoe je de achtergrond veranderen op die manier. 

Als ik terug naar onze HTML gaan, ga ik in een keer toevoegen meer set van markup, en dit is in feite gaat om een ​​controle uit WinJS zijn. Ik ga om te gaan en pak deze, een label. Laat ik zorg ervoor dat ik doe het op de juiste plaats. Waarschijnlijk goed genoeg. Hier heb ik net toegevoegd - en we zullen het volledige scherm te gaan, zodat je het hele ding kan zien - Ik heb een label voor de volgende div toegevoegd. De div heet ratingControlDiv. Op zichzelf zal niets doen. Als u deze openen in een browser, zou je op zoek naar lege, de div zelf. Maar vanwege die mysterieuze regel code die ik u eerder liet zien, het proces al, het gaat om te zoeken naar iets dat er zo uitziet - data-win-controle - en het gaat om te vinden wat er in die parameter. Het gaat om een ​​geval van wat dat is het wijzend te maken. In dit geval is het een rating controle, dus ik zeg: "Ga en vervang dit ding "Met wat je moet doen om een ​​rating controle te maken." Het zou een flip controle zijn, kan het de voortgang ring of wat besturingselement dat u wilt gebruiken. Ze gaan allemaal in wezen werken op dezelfde manier. Je gebruikt standaard HTML5 markup om aan te geven wat je wilt, en dan zul je een controle te krijgen aan het eind van dit. Laat me dit uitvoeren. Ik heb net gekopieerd die in, en nu dat markup wordt deze, dat is eigenlijk heel een aantal HTML-elementen. Dit zijn allemaal afzonderlijke beelden, en er is divs om hen heen met selectors. Hopelijk kun je dat zien. Het is een beetje subtiel. Ik kan zweven over de verschillende items, en het gaat mij toe om de rating hier te zien. Ik kan op klikken, en onthoudt de rating, maar dat is het zowat. Het is niet echt iets met de waardering te doen. 

De ene laatste wat ik wil laten zien op deze voordat we overschakelen naar een meer visuele design ervaring is een klein stukje code die ik kan gebruiken om te reageren op deze WinJS controles. Laat me daar weg, terug uit het volledige scherm, en schakel over naar JS hier voor de tweede. Ik kan dit hier doen. Ik denk dat ik dit hele ding vervangen. Eigenlijk denk ik dat het zal al vervangen, maar we zullen samen uitzoeken. Ik zal dit hier te plaatsen. Yeah. Ik ga deze ook te verwijderen. Wat heb ik toevoegen? Het ziet eruit als een hoop. Het is niet veel. Ik verlengde die lijn van code die ik al eerder over gesproken, en ik zeg: "Als alles klaar is, wanneer al mijn controles zijn gedaan, "Dit dan doen." Dus voer deze functie genaamd voltooid. In dit geval, is dit spul je kunt achterhalen. Gaan vinden dat div controle. Eigenlijk is er een ding dat ik zou moeten wijzen. Dat volgende regel zegt eigenlijk: "Ik heb dat ratingControlDiv gekregen." "Ik wil het praten alsof het een echte controle, een WinJS controle." Dus eigenlijk, bent u vragen om dat uit het. Je zegt: "Ik wil met je praten als een controle." En dan kun je beginnen te zeggen dingen als: "We gaan naar een luisteraar voor u toevoegen "Dus als je veranderd bent kunnen we reageren." En dan kunnen we ook dit soort dingen doen. Eigenlijk is dat de oude code daar. Ik denk dat ik mis plakken in nog een functie, en dat zou de eigenlijke functie die zou reageren op de rating controle veranderd zijn. Laat me pop die in hier beneden, ergens rond daar. En in dit geval, het enige dat nieuw is, is het feit dat we gaan in wat de rating controle vertelt ons en wat we vragen wat de tentativeRating genoemd. Er is een bos van verschillende andere dingen die die controle die u kan vertellen, en het gaat controle door controle. Het is zeer eenvoudig. Je zult in staat om het uit geen enkele moeite mee. Ik run deze, en nu wanneer ik de ratings en klik op de waardering, je ziet nu het is eigenlijk erop te reageren. Het zetten van dat cijfer op het scherm in die anders leeg div-tag onder de rating controle. Dat is de magie van een heleboel dingen hier ook. Dus als je het creëren van applicaties voor de Windows Store, er is een ton van de controles die je gewoon kunt gebruiken. Ze werken als dit. 

Laat ik je de visuele kant van het ontwerpen voor deze toepassingen. Het goede nieuws is dat je al deze tool als je alles installeren als je naar die te downloaden en je krijgt Visual Studio. Ik kan rechts klikken op deze. Ik zal niet vergroten Het zegt enkel Open in Blend. Blend is een ander instrument dat zij aan zij met Visual Studio werkt en is veel meer gericht op het ontwerp kant van de dingen, dus het is echt oppervlakken tools die zijn geoptimaliseerd voor het maken van stijlen, maken van animaties, het werken met CSS, een heleboel dingen in dat soort ader. Hier wat moet zeer interessant en vrij duidelijk onmiddellijk we kijken naar de app. Hopelijk hebben we nog steeds. In plaats van code die we nog steeds op de bodem, we zien de werkelijke weergave van de applicatie. Wat meer is, het is niet alleen een weergave van de app, het is eigenlijk de app draait. En dat is wat echt aardig over Blend. Het team heeft veel werk gedaan om HTML-en JavaScript-en CSS in deze tool te brengen. Nu kun je eigenlijk, als je nieuwsgierig bent, "Wat betekent dat? Wat kan ik doen?" Ik kan eigenlijk ontwerpen om deze toepassing ook al dit soort dingen niet bestaan ​​in mijn element niet. Vergeet niet dat cijfer controle? Het was gewoon een div-tag. Dit spul, die ster, bestaat alleen tijdens runtime. Hoe weet ik dat? Er is een beetje magie hier. Zie deze bliksemschichten? Elke keer zie je een bliksemschicht, dat betekent dat het is gemaakt door iets at runtime. Sommige JavaScript liep en draaide iets in dit of heeft dit met enige logica. Die sterren die je daar ziet zijn gemaakt door JavaScript door WinJS. Het mooie is, het maakt niet uit voor mij, kan ik nog steeds ontwerp het, Ik kan nog steeds gaan in en verander het, kan ik te weten komen wat er gaande is hier, Ik kan kijken naar de CSS, kan ik verder gaan en erachter te komen waarom de kleur is zoals het is, Ik kan beginnen knoeien met dingen en het maken van dingen verschrikkelijk, wat ik wil doen. Eigenlijk, zal ik dingen met rust laten. Maar je kunt hier zien dat het allemaal de NOS en het toont je hier. Als ik ga naar daar, het gaat om te laten zien alles wat ze noemen Winnen, dus de CSS-regels die de meest specifieke en de meest gekozen voor dat item, die heb je waarschijnlijk al voorbij gegaan in uw lessen, waar je kunt zeggen dat er een algemeen lettertype dat we toepassen bij alles, maar omdat dit een h1 en ik heb een kleur die is gedefinieerd voor H1S, het gaat om deze kleur te zijn, en dat is omdat het meer specifiek dan de body1. Een ding hier laat je dat allemaal, en het is echt krachtig spul als je meer complexe, je je afvraagt ​​waarom deze dingen zijn zoals ze zijn. Het zal je eigenlijk vertellen, en je kunt een van deze items hier te halen. Die kleur is niet al te slecht, eigenlijk. U kunt deze selecteren. Hopelijk kun je dit zien. Voor alles wat je hebt op uw aanvraag, zie je een hele cascade van alle CSS die zouden hebben toegepast op die en die men wint, die men eigenlijk voorrang had. Deze zijn een beetje saai. Er is niet veel te doen in een aantal van deze. Als ik en verander de kleur, dan zul je beginnen te zien wat trapsgewijze daar. U kunt ook gebruik maken van HTML hier ook. Ik kan gaan en de HTML-eigenschappen voor al deze dingen aan te passen als ik wil. Er is gewoon heel veel dingen hier. 

Ik wil niet dat je tijd nemen door te gaan door alles hier. Gewoon weet dat het hier. Er is veel design-georiënteerde functionaliteit is alleen beschikbaar voor u dus je kunt visuele blijven, werken met de applicatie, en niet te veel gissen doen dat je zou hebben om normaal en fietsen terug van een browser doe terug in uw ontwerp, terug naar de browser. Dit is echt cool stuff voor dat, en als je een Windows Store app te ontwikkelen, het gaat je veel productiever. 

Je zult ook zien dat het volgen van de markup hier en uw CSS als je werkt door verschillende dingen. Het is waarschijnlijk erg moeilijk voor u om te zien dat, met name op video, maar dat is wat er aan de hand hier, en ik zou u bekend bent met dat geworden. Het bespaart u een hoop tijd. Dat is Blend. Als u wijzigingen hier te maken, worden ze automatisch gaan over de rug dragen Visual Studio. Het is dezelfde bestanden, het is hetzelfde alles. Ik zal het met rust laten. Ik heb een beter voorbeeld dat ik wil laten zien. Maar als ik een verandering daar en opgeslagen en ik terug naar Visual Studio kwam, zou het zeggen, "He, je gewoon iets veranderd. Kan ik het opnieuw voor u?" Ja. En je gebruikt dezelfde dingen daar. Dat is het einde van dat monster. 

Ik wil je laten zien een hogere end monster alleen maar om u een beeld van andere functionaliteiten geven je zou kunnen denken over ook. Dit is een voorbeeld app die je kunt downloaden. Als je kijkt naar iets genaamd de Windows Camp in a Box, er zijn enkele voorbeelden die in die, en een van hen is de Contoso Cookbook. Ik kan dit alleen nog maar voor jou. Custom splash screen. Dit is de toepassing rasterweergave. Ze hebben gebonden aantal aangepaste data hier. U kunt navigeren door dit. U kunt gaan en een kijkje nemen op de verschillende dingen die ons hongerig op een vrijdagmiddag zal maken. Ik weet het niet. Wat gaat me het meest hongerig? Ik weet het niet. Ik ga gewoon een kiezen. Je gaat in deze dingen. Het zal u tonen het recept. Je zou ook kunnen, in plaats van te klikken op een item, kun je recht om die categorie van de inhoud, dat gedeelte van de inhoud. In dit geval kunt u tal van nep-Latijn lezen vertellen u alles over deze recepten hier en ga dan rechtsaf de specifieke recept. Deze ondersteunt ook dingen als de delen die ik je liet zien voordat met de foto's. U kunt ook zoeken in deze toepassing ook. Het is heel eenvoudig om het zoeken te doen. Kortom, je bent net een stukje tekst uit Windows en u beslissen hoe u wilt zoeken handgreep met dat. Het is een paar regels code om dat te krijgen, en dan wat je ermee doet na dat is helemaal aan jou. 

Hier hebben ze ook een app bar waar ze met behulp van een andere functionaliteit. Ik zal je precies vertellen wat het is. Een herinnering is gaan gebruiken wat een toast kennisgeving genoemd. Dit is echt handig voor de gebruiker te laten weten als er dingen zijn gebeurd, als een applicatie is geïnstalleerd of iets werd voltooid. Het is ook goed voor games ook. Als je een persistente wereld of een leaderboard en een dienst die is hosting dat misschien op een aparte machine, die kennisgevingen kunnen worden in een machine gestuurd en zelfs als de gebruiker niet met behulp van je spel, het spelen van je spel of het runnen van uw app, ze kunnen nog steeds meldingen over dit soort gebeurtenissen. Dus je zou kunnen zeggen: "Je kasteel is vernietigd of wordt zowat vernietigd." "Kom terug en te verdedigen," of iets dergelijks. U klikt op de melding, ga je terug in het spel, en je kunt spelen. Dus dat soort dingen kan helpen echt mensen te trekken vrij effectief terug in uw app. 

Er is ook ondersteuning in deze toepassing voor het gebruik van de microfoon, de webcam, video doen en het nemen van foto's. U kunt ook pinnen een tweede tegel. Het is handig als je wilt gewoon een tegel die gaat recht op bepaalde inhoud. In dit geval gaat recht dit recept. Alles wat ik vermelden Ik laat omdat het dingen die je kunt denken over het gebruik ook. Voor het grootste deel zijn ze zeer eenvoudig te gebruiken. Ik zou alleen adviseren u brengen dat sample explorer en vind een monster dat je kunt laten zien hoe dat te doen. Het is vrij eenvoudig om die in je apps daar ook mee te nemen. 

Ik ga u iets anders dat is wel cool hier te tonen. Ik zal deze toepassing snap, en ik ga terug naar Visual Studio te gaan. Deze toepassing wordt uitgevoerd. Het loopt van Visual Studio. Ik kan een aantal mooie leuke dingen doen met die. Ik heb eigenlijk een optie om een ​​element te selecteren, en ik kan hier naar de live applicatie en ik kan zeggen, "Ik vraag me af waarom is Bereidingstijd een beetje lichter grijs dan de titel zelf?" Ik kan op klikken. Het gaat terug in Visual Studio synchroniseren dat, en het gaat me precies de gegenereerde inhoud die resulteerde in dat deel van de UI tonen. Dus in dit geval, het is post-ondertiteling en h4 dubbele construct, en dat waarschijnlijk vertelt ons wat we moeten weten, want als een h4 binnen die context, het gaat om een ​​bepaald soort lettertype krijgen. Maar als ik weet nog steeds niet waarom, kan ik op Trace Styles. Ik kan dan uitbreiden, kleur en ik kan precies te weten waarom die kleur is niet het lichaam kleur maar in feite is iets anders. Dit is in wezen de dev gereedschappen van Internet Explorer tot op zekere hoogte gebracht in Visual Studio. Als je hebt gewerkt met de Chrome Dev Gereedschap, Firebug, dat soort dingen, dit soort tools die in de browser, dat soort functionaliteit is recht in Visual Studio gebracht dus je hoeft niet echt om een ​​browser te openen en werken met deze tools afzonderlijk. Nu heb ik een Windows Store app alleen rennen, en ik kan beginnen met het uit elkaar te trekken en uit te vinden waarom de dingen aan het doen zijn wat ze zijn. 

Ik kan dit ook doen het op deze manier ook. Ik kan gaan en gewoon iets te halen vanaf de markup en ontdek wat het is in de applicatie zelf. Ik denk dat ik ben gegaan door alles. Hier ben ik zweefde over dit. Ik kan het selecteren. Het gaat om me te tonen in de daadwerkelijke uitvoeren van de toepassing waar dat ding is dat ik nu in de markup ben klikken. Echt cool stuff. Als je probeert te achterhalen wat er aan de hand is en wat HTML doet, wat CSS doet, houd hier rekening mee. Vergeet niet dat dit hier voor u en ook dat Blend kan werken met een live draaiende applicatie. 

De ene laatste wat ik wilde laten zien met deze toepassing - By the way, het toont u delta's als dingen veranderen ook, zodat u kunt kijken voor die gele highlights. Dat zijn dingen die gewoon zijn veranderd in de toepassing. Maar een laatste ding. Ik wil terug naar Blend gewoon voor een tweede hier. We zullen dit open te stellen, Open in Blend, dezelfde app, zelfde alles. Ik wil gewoon laten zien van de ervaring hier is niet alleen bent u vast op de homepage te kijken naar de dingen die je standaard krijgt als je de app draaien en laat hem daar zitten. U kunt ook terecht op dit mooie kleine icoon hier. Het heet de interactieve modus. U klikt op dat. Het zal brengen uw toepassing. Je bent niet in de ontwerpmodus meer, dus je bent niet van plan om te klikken op dingen functionaliteit te veranderen, maar je kunt eigenlijk werken met de applicatie nu. U kunt doorklikken, kun je doen wat, naar een recept dat u de zorg over of aan een categorie. Laten we naar deze categorie. Ik zal zeggen: "Oke, hier is waar ik wil ontwerpen." Dan moet je nogmaals op die knop, zal het u terug te brengen in het ontwerp oppervlak, en nu kun je al die dingen die ik het eerder over had doen. Ik zal klikken totdat ik deze gekozen, ontdek de afmetingen, vinden van de HTML-code voor het, de CSS voor het voor een actieve toepassing, wat later onderdeel van de aanvraag. Zeer, zeer nuttig. Ik zal dit laten zien. Houd het in gedachten als u op zoek bent naar het schrijven van code met deze omdat het gaat scheelt je een hoop gedoe, en het is best goed spul. Dat is zo ongeveer alles wat ik wilde laten zien op Blend en Visual Studio voor dat alles. 

Heeft u vragen over een van deze tools? Helemaal niets? >> [Guarin] Ik heb dingen om uit te geven, zo goed vragen, goed spul. 

[Bowen lacht] Ik heb je al laten zien mijn demo's hier. Ik ga het op de pagina Resources zetten en zich tot vragen nu. Die eerste referentie is dat Generation App site met het spel spoor en de app spoor. Aanmelden voor deze. Je hoeft niet naar de 30 dagen wachten om de inhoud te krijgen. U kunt beginnen te gaan en te kijken naar de inhoud als u wilt. Ik begrijp uw tijd frames anders dan misschien - [lacht] Dus wanneer is de Hackathon? Dat is een paar weken, toch? U hoeft dus niet de 30 dagen te wachten. Dus ja, kunt u zich aanmelden voor die en dan gewoon beginnen te trekken van de inhoud ervan. Ook de Dev en de Design Centers. En ik heb dit niet noemen, maar er is ook de Store Docs. Dit zou voor na de Hackathon als je klaar bent om te beginnen met het indienen van uw apps voor de winkel bent. Er zijn enkele nuttige tips hier, wat begeleiding over hoe om dingen te krijgen in de winkel, een aantal gemeenschappelijke problemen die u zou kunnen struikelen, en dat is het einde van deze middelen. 

Dus wat zit je dwars? Iets anders dat je - [Guarin] Wie is het denken over het doen van een Windows app voor CS50? Cool. [Bowen] Cool. Geweldig. 

Heeft u vragen over de dingen die je tot nu toe hebt gezien en hoe het op dit? Bijvoorbeeld, met meer tijd kon ik een spel dat ik heb geschreven neem en dat loopt in de browser en gewoon een soort van gaan door het proces brengen die in Visual Studio en waardoor het een Windows Store app. Het kost meer tijd dan we hadden echt te omvatten vandaag, maar de korte versie is dat het dezelfde code die u heeft uitgevoerd in de browser, en de dingen die je veranderen zijn de dingen die u beslist om aan te sluiten bij Windows 8. Dus als je wilt charmes te gebruiken, als u wilt zoeken of te delen, je nodig hebt om een ​​app bar sommige functies weg te verbergen op dat te maken, dat zijn de dingen die je zou veranderen. Maar de kern van uw web-app kan intact blijven. Nogmaals, zolang het werkt in IE10, gaat het om een ​​heel eenvoudige poort dat spul in Visual Studio te brengen, in Blend, en maak er een Windows Store app. Nogmaals, de enige dingen die je zult moeten leren zijn die andere functies die u kunt gebruiken om licht op een applicatie, zoals een live-tegel en dat soort dingen. 

Yeah. >> [Leerling] Mijn vraag gaat over het mobiele werken. Dus als je een app die werkt als een app op het bureaublad te maken, is het heel gemakkelijk om te dragen naar mobiel, of is er een - De vraag is, als ik een Windows Store app die echt geoptimaliseerd is voor deze omgeving en ik wil dat het een mobiele wereld te brengen, wat er bij met dat te doen? Dat, net als vele vragen, is altijd een voortdurend veranderende antwoord. Het goede nieuws is dat als je steken met HTML en JavaScript, CSS, als je vanaf een Windows Store app, het gaat om u te laten brengen naar het web en dan dat soort technieken, zoals media queries en dingen, te passen aan verschillende afmetingen apparaten. Dat gezegd hebbende, er is altijd kaders en dingen die er dat ondersteuning breiden uit verschillende technologieën, verschillende platforms. Dat verandert de hele tijd. We veranderen ook dingen als we kijken naar wat we nu hebben daadwerkelijk met Windows Phone 8. We hebben een aantal gedeelde basisinfrastructuur aangeboden tussen applicaties voor omgevingen. Dus de dingen die je doet om een ​​Windows Store app te creëren, een groot deel daarvan kan worden meegedragen in een Windows Phone 8 applicatie. Dat is weer een nieuwe verhaal, dus is er een aantal pagina's over die op te bouwen. De SDK komt net uit een tijdje geleden. Het was net een tijdje geleden. Maar in termen van andere platforms ook, u waarschijnlijk tegenkomen veel cross-platform frameworks ook. Het goede nieuws is het spul dat je hier doet, de kern functionaliteit is recht omhoog web standaard dingen. De enige dingen die niet gemakkelijk zou vertalen zijn de dingen die Windows 8 doet, maar dat is geen verrassing, want het is een Windows-functie. Je gaat niet om het delen of soortgelijke soorten contracten op elke andere platform te vinden. Dus dat zijn de dingen die je zou willen van een ontwerp perspectief zorg ervoor dat je manieren om soort abstract dat uit, zodat je kunt zeggen: "Als ik die op deze, kan ik dat doen." Als ik niet, is er een aantal design patterns die je kunt gebruiken om te verbergen dat soort spullen weg. Maar houd dat in gedachten. Yeah. Sorry. Ga je gang. 

[Student] Als ik wil mijn Windows-applicatie te testen op de top van [onverstaanbaar] [Bowen] Ja. Ik sloeg nog een ding ook. Yeah. Ik zal uw vraag eerst te beantwoorden, dan zal ik je laten zien een eigenschap die ik vergat te vermelden. We hebben wel een aantal machines die lokaal beschikbaar. Het spijt me. De vraag was, hoe test ik dingen op apparaten als ik niet toevallig een heleboel dingen om uit te kiezen? [Guarin] Wij uitgeleend jullie, denk ik, 5 of 6. Hoeveel heb je nodig? [Student] We hebben 4 van hen. >> Oke. Jullie hebben 4 leien om mee te spelen. Dus zeker iedereen laten weten, alstublieft. [Lacht] >> [Bowen] Awesome. Dat is een nog beter antwoord dan ik was van plan om u te geven. We hebben een spreekuur voor ontwikkelaars die we doen op ons kantoor en nu binnenkort naar de Microsoft Store over bij de Pru, maar Edwin heeft al voor je gezorgd. Er zijn 4 leien beschikbaar voor uitlenen, voor het testen. Daar gaan we. Er is een voorbeeld van een daarboven. Dus ja, absoluut. Geweldig. Absoluut veruit de beste manier om het te testen is om op een apparaat. Als je niet toevallig een nog of je niet wilt over de campus te lopen in de sneeuw een of wat grijpen, is een manier om dit terug in Visual Studio do. Als ik terug naar waar ik was hier te gaan, hier in plaats van het gebruik van lokale computer, je zou kunnen verbinden met Remote Machine, maar dat is niet waar ik het hier over. Simulator is het ding dat je zou willen kijken. Ik zal dit uitvoeren, en echt wat het is, het is in wezen een venster op uw eigen systeem. Hier is eigenlijk mijn systeem draait, draait Contoso, maar op een manier die me sommige parameters uitvoering wijzigen de milieu-parameters. Dus ik kan hier zeggen: "Weet je wat?" Oh. Ik al het lopen in een gesimuleerde 27-inch monitor op 2560 resolutie. Ik kan gemakkelijk vallen die naar beneden en zie wat mijn aanvraag zou doen met een kleiner scherm of door het veranderen van DPI instellingen of wat dan ook. Dus op een klein scherm, een 10.6, wat gaat het doen? Dat ziet er nog steeds vrij goed, toch? U wilt dit doen, vooral als je onderwerpen aan de winkel, want we doen als onderdeel van het testproces. En als er problemen zijn als dat, dan kun je lopen in een probleem krijgen gecertificeerd voor de winkel. Maar dat is een deel van de simulator. Echt cool. Zeer gemakkelijk om dat te doen. U kunt ook functies zoals draaien ook. Ik kan hier op de knop, heb het draaien, kijken wat iemand zou hebben als een ervaring roterende hun lei, hun tablet en het gebruik van uw applicatie met dat. Er zijn een aantal andere dingen, zoals touch-emulatie en een aantal andere dingen, het instellen van GPS. Ik kan doen alsof ik op een andere locatie en zien wat mijn applicatie doet toen ik beweren dat ik terug ben in Seattle of zoiets. Maar het is echt een handige functie, en het is ingebouwd in zowel Visual Studio en in Blend. Ja. Uw vraag. 

[Student] Als je het schrijven van een spel, heeft Visual Studio hebt ondersteuning voor animatie? Yeah. De vraag is rond animatie ondersteuning, met name gaming. Het hangt ervan af. [Grinnikt] JavaScript zal ik zeggen dat er waarschijnlijk minder steun dan is er op de XAML kant, die tijdlijnen heeft, heeft storyboards en dingen die zijn ingebouwd Voor animaties op JavaScript apps, ik weet niet hoeveel van een antwoord dat ik je wil geven. Ik heb de middelen op mijn blog die verder gaan door een heleboel opties voor zowel natuurkunde animaties, opties voor JavaScript-georiënteerde games op Windows 8. Ik zou u verwijzen naar die. Kortom, er is zo veel keuzes. De reden dat ik aarzelend is dat er zo veel keuzes voor het doen van animaties met JavaScript. Het zou CSS zijn, het zou kunnen worden van het Canvas-gebaseerd, kan het zijn gewoon basic DOM animaties, het zou een heleboel verschillende dingen, dus het is echt afhankelijk van uw keuze. Als u besluit om iets als Create.js of kalk of andere vormen van kaders gebruiken - Nou, ik weet niet eens of je gaat in staat zijn om een ​​hoger doel framework graag Impact of Construct. Dat de neiging om meer code dan kunt u overwegen vanaf nul te genereren. Maar in die gevallen kan je nog steeds gebruik maken van een simulator, kunt u de omgeving gebruiken, en ik de neiging om gewoon gebruik maken van deze omgeving voor mijn testplatform in die gevallen want ik ben het ontwikkelen van games. Ik heb prima geweest vooral met Canvas animaties, dat is waarschijnlijk de meest voorkomende ding. De beste je gaat waarschijnlijk vinden is de dev tools in de browser en de dev gereedschappen in Visual Studio. Kind van een meanderende antwoord daar, maar hopelijk heb ik je antwoord. Ja. Je. 

[Student] Wat zijn de opties voor data opslag voor Windows 8 apps? Wat zijn de opties voor data opslag voor Windows 8 apps, Windows Store apps? Uw opties zijn echt elke toepassing krijgt een eigen pool van lokale opslag voor instellingen en voor gegevens, maar het is ook belachelijk makkelijk om roaming-opslag te gebruiken, naar cloud-gebaseerde opslag gebruiken. Het is gratis. Wat er gebeurt is dat je eigenlijk kiezen voor een andere klasse en je zegt: "Roaming Instellingen opslaan, deze bijzondere set van inhoud," en hun Microsoft-account, wat ze in zo hebben ondertekend, gaat naar de sleutel voor roaming die informatie rond. Dus als ik je spel op mijn laptop en meld ik in met dezelfde account en ik het spel op een oppervlak of een tablet te spelen, dat automatisch zwerven die instelling en gegevens tussen die machines. Dat is een standaard ding. Dat is goed voor bepaalde hoeveelheden data. Je zou het niet een enorme database in die. Voor dat je moet gaan naar andere soorten oplossingen, zoals een hosted-database in de cloud, dat soort dingen. Er zijn enkele andere community mogelijkheden rond andere soorten data technologieën. Ik heb een aantal SQLite opties in de gemeenschap rond daar gezien ook. Zodat meer en meer zijn in opkomst, maar dat zijn de belangrijkste dingen die je zou kijken naar voor een spelletje of een app. En u een vraag in de rug gehad ook. 

[Student] In termen van het netwerk [onverstaanbaar] het uploaden of downloaden van bestanden [onverstaanbaar] [Bowen] Is uw vraag hoe kun je zien dat of hoe kun je dat debuggen en testen? [Student] Hoe kun je het debuggen [onverstaanbaar] Sorry. Ik kan niet alles horen. [Student] Hoe krijg je het bug getest en ook [onverstaanbaar] Geweldig. Geweldig. Hoe werk je met netwerken? Hoe kun je zien wat er aan de hand? Er zijn veel verschillende antwoorden op deze, maar laat ik je waarschijnlijk de makkelijkste dingen hier. Laat me te ontdoen van de simulator voor een tweede. Gewoon een paar opties voor foutopsporing voor netwerken. Er is een complete netwerk-stack gebakken recht in zowel de WinRT niveau en vanuit WinJS, dus je kunt heel gemakkelijk XHR maken, AJAX soort oproepen van je spel of app om dat te doen. Vooral, heb ik de neiging om 2 dingen te gebruiken. Ik gebruik de werkelijke dev instrumenten zelf, die een netwerk-stack gebakken in hen hebben. Laat ik je de Windows home page. Ik kan dit brengen, en er is eigenlijk een netwerk proxy gebakken in deze tools hier. Dus ik kan dit doen, ik kan de pagina te vernieuwen, en het gaat me al van de interacties te tonen, inclusief AJAX vraagt ​​om die sessie, voor de duur van die aanvraag. Dit is nuttig. Het zal zeer nuttig zijn voor browser-gebaseerde applicaties te zijn. Voor andere vormen van apps, waaronder Windows Store apps, Ik gebruik een tool genaamd Fiddler. Je gaat om een ​​spel te krijgen in reactie. [Grinnikt] Fiddler is een eenvoudige proxy. Ik denk dat ik kan aantonen dat aan jou. Het is gewoon GetFiddler.com, die interessant genoeg, ik traceren mijn netwerk stack gaat GetFiddler. Maar hoe dan ook, Fiddler is geschreven door een van de PM's op het IE-team, dus hij weet wat hij doet. Dit is een goede proxy die u kunt gebruiken voor het debuggen netwerkverkeer. Ik zou adviseren dat. Vraag daar ook. 

[Student] Is er een gemakkelijke manier om een ​​vreemde taal ingang te integreren, zoals Japanse of Chinese, in Windows apps? Ik kan niet zeggen dat ik te veel van het zelf gedaan, maar het is gebakken in Er zijn opties voor natuurlijk uitzenden uw aanvraag - Het spijt me, ik heb de vraag niet zeggen - opties rond globalisering, lokalisatie van de inhoud, ook dingen zoals de mogelijkheid om te verkopen in verschillende markten en richten die versie van uw aanvraag voor deze individuele talen of culturen of dat soort dingen. Absoluut ingebouwd We hebben ondersteuning voor die voor eeuwig had, en dat wordt overgenomen in uw opties voor Windows Store. U kunt dat doen in de winkel zelf, te verkopen in verschillende markten, kun je dat doen in de applicatie en ook met het gebruik van de middelen te definiëren, "Als ik ontwikkeld voor deze cultuur, gebruik dan deze bijsturingen voor mijn tekstuele inhoud "Of gebruik een van rechts naar links lezer." Dat zijn allemaal onderdeel van de standaard WinJS en WinRT API's. Goede vraag. 

Hoe doen we het? Elke anderen? En als iemand op video heeft vragen, ben ik cbowen @ microsoft, dus ik ben blij om al uw vragen te nemen van de toekomst. Zeer - Vanaf de toekomst, toekomst [bootst echo]. Dus hier ben ik. Laat me terug te zetten hier mijn contactgegevens. Dus stuur me een briefje, cbowen @ microsoft, en ik zal u zo snel als ik kan. 

Iets anders dat je je afvraagt? Zijn we goed? Geweldig. Oke. Dank u allen zeer. Ik waardeer het. [Applaus] 

[CS50.TV]