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

Hei, alle sammen. Mitt navn er Edwin Guarin. Dette er Chris Bowen. Jeg lar ham presentere seg i et sekund. Jeg ønsker bare å foreta en rask kunngjøring. Først av alt, alt du CS50 elevene få Windows 8 for gratis. Så hvis du har planer om å faktisk bruke den for det endelige prosjektet, er den din. Nate vil sende ut en e-post senere på for å få instruksjoner. Den andre tingen er hvis du bestemmer deg for å skrive en Windows 8 app for CS50 endelige prosjektet, vi kommer til å gjøre noen giveaways: en Xbox, vi kan være i stand til å gi en skifer bort, sånne ting. Så hvis det er noe som holder deg tilbake, la Chris eller jeg vet hvordan vi kan hjelpe deg med å bygge noe virkelig kult. Så takk igjen for at du kom i dag, og jeg vil overlate den til Chris. 

Takk, Edwin. Takk, alle sammen, for å bli med oss ​​i dag. Jeg er Chris Bowen. Jeg er en av Edwins kolleger her i nordøst. Jeg ønsket bare å tilbringe litt tid med det du snakker om hvordan å lage en Windows Store-program med HTML5, Javascript og CSS og får slags eventuelle spørsmål du måtte ha om det svarte for deg som du ser mot tenker kanskje å bruke det for en CS50 finalen mulighet. 

Når det er sagt, vil vi bare stupe rett i. Jeg skal gå over til lysbilder over her. Hvis du har noen spørsmål, kan du gjerne sende meg en e-post. Jeg er cbowen@microsoft.com, og det er min blogg og min Twitter. Men du ønsker å komme i kontakt med meg, er det helt greit. Jeg har omtrent en time av ting, og jeg ønsker å få dine spørsmål i underveis, så ikke vær sjenert om å ha spørsmål under dette. De kan ikke se hvem som stiller spørsmålene på opptaket, så vil du være så anonym som du ønsker å være. 

La meg hoppe rett i, bare gi deg en rask innføring i Windows 8, og vise deg noen av de tingene om Windows Store apps som du kan vurdere som du har planer om å utvikle en applikasjon. Vi ser på Windows 8. Vi har vært ute i et par uker nå. Mange sterke adopsjon der ute allerede. Du har kanskje sett allerede overflaten maskiner som vi har i tillegg. Det er en over her faktisk du kan ta en titt på hvis du er her i person. Jeg har veldig lyst til å snakke med deg, vise deg rundt litt om Windows 8. Ideen med Windows 8, det virkelig bringer frem alle de tingene du vet om Windows inn noen nye erfaringer - særlig ting som på overflaten maskin med touch, disse slags flere mobile enheter som nå er på markedet, men det er også Windows i kjernen. Så det betyr at du kan installere det virkelig på noe som kjører Windows 7, fra din største trippel SLI gaming rigg ned til din bærbare og til skinnende nye andre enheter som du kan plukke opp i dag. De vil kjøre Windows 8. Jeg skal vise deg rundt bare en liten bit, og alle de opplevelsene som du får se her er ting som du kan opprette. Ideen er om det er touch, mus, tastatur, hva enheten er at du kjører programmet på, det kommer til å kjøre stor. Windows 8 vil hjelpe deg med alle disse scenariene. 

Disse lysbildene til side, la oss bare komme rett inn å ta en titt rundt her. La meg vise deg rundt mitt hjem-skjermen. Dette er min startskjermen. Jeg vil bare gi deg en liten bit av en tur her. Jeg er på en ikke-touch maskin, så så mye som jeg ønsker å røre min laptop-skjermen, det vil ikke gjøre en ting, så jeg vil bare rulle rundt her litt og vise deg. Noen ting du kanskje legge merke til er det faktum at disse såkalte levende brikker faktisk kan animere, og de kan gi informasjon til deg - kanskje oppdateringer på statistikk for et spill eller vise deg nyheter fra noen av de tidligere apps som er her på venstre side. Det vi går. Jeg er sikker på at det er bare positivt og utrolig gode nyheter. Du kan se her er det virkelig kalle din oppmerksomhet tilbake til app, sa "Hei, det er noe nytt her. Ta en titt. Kom tilbake og se hva som er nytt for deg." Det kalles levende fliser, og du kan gjøre varslinger enten rett fra selve programmet eller hvis du tar en titt i mer detalj, vil du finne ut hvordan du skal skrive en ekstern tjeneste som faktisk kan overføre informasjon til flis, som er hva som skjer med disse nyhetene apps. De er faktisk å få nyheter fra skyen og oppdatering av flis rett der slik at folk vet at det er en grunn til å åpne opp programmet og ta en titt på hva de siste nyhetene er i noen av disse eller om det er nye oppskrifter eller en ny rekord å slå eller en venn spille eller hva på disse programmene. Det er noe å friste deg tilbake igjen Så det er de levende brikker, og det kan være en person, kan det være en nettside også. Vanligvis er det et program. 

Stort sett alle disse tingene som jeg har her kom fra Windows Store. Jeg skal starte det. Det er et av de programmene som du får som standard på hvilken som helst maskin som kjører Windows 8. Du kan komme hit for å finne noe du ønsker, fra ting som er uthevet til spill som jeg ikke har sett før. Åh, wow, vi har fått en ny pinball her. Du kan installere disse her fra butikken, og vi skal snakke om hvordan å utvikle disse. Du har en rekke valg i hvordan du oppretter dem. Vi vil fokusere på Java historien med HTML og CSS, men til brukeren, til kjøperen av app, det spiller ingen rolle hva det ble skrevet i. De kan gå videre og jobbe med det. Jeg er fascinert av dette, så jeg trenger å åpne dette opp og ta en titt. Hver app, inkludert de som du kan sende og selge eller gi bort gratis, hva du ønsker å gjøre i butikken, vil få en hjemmeside som dette. Du kan sende med søknaden en haug med skjermbilder - du se noen her - detaljer om programmet, og over tid vil du akkumulere begge rangeringer - de er i utgangspunktet bare stjerneklassifisering - og vurderinger, som gir litt mer innsikt. Egentlig har noen til å skrive noe og fortelle deg hvor fantastisk du er, og som vil gå inn i dine vurderinger delen over her, som jeg ikke har sett på. Fantastisk. "Vil ikke engang åpne." Hvor stor. Vel, for folk for hvem dette gjorde åpen og kjøre, synes de å virkelig nyte det. [Ler] Ha dette i bakhodet. Internett. Alle kan si hva de vil om søknaden din. Så sørg for at du gjør en god jobb med det, sørg for at du gjør det så behagelig for brukeren som du kan fordi de er et par klikk unna fra å gi en evaluering, og som vil samle opp til generelle rangering. Og du ønsker å gjøre ditt beste, fordi du kommer til å være opp mot andre applikasjoner. Det vil være tusenvis av apps som allerede er i butikken, og sjansene er, det kan være noe som gjør lignende funksjonalitet til hva du gjør. Så hvis du virkelig kan skille seg ut fra mengden, som kommer til å være til din fordel, selvfølgelig. 

Vi får inn i butikken litt senere. Jeg virkelig ønsker å fokusere på å lage apps. Men den korte versjonen av butikken er verdensomspennende distribusjon, det er automatisk en del av Windows 8, folk bare fyre den opp og ta en titt på ulike apps her, du har Dress-Up Sticker Book og alle slags ulike apps. Fresh Paint, jeg bruker dette mye - dårlig, men jeg bruker det mye. Det viser meg at jeg allerede eier det. La meg vise deg noe jeg ikke har - UVideos jeg ikke har så splitter nye. Du ser her det er gratis, slik at du kan installere det rett fra butikken. Du har valg også. Du kan selvfølgelig gi den bort. Du kan legge reklame i app eller spill. Du kan også ta betalt for det, og du kan veldig lett gi en rettssak for programmet samt slik at du kan la folk prøve det for en uke eller hva du ønsker å gjøre. Det er bare passelig gjennom portalen. Du trenger ikke skrive noen kode for det. Så du sier, "Du kan bruke dette for en uke, og da har du til å kjøpe den," eller du kan gjøre ting som "Du kan spille de første tre nivåene av dette spillet "Og så har du å kjøpe for å få tilgang til resten." Du kan selv gjøre in-app kjøp også, så du kan si, "Vi har fått flere opplevelser eller sett av grafikk eller ting som er låst opp - "Flere oppskrifter som er låst opp -. Hvis du kjøper disse utvidede sett" Og du kan gjøre det hele i app eller spillet selv. Så, helt opp til deg, ditt valg. Det er mange ting du kan gjøre i butikken, og deretter i utgangspunktet du sende det til en sertifisering kanal. Vi kan snakke om at et litt senere, men dette er målet. Du ønsker å få din app verdensomspennende synlighet i butikken her. 

Tilbake på startskjermen her, vil jeg gjerne vise deg rundt litt mer. Hvis jeg starter disse programmene, la meg gi deg et eksempel på noen kryss-app funksjonalitet her. For å gjøre det, vil jeg lansere Fresh Paint. En ting du vil se her er hver eneste bit av skjermen, alle piksler på skjermen, gå til programmet ditt. Borte er de dagene der du har disse grensene rundt vinduer med mange knapper som er alltid der tar opp plass hele tiden. Nå er du virkelig ønsker å komme bort fra det og bare ha innholdet være fokus. Vi kan gjøre ting med Windows ved å gå andre typer menyer. En av dem er faktisk det som kalles sjarm bar, og det kommer ut fra den side av skjermen. Du kan faktisk bla fra side hvis du har en berøringsskjerm, du kan høyreklikke hvis du har en mus, det er en hurtigtast for det, det er alltid mer enn én måte å gjøre noe i miljøet her. Det bringer ut en rekke ting du kan gjøre. Den mest åpenbare er at du kan gå tilbake til startskjermen, men de andre fire er det som kalles sjarm. De er kontrakter som du kan plugge inn som en app-utvikler. De er ganske kult. Søk, er jeg sikker på at det er noe du kommer til å gjøre, deling Jeg skal vise deg i et sekund, og enheter og innstillinger, disse er alle ting som programmet ditt kan plugge inn å utnytte Windows, for å si: "Jeg har gjort min del "Og jeg vil at Windows skal støtte noen annen funksjonalitet, "Og jeg ønsker ikke å skrive mye kode for å gjøre det skje." Det er egentlig en fordel å bruke disse funksjonene. La meg vise deg en. For å gjøre det, vil jeg gjøre et nytt maleri. Jeg har også snakket om å bruke hver piksel for programmet ditt. Som standard er dette hva malingen app ser ut når du bruker det. Det er egentlig bare om hva du tegner, innholdet. Jeg kunne gjøre forferdelige ting her. Hva skal jeg tegne? Jeg vet ikke. Skriblerier? Oh, great. Jeg kan gjøre skriblerier. Fantastisk. En kalkun? [Ler] Dette er den mest abstrakte kalkun du vil se. Jeg kan også ta opp det som kalles app bar, og dette er virkelig en av de viktigste måtene du kan bruke å gjemme bort alle ting som kan ha vært på din app eller spill før bare tar opp plass hele tiden. Så nå kan du sette den opp her, og dette er virkelig en av de mer vakre opplevelser med app bar som jeg har sett. Sett valgene her for å velge forskjellige farger. Vi ønsket en kalkun, så vil vi sette noen brune her, begynner å blande i et par farger. Vi vil ta en mellomtid farge her og deretter komme tilbake hit. Du kan begynne å tegne. Det er kalkun. Fantastisk. Jeg kan ikke tegne til å begynne med, men å gjøre det med en touchpad foran et publikum er enda bedre. Dette er kjempebra. Ideen, skjønt, er alt jeg bryr meg om er riktig her på overflaten. La oss si jeg er så fornøyd med dette at jeg har fått til å dele det med noen. Normalt hva du vil gjøre med andre versjoner av Windows, du vil kanskje ta et skjermbilde, vil du gjøre noen copy-paste av din tekst eller ting som det som du ønsker å dele ut, og deretter gå og åpne opp et annet program og sette det inn i den. Her trenger du ikke å gjøre det. Du kan faktisk få ut det charms bar og si, "Jeg ønsker å dele dette." På dette punktet kommer det til å vise deg alle apps som vet hvordan man skal arbeide med hva som blir delt. I dette tilfellet er det et bilde, så det kommer til å si: "Jeg ser du har fått et bilde." "Ønsker du å dele det?" Du kan se jeg sende meg ting hele tiden. Det erkjenner at, og det tilbyr meg at som en snarvei, men det er også viser meg hver app som vet hvordan man skal forholde seg til å ta et bilde og gjør noe med det. Disse har alle indikert til Windows at de kan gjøre det. På dette punktet er dette Windows. Brukeren velger akkurat hva de vil gjøre med det. Jeg skal gjøre mitt vanlige av PuzzleTouch. Du kan se jeg har laget alle typer oppgaver over tid. Jeg tar PuzzleTouch og si, "Jeg ønsker å dele denne fantastiske skapelsen med PuzzleTouch." Det kommer til å gå videre og si, "Great. Du ønsker å dele denne? Fantastisk." "Ønsker du å lage et puslespill som er lett, middels, hva?" Jeg skal lage en mellom en her. Det gjør puslespillet. Det kommer til å bli en forferdelig oppgave fordi det er for det meste tomt. Men det er klart, og det er faktisk tilbake i det andre programmet. Hvis jeg kommer ut her, kan jeg søke etter den og starte den. Nå hvis vi blar over bare en liten bit her, bør vi se min skapelse sted. Hvor gikk jeg? Hva slags puslespill har jeg gjøre? Hadde jeg gjøre det enkelt? Åh, det er det, rett der. [Humrer] Det er den lett gjenkjennelig kalkun puslespill som er her. Men det jeg ønsker å påpeke til deg, den kule ting her Er apps ikke visste noe om hverandre. De bare sa: "Jeg har fått et bilde du vil dele, og jeg vet hvordan de skal forholde seg til bilder." Og du som utvikler, trenger du ikke å skrive denne koden. Når noen spør meg om å dele, kommer jeg til å sette noen data inn i denne lille datastruktur og jeg er ferdig. Det andre programmet tar over, gjør sin ting, og det er slutten av erfaringsutveksling. Det er bare én ting som du kan gjøre - veldig, veldig kraftig - og det kommer til å være en av de tingene som kan virkelig bidra til å differensiere din app og også spillet også i butikken. Folk kommer til å være i stand til å si: "Dette er virkelig nyttig." "Jeg bruker dette pusle skaperen hele tiden. Det er fantastisk." 

Det er omtrent nok for en kort oversikt over hva som skjer her. Det er et par andre funksjoner også at vi kanskje vil fremheve som vi går gjennom koden. Men jeg ønsker å dykke inn lysbilder, og for å gjøre det, kommer jeg til å gå til skrivebordet, som selv er en annen levende ruten her. Jeg kan gå inn i dette, og sikker nok, jeg er på mine lysbilder, men la meg vise deg faktisk der vi er. Vi er faktisk i Desktop-modus. Dette er virkelig der det jeg sa tidligere om Windows fremføring til nye opplevelser viser seg. Dette er Windows du vet. Windows-programmer kalles desktop apps. De kjører her. Hvis du har eksisterende apps og du ønsker å kjøre dem på Windows 8, du kan absolutt gjøre det. Dette er ikke de samme tingene som de store apps, som er over her, som Fresh Paint og disse NBC News apps og sånt. De kommer fra butikken. De kan plugge inn i noen av de funksjonene som jeg ble vist deg og andre som jeg ikke har vist dere ennå. Men bare ha det i bakhodet. Vi har støtte for begge disse tingene også. Jeg beklager. Er det noe som ikke vises på skjermen? Jeg har mistet det helt. Det er rart. Ok. Takk for å peke det ut. Det du ikke har vært å se på en stund er min viser du at skrivebordet er her. Hva er det siste du så? Visste du dette? Dette er skrivebordet. Du vet allerede hvordan det ser ut. Det er ikke noe veldig uvanlig. Det er vår bærer den erfaringen videre for deg og lar deg bruke de tingene som du har hatt. For eksempel vil jeg skal vise deg Visual Studio. Det er en desktop applikasjon. Det kommer til å kjøre i denne modusen. Det kommer til å støtte et mer komplekst miljø med en rekke alternativer og sånt, så det gjør det et godt alternativ som en desktop app. 

Når det er sagt, la oss gå til slides for bare en liten bit og gi deg noen innledende innhold og deretter komme inn faktisk koding her. Den gode nyheten er at jeg har hørt at du har vært fokus på en rekke CSS og Javascript, HTML. Alle de tingene som du har vært å lære carry direkte inn å gjøre Windows Store apps. De tingene som du har hørt om med å bruke CSS velgere og alle de tingene er akkurat hva du gjør for å lage et program her for butikken. Vi vil gå gjennom disse tingene litt etter litt. I utgangspunktet, jeg bygger på ting som du allerede har tatt deg tid til å lære. Dette er den generelle diagram av de teknologiene som du kan bruke å lage applikasjoner for Windows 8. Ting på den rette, de stasjonære apps, er egentlig det vi allerede vet. Det er ting som er virkelig Windows 7 verden fremføring i Windows 8. Alle disse alternativene fremføring: C #, VB, Win32 slags utvikling. Flott. Ikke noe problem. Den nye ting er på venstre side. Det er Windows Store apps, det er da jeg ønsker å få min søknad kablet til Windows 8 ved hjelp av alle disse funksjonene, få det inn i butikken, og få som virkelig kul opplevelse av Windows Store programmer. For å gjøre det, kan du se her du har alle dine valg med XAML, C + +, C #, VB, kan du gjøre DirectX, sånne ting, ting som går utover lysbildet. Men for oss, kommer vi til å fokusere rett inn på det faktum at HTML, CSS og Javascript er egentlig en første-klasse statsborger for å lage applikasjoner for Windows 8 og for Windows Store. Så dette er bra for alle her, og folk ser på video fordi du kan bare utnytte alle de opplevelsene som du har og virkelig knytte til hva Windows tilbyr. Du kommer til å gjøre det gjennom et sett med APIer, som bør ikke være noen overraskelse. Hvert OS har sine egne APIer. Vi utsetter hva Windows kan gjøre gjennom det som kalles WinRT. Det er et sett med APIer som bare gjør alt for deg. Hvis du trenger å åpne filer, må du bruke kameraet, geolocation, ting som det, de går gjennom hva Windows kan tilby deg. For å få tilgang til det, har vi litt mer Java som kommer til å gjøre det enda enklere for deg å gjøre det. Vi får til det i et øyeblikk. Men for nå, er at utgangspunktet ditt veikart. De tingene som du allerede har gjort på toppen av noen APIer som hjelper deg å arbeide med Windows tilsvarer butikkapplikasjon. Og det er virkelig om alt du trenger å vite fra det høye nivået. 

Vi skal dykke inn faktisk jobber med ting nå. De tingene du har sikkert allerede sett en haug med, med IE9 en liten stund tilbake vi innført støtte for mye av, på den tiden, nyere standarder i nettet, så mange nye CSS funksjoner, mye ny HTML, ECMAScript 5, som er virkelig Javascript. Så alt for at med unntak for streng modus var i IE9. Bare massevis av ting med CSS, CSS3, alt der inne. Og alt dette bærer frem til hva vi gjør med Windows 8. Du kan bruke disse tingene, og du kan bruke alt som er nytt i IE10. Med IE10 introduserer vi støtte for alle disse tingene også. De er alle hardware-akselerert, så hvis du er på en maskin som har en slags GPU, som sannsynligvis er ganske mye hver maskin som du kan få i de siste åtte årene, du kommer til å være i stand til å ha maskinvare-akselerert produksjon, visuelt resultat med CSS, Canvas, SVG. Alle disse tingene vil gå gjennom maskinvareakselerasjon og være så mye raskere og mer effektiv. Den korte versjonen av alt dette - jeg kommer ikke til å gå gjennom hver eneste ting her - hvis du ser det på denne listen, hvis du kan gjøre det i IE10, hvis det er en web-app som du kjører som fungerer i IE10, det er noe du kan gjøre som en Windows Store-app. Og det er ganske mye det. Så hvis det fungerer i IE10, det kommer til å fungere som en Windows Store-app. Det er på bordet som noe du kunne bruke. 

Det er mye her. Vi har frem til midnatt, så jeg kan ikke se gjennom alt her. Men det er noen nettsteder som vil hjelpe deg å forstå hva disse tingene kan gjøre, og jeg skal vise deg en av dem i et sekund. Jeg ville bare påpeke noen av de viktigste tingene som du kan se på. Kanskje du allerede har sett noen av disse i dine studier, men disse er veldig nyttig, spesielt med Windows Store apps, fra CSS side. Så å være i stand til å gjøre forvandler og overganger, gi bevegelse med animasjon - disse er alle en del av CSS nå, og de er alle støttet av moderne nettlesere, og IE10 og IE9 har lagt til støtte over tid for alle disse tingene. Og så hvorfor skrive det selv, hvorfor gå gjennom alle problemer med å gjøre disse tingene for hånd når du kan bruke en enkel CSS forvandle å skape en 3D-effekt for søknaden din? Flott. Det er slik det fungerer. Jeg kan ikke gjøre det noe vanskeligere enn det. Hvis du vet hvordan du gjør det i CSS, vet du hvordan du gjør det i Windows Store-app. 

Går utover at for layout, ting som selv de store app, men utover det, ser på kanskje en nyhets app som er som viser deg artikler eller oppskrifter eller ting som det, disse andre typer funksjoner i CSS er veldig nyttig: Grid, Flexbox, er CSS Regioner mer av en ganske ny standard også. Disse tingene er alle kommer til å hjelpe deg med å legge ut innhold og strømme innhold mellom seksjonene, være i stand til å gjøre sidetall og orddeling uten at du trenger å skrive ting selv. Du bare sier, "Vennligst gjør følgende for meg," og som skjermen eiendomsmegling er forskjellig på forskjellige maskiner eller som du vil se i et øyeblikk, som du snapper en søknad å ha mindre mengder plass på skjermen, det er ikke noe problem for CSS. Det kan dra nytte av - Vi finner oss ikke snakke om mediespørringer i en andre - det kan ta vare på ting med reposisjonering innholdet, flyter innhold fra regionene bare med disse tingene som du kanskje allerede har sett med web-teknologi. 

På HTML5 side, er det også en haug med ting som vil være svært nyttig for deg med Windows Store apps. Igjen, vil vi ikke gå gjennom alle disse, men de er bare her. Så hvis du trenger å bruke den, audio-video, hvis du ønsker å gjøre validering fra skjemaer, geolocation, alle de tingene du kan gjøre i Java med Java 5 eller ECMAScript 5, IndexedDB for lokal lagring - disse er alle alternativer for deg. Hvis du leter etter et svar, bare se til eksisterende teknologier med HTML5 og CSS og du vil finne enklere svar enn å måtte rulle mye av de greiene selv. La meg vise deg litt rundt her. Jeg har fått et nettsted som vi kan gå til. La meg avslutte ut av dette lysbildet for et sekund. 

Hvis vi går ut til IETestDrive.com, Jeg vil ikke gjøre mye av en demo her. IETestDrive.com er virkelig viser deg mye om hva som er nytt med IE10, de tingene som du kan gjøre. Jeg synes dette er veldig nyttig fordi stedet for å lese gjennom en haug med stortingsmeldinger, se på noen demoer, og det kommer til å hjelpe deg med å sette den på din egen personlige radar om hvorvidt en teknologi er fornuftig å selv gjøre noe mer forskning med så du vil forstå, "Jeg ser hva dette er for." "Jeg forstår hva Request Animasjon Frame gjør for meg." "Jeg forstår hvordan jeg kunne bruke Regioner eller SVG-filtre." Du ser dem i aksjon, se dem på et eksempel her, og bestemme selv om det kommer til å være nyttig for deg i dine egne prosjekter og utover som du fortsetter å jobbe med web-teknologi. Her vil jeg bare oppfordre deg til å ta en titt. Jeg tror ikke jeg kommer til å tilbringe mye tid faktisk kjører disse. Vi har fått nok til å vise med å skrive kode. Du vil se her ting fra touch-effekter til touch-baserte spill i denne delen, animasjon, veldig rask maskinvare-akselerert animasjon der, noen optimaliseringer som du vil se i noen av disse prøvene i tillegg, og det er mange, mange flere. Hvis du går over her og åpne opp kartet, det er bare et latterlig antall prøver her. Du kan se dem alle her. Hvis du ser på noe eller du har hørt om noe og du lurer kanskje dette ville være noe kult å bruke i programmet, prøv å se her, og det er sannsynligvis en ganske god demo for det å spare tid. 

Ok? Eventuelle spørsmål så langt for folk her? Ok. Vi vil fortsette her. Igjen, bare sjekk det ut. De er web-standarder, så gå til noen andre showcase nettsteder som du vet om og se om disse teknologiene gir mening for hva du prøver å gjøre. 

Tilbake til lysbilder. Når det er sagt, er du flytter fra en Web-verden for å virkelig en installert lokal applikasjon verden, så er det noen ting å påpeke her. Først av alt, det er ingen webserver involvert her. Det er ingen Apache, det er ingen IIS kjører her tjene opp sider til en ekstern klient, til en ekstern nettleser agent. I dette tilfellet, er egentlig alt pakket opp for deg. Du sender det som din søknad til butikken, det blir sertifisert, det er ut i butikken, og deretter folk i tusentall vil installere spillet eller programmet ditt. Men i utgangspunktet, de drar det ned lokalt til maskinen sin. Det er ingen grunn til å gå ut på weben lenger med mindre du har samtaler som trenger en ekstern API, og det er helt normalt i tillegg også. Men de ikke kommer til å være i denne modusen hvor de må gå forespørsel respons fra en server å få den neste siden av deres innhold. Så som sagt, det er noen mindre API forskjeller. Disse er utrolig små. De er lite sannsynlig å treffe deg i din normal koding, men de er i det minste dokumentert. De er slags kant tilfeller der. 

Den andre tingen verdt å påpeke er klarerings forskjeller. Jeg bare nevner dette fordi jeg vil bare sørge for at jeg sa det så hvis du kjører inn i det senere, vil du tenke, "Chris sa noe om dette, "Så kanskje, ja, ok," og deretter gå tilbake og finne ut hva det var. Sammenhenger saken. Som standard prøver vi å beskytte brukeren mot vektorer av angrep. Det er visse ting du kan gjøre som standard og visse ting du må endre konteksten for å aktivere. Som du bruker noen biblioteker der ute - you've allerede jobbet med jQuery, men hvis du ser etter andre bibliotek der ute - du kanskje bruker noe av funksjonaliteten den slags går utover lokal bruk, betyr mer dynamiske interaksjoner XHR forespørsler, sånne ting. Noen ganger kan du finne de som vil bli deaktivert som standard, og i så fall, bare gjør et søk, se etter lokale og web sammenheng, og du vil finne ut hvordan du kan fikse det. Bare sørg for at du visste om at når du begynner å bruke andre rammer, som jeg bør nevne, er du helt i stand til å gjøre. Så hvis du finner noen andre rammeverk - Vi finner oss ikke snakke om dette i et sekund - for spill og du ønsker å bruke den, vil du bruke noen kontroll bibliotekene som er der ute og du ikke ønsker å skrive at ting selv - det er en god idé, ikke sant? - du kan absolutt bruke denne ting. Det er ingenting som holder deg tilbake fra å bruke noen form for bibliotek som er basert på Javascript, CSS, HTML5. Igjen, hvis det er noe du kan gjøre i IE10, som er en pokker for mye i disse dager, du kan gjøre det. Trekk det inn i programmet ditt, referanse at Javascript-bibliotek, og bruke det i søknaden din, bare husk at du kan treffe en sikkerhetskontekst en gang i blant - ikke veldig ofte. 

Og da de funksjonene, vil vi gå over noen flere av de som vi går. UX du typen blir vant til som du ser flere og flere programmer fra Windows Store. Du får en følelse for hvordan de fungerer og hvordan den estetiske utformingen har en tendens til å jobbe på tvers av ulike programmer og hva folk vil bli brukt til å oppleve. Det er egentlig den viktigste delen. Pass på at når de fyrer opp din app de ikke trenger å lese en manual, som de ikke gjør det, for øvrig. De skal bare være i stand til å begynne å spille med søknaden og finne det ut uten store problemer. Ved å stikke og forholde seg til en rekke av disse øvelsene, du kommer til å gjøre brukerne en stor tjeneste, noe som gjør at enklere. 

Ok. En siste ting på API side og så får vi komme inn faktisk skrive kode. WinJS er den tingen jeg nevnte veldig kort med det komplekse lysbilde med alle de forskjellige valgene du har for å lage applikasjoner. WinJS, kan du tenke på det som en kompis. Det er din venn til å hjelpe deg å skrive ting raskere. Det er bare Javascript og CSS. Du trenger ikke å bruke den. Du kan bruke den. Hvis du kommer til å være å kalle inn til Windows-funksjoner, vil du ende opp med å bruke det, men hvis det er ting som enkelte design patterns eller kontroller som du egentlig ikke ønsker å bruke, du ønsker å bruke noe annet, er det opp til deg. Bestem deg for hva du vil bruke, og stiler som du vil bruke. Funksjonene fra namespacing og klasse generasjon - opp til deg. Hvis du foretrekker det ene eller det andre, det er helt og holdent ditt valg. Det er fortsatt Javascript og CSS. Men det kommer til å hjelpe deg å gjøre en masse ting. For eksempel, her er en undergruppe av hva den kan gjøre, ting som hjelper asynkron programmering med løfter. Noen av dere hørt om eller jobbet med Node.js? Det er et felles mønster å jobbe med asynkron programmering. Så i utgangspunktet det du sier er: "Gå og gjør noe, "Og du kommer til å gi meg et løfte om at du kommer tilbake til meg når du er ferdig." Det er i hovedsak hva som skjer. Så du trenger ikke fryse opp søknaden din mens brukeren går og plukke en fil eller noe blir streamet ned fra nettet. Grensesnittet er fortsatt responsive. Og du kan gjøre det ved hjelp av asynkron programmering. Det høres latterlig komplisert, men det er veldig lett fordi du bruker løfter og du bare si: "Gå og gjør dette, og når du er ferdig, kan du ringe tilbake til denne metoden." Det er ganske mye det. Det er alt bygget inn i WinJS. Det kommer til å gjøre det mye enklere å skrive virkelig fleksible og kraftige programmer. 

Du kan se resten her, mye animasjoner. Sannsynligvis en av de mer viktige ting på dette lysbildet er kontroller. Jeg tror jeg har en hel - Ja, det gjør jeg. Her er et eksempel på nettopp noen av de kontroller som du kan bruke i dine applikasjoner. Dette er alt rett opp fra WinJS. Du skriver ikke disse selv, du bare si: "Her er hvordan jeg vil skrive min søknad." "Jeg skal bruke en flip visning slik at jeg kan gå mellom forskjellige bilder." Jeg har ikke vist deg Semantisk Zoom. Jeg skal vise deg at i et sekund. ListViews. Det er GridViews. Du har allerede sett et rutenett som en del av butikken søknaden, så å kunne bruke blokker av innhold og ruller over det. Flyout menyer du ser fra tid til annen. Programmet bar jeg viste deg med at Fresh Paint-programmet i tillegg, så du så hvordan du kan tilpasse det ved å legge knappene på det og å ha det gjemme bort når du ikke bryr deg å bruke det. Det er egentlig helt opp til deg å bruke. Disse er alle kontroller som er en del av WinJS. Jeg skal vise deg hvordan du kan lage disse i bare et sekund, men det er mer enn bare dette, og det viktigste er å bruke dem hvis du ønsker, spare litt tid. 

Hvis du har andre kontrollbiblioteker som du ønsker å bruke, er det helt greit også. Ting som jQuery UI gjør mye av denne type idé også, gi flere kontroller som strekker hva du kan gjøre i HTML og Javascript. La oss dykke i. Jeg har allerede sagt det. Bruk det du ønsker. Bare husk at du kan kjøre inn i noen sammenheng problemer. Men du kan sikkert mikse og matche hva slags bibliotek du er komfortabel med, ønsker du å lære, du ønsker å bruke, for å spare tid. 

La oss snakke om verktøy bare for et sekund. Du kan få det du trenger for å begynne å jobbe med Windows Store apps. Hvis jeg går ut igjen, jeg har for mange ting her oppe. Hvis du går til denne siden, som er dev.windows.com, du kan laste ned alt du trenger. Som studenter, har du tilgang til mer enn allmennheten gjør, slik at du kan få høyere end versjoner av Visual Studio. Edwin nevnt kan du allerede få Windows også. Men generelt, for alle utviklere, kan du gå til denne siden og laste ned alt du trenger for å lage et program, og det er helt gratis. Så det er en gratis versjon av Visual Studio, er det noen verktøy som vil installere sammen av det - alt du trenger for å lage og teste din søknad. Det er bare når du kommer til å publisere din søknad opp til butikken at du kommer til å trenge en utvikler-konto. Også dette tror jeg er gratis. Er det gratis for studenter så vel? >> [Guarin] Hvem av dem? Utvikleren konto, den faktiske innlevering. >> [Guarin] Ja. Det er flere gode nyheter. Du vil gå se på dette. Det vil si for et individ som standard det er $ 49. Men ikke registrere deg for at som student. Vi skal få deg litt informasjon gjennom dine programmer som du kan få en konto for gratis, og som vil la deg deretter sende inn søknader helt frem til butikken, så mange du vil, og alle som godhet vil snart følge etter. Så det er dev.windows.com. Du kan laste ned verktøy som du kanskje trenger herfra. Og hvis du vil, kan du få en prøveversjon av Windows her, men igjen, vil du ikke trenger det. 

Det andre området - la meg påpeke dette ut for deg raskt - er design.windows.com. Det var dev.windows.com. Design.windows.com, kan du gjette hva det er for. Det er faktisk en ganske vennlig nettsted. Det er mye bra informasjon her. Du kan jobbe oss gjennom det. Det kommer til å gi deg noen råd om noen ting at kanskje du ikke har tenkt på før eller måtte forholde seg til før, som å designe for berøring, designe for ulike formfaktorer, designe for egenskapene til Windows 8, de tingene jeg nevnte tidligere lignende søking og deling, noen ting som jeg ikke har snakket om ennå. De er alle oppført her, og det er et ganske godt sett med nyttige fil sider som vil hjelpe deg å forstå hvordan å lage en bestemt type søknad, hvordan du gjør samhandling, hvordan man skal håndtere brukergrensesnittet og UX av søknaden din. Jeg vil anbefale at du tar en titt på dette, spesielt hvis du er på et tidspunkt håper å publisere en søknad til butikken. Du kommer til å ønske å vite hvordan å lage en god søknad fordi jeg nevnte tidligere hvis du ikke gjør det, det er de vurderinger igjen. Folk kommer til å være ulykkelig. De vil ikke være i stand til å finne ting som de forventer på de riktige stedene. Ingen ønsker at det skal skje med deg. 

Flytte her fremover, la meg lukke det ned. Nå som du vet hvor du skal få ting, vil jeg vise deg hvordan du faktisk begynne å bruke ting. Til å begynne, vil jeg faktisk vise deg her et eksempel på desktop apps på min startskjermen. Her kan du se Visual Studio, kan du se Blend og andre utviklerverktøy som jeg har. De har en litt annen side ved side. Det er fordi de er skrivebordsprogrammer, og i de tilfeller de er alle kommer til å lansere tilbake til skrivebordet mitt egentlig bare som apps som du er vant til. Så Windows-opplevelsen, er det det samme. De er ikke, for eksempel slik væpnet! eller disse tingene. La meg starte en raskt. Egentlig, her er en interessant én. Dette ble utviklet av studenter som arbeider i partnerskap på NERD. Full skjerm søknad, slike opplevelser her. Oh, fine kutt skjermer og alle slags morsomme ting. De utviklet dette. Vi kan like godt vise hele greia mens vi er i gang. Faktisk, jobbet jeg med dem litt, ga dem noen råd om ting fordi de gjorde Javascript for sin søknad. Vær så snill, jeg tar ikke æren for sitt arbeid, de gjorde alt arbeidet. Jeg bare ga dem et litt råd her og der, men de gjorde noen store ting ved å bruke en Java front end og binde i noen fysikkmotorer og ting å gjøre mye av dette arbeidet. Gå. La oss se om det fungerer. Wow, det fortsatt arbeidet. Greit, bra. Men du skjønner poenget. En fullskjerm app, en virkelig god opplevelse. Dette støtter ikke bare min mus og penn hvis jeg har ting som det, men også røre. Hvis jeg hadde en berøringsskjerm, kunne jeg bare trekke på det og jobbe videre med det. 

En ting jeg ikke viste, og grunnen til at jeg tar dette opp er jeg ønsket å ha en annen app for å vise deg hva du kan gjøre, du kan faktisk ta programmer i Windows, og drar dem til siden av skjermen. Dette kalles knipser et program. I dette tilfellet har jeg tatt Inkarus og jeg har lagt den til side her. Det er nå i Snap visning, og som tillater meg å gjøre noe annet mens det programmet er der. De fleste spill kommer du vil rett og slett ta en pause. Det er normalt en anstendig ting å gjøre med mindre spillet kan liksom skalere ned til at små for en resolusjon, som kanskje en slags brettspill eller ting som det på anledningen. Men generelt, til den enkleste ting å gjøre, og den mest hensiktsmessige ting gjør for spill er å ta en pause i programmet. For programmer som nyheter apps, hvis jeg starter denne og da jeg snapper den, du får se det faktisk endres vesentlig i hvordan det er å presentere dataene til deg. Her er det som viser deg i virkelig en mer vertikal pan som informasjon, men jeg kan likevel absolutt bruke programmet. Så det er fortsatt veldig nyttig. Det faktum at det er i mindre format ikke holde meg fra å bruke det programmet. Så tenk på det. Det er noe som du må ha dine apps gjør til en viss grad, men det er opp til deg å bestemme hvordan funksjonelle dine apps bør være i denne typen av en mindre miljø. La meg lukke at man ned og gå tilbake til der vi var her. 

Edwin, du har lagt et bilde av meg allerede? >> [Guarin] Yeah. >> [Bowen] Se på det. Ser du det? Edwin lagt et bilde. [Ler] 

La oss gå tilbake hit i Visual Studio. La meg starte dette for deg. Jeg kunne ha klikket på flisen på at Start-skjermen. Det brakte meg tilbake til Desktop-modus, og det er å lansere den desktop app for Visual Studio. Dette er Windows som du allerede vet. Jeg kan gå videre og lage et prosjekt her. Vi vil fokusere på nytt på Javascript, HTML. Jeg kommer til å gå ut og velge opp her i henhold til Javascript, Windows Store. Det er en rekke maler som du kan bruke. For produktivitet, vil jeg anbefale at du tar en titt på noen av disse andre som her som Grid og Split. De er virkelig nyttig hvis du gjør en søknad som kommer til å ha den slags design og navigasjon. Du vil se disse mye. Den jeg bare viste du var faktisk en forekomst av Grid-programmet. Så hvis du tror du kommer til å være å lage en nyhets app eller en RSS-leser eller noe sånt som omhandler flere oppføringer som du ønsker å vise detaljer, tenke på å bruke en av disse malene for å komme raskt i gang og tilpasse den derfra. Men bare så jeg kan vise deg alle bevegelige deler her Jeg kommer til å lage den tomme app, og så får vi gå litt dypere inn i detaljene. Jeg bare gjør det blank søknad her. Det kommer til å skape hele prosjektet for meg. Jeg vil åpne opp de tingene som jeg ønsker å vise deg som standard. La meg bare zoome inn litt for å vise deg hva som er opprettet for oss her. De tingene som du kommer til å se på første er alle oppkalt standard. Så du kommer til å se etter default.html, default.js, og default.css. Den andre tingen å påpeke er at vi allerede har en referanse til det jeg nevnte tidligere. Dette er WinJS. Ingen egentlig kaller det denne lange navn her. Det er WinJS, Windows Library for Javascript. Hvis du åpner den opp, kan du se det er alt her. Det er ulike CSS-filer, det er Script. Det er der for å hjelpe deg ut. Det er egentlig der for å gi kontroller og stiler og ting som du bare kan bruke automatisk. Men igjen, hvis det er ting du ønsker å bruke i stedet i form av styling og andre kontroller, det er helt opp til deg. Jeg vil vise deg hvordan du kan bruke et par av de tingene akkurat nå. 

Tilbake over på vår venstre side, la meg vise deg standard HTML-side. Du har allerede sett WinJS ting, og det er egentlig alt som skjer der med de midterste linjene av markup, bare bringe i CSS som standard og bringe inn et par Javascript-filer fra WinJS. Du trenger ikke å være herre over hva som skjer i disse filene. Det er ganske interessant å ta en titt på dem til slags vurdere hva som skjer i det fordi det er ganske interessante middels og avanserte teknikker som skjer der inne, men det fine er som utviklere, du kan bare dra nytte av dem, bare bruke dem og egentlig ikke trenger å bekymre deg for det. Du kan fortsatt kjøre bil uten å vite hvordan det fungerer, ikke sant? Så det er den type ting som skjer her. Det er kontroller og stiler og ting som du kan bare gå videre og bruke og kode som du kan bruke i en andre uten å vite hva som er der. Her er dine egne filer. Dette er dine steder som du kan endre din egen CSS og din egen Javascript for å få ting rullende. Du vil være å legge sikkert andre Javascript-filer og kanskje andre CSS-filer som prosjektet vokser, men dette er egentlig bare et utgangspunkt. Her er Hello, world tilsvarende HTML, så vi er tilbake i body-koden. På toppen, forresten, det er HTML5 DOCTYPE, så du vil kjenne at fra hva du har jobbet med. Det er full IntelliSense i her også, så hvis du gjør ting som å skrive inn en video tag og utvide det ut, har du sannsynligvis lært om det faktum at du trenger å gjøre fallback koding for video koder i HTML5 - eller kanskje du har - for å sikre at ulike nettlesere har støtte for video. Vi har ting som dette på tvers av HTML, på tvers av Javascript, på tvers av CSS. Som er innebygd, og jeg skal vise deg CSS i et sekund. Her kan du gå videre og begynne å endre kode, markeringen. Faktisk, før jeg endre noe, kommer jeg til å kjøre dette og vise deg hva du får. Du kommer til å få en splash-skjerm som du kan tilpasse og da får du Hei, verden opplever her. Det er fantastisk, ikke sant? Gå videre og skipet det, ikke sant? Innhold går her. Det er den grunnleggende ting. Det kan bare bli bedre derfra. Vi vil gå videre og legge inn noen ting. Jeg har en liten bit av markup jeg kommer til å kopiere inn her bare så du ikke trenger å se meg skrive. La meg gå få opp verktøykassen her, og jeg vil peke dette fordi jeg kommer til å gjøre dette et par ganger. Verktøykasse, hvis du ikke har sett Visual Studio, er der du kommer til å finne en haug med kontroller. Du kan også sette kodesnutter inn i det at du kan gjenbruke. Her skal jeg bare stikke innom noen andre HTML, ikke noe veldig avansert i det hele tatt her. Det er bare grunnleggende HTML si jeg har en inngang hvor jeg kan skrive, Jeg har en knapp hvor jeg kan sende den inn, og da har jeg en div som er essensielt en plassholder som jeg kan bruke til å sende ut "Hei, du skriver dette." Det er intro til HTML eksempel. Hvis jeg kjører dette, vi automatisk få HTML, men vi også automatisk få styling. Dette er en av de viktigste tingene fra WinJS. Det kommer til å gi deg som standard noen utseende som er veldig konsistent med resten av hva Windows 8 gjør. Her ser du ting som knappen. Knappen som standard i HTML ser ikke ut som det, men det gjør her fordi det blir som CSS rett fra at CSS-fil i WinJS. Hvis du ønsker å bruke noe annet, hvis du ønsker å endre det, helt greit, gå videre og gjøre hva du vil. Men det er standard. Det kommer til å bli mer kjent for brukerne. Og dette vil selvsagt ikke gjøre noe fordi jeg ikke egentlig wire opp noen form for kode til å reagere på den. Det var bare HTML. Så jeg kan bli kvitt det, og vi vil komme tilbake til vår søknad. 

La meg bytte over til våre default.js. Dette ser ganske komplisert, men det er bare å gjøre et par ting for deg. Det er standardtekst. Det kommer til å være den samme i alle dine prosjekter. Det eneste dette gjør er bare slags spørre: "Hvordan havnet jeg her?" og sa: "Er du lansere dette programmet for første gang?" "Er du gjenoppta app fra å ha det som blir suspendert?" Et par ting som det. Virkelig, vårt fokus på denne filen her er rett om her. På dette punktet, er dette en linje med kode ganske viktig. Det er faktisk kommer til å gå og se gjennom alle markup, og det kommer til å finne ting som du har bedt om å få omgjort til kontroller, dypere kontroller som en alderskontroll, som en rutenettvisning, som flyout og de andre tingene som jeg viste deg på dette lysbildet før. De er ikke innfødte HTML-kontroller. Du bare ikke si flyout som et element, og har det vet hva de skal gjøre. Hva vi faktisk gjør er det samme som skjer i andre typer kontroll rammer. jQuery UI gjør det samme slags generell tilnærming. Du bruker markeringer i HTML, og deretter noen Java kommer gjennom senere og sier, "Å, jeg vet hva det er. Det er å be for at dette skal bli omgjort til slike ting," som er andre mer uttrykks HTML for å gjøre som en vurderinger kontroll, som er det jeg vil vise deg akkurat nå. Dette kodelinje er et løfte som sier: "Når dette løftet er oppfylt, "Alt du har bedt om har deretter blitt opprettet." Og det er det. Det ser litt komplisert, men det er egentlig det samme i hvert prosjekt. Ned her er hvor du kan begynne å legge inn noe annet du vil ha skje, så vi vil komme tilbake til det i et sekund. 

Først av alt må jeg litt kode som kan svare på det faktum at noen har klikket på knappen. Jeg kommer til å gå videre og sette det i her nede. Igjen, jeg kommer ikke til å gjøre noe typing foran deg her. Veldig grunnleggende Java bare si når dette kalles vi kommer til å bli gitt noen detaljer om hvordan vi kom hit og da skal vi gjøre noen grunnleggende ting. Gå finne ting i min HTML-side som heter nameInput, ta tak i det, ta sin verdi, slap "Hallo" på forsiden av det, og hold deg at resulterende strengen inn at div tag som vi hadde før som egentlig ikke har noe før. Nå skal vi finne den koden og gjøre sin indre innhold lik som streng. Veldig enkel Javascript. Forhåpentligvis du erkjenner at det er egentlig ikke noe uvanlig skjer her. Det er bare rett opp HTML og JS her. Hvis jeg kjører dette nå, er det fortsatt ikke til å gjøre noe arbeid fordi jeg ikke har kablet det opp å motta hendelse. For å gjøre det, vil jeg gjøre det akkurat her, igjen tilbake til min verktøykasse, spratt den inn her. Jeg forventer at du har sett alt denne type ting før, så jeg vil ikke over-forklare det. Nå skal vi gå får helloButton. Vi kommer til å si, "-knappen, gratulerer." "Her er en hendelse som du nå er å svare på." "Når noen klikker på deg, kaller denne funksjonen, buttonClickHandler." Og det er den funksjonen vi nettopp lagt helt ned på bunnen der. Det var det. Så nå har vi fått en utrolig funksjonell applikasjon. Jeg tror du vil bli veldig imponert av dette. Chris. Vent til det. Wow. Ok. Det er utrolig. [Ler] Men det er mer. Ikke kjøp det ennå. Vent. 

La meg vise deg litt mer her og komme ut av fullskjerm. Vi kommer til å gå før vi kjører. La meg gå inn og faktisk vise deg litt med CSS. Akkurat som standard, hvis vi ser tilbake på den siden her, når vi dro i disse tingene fra WinJS og vi fikk ui-mørk, faktisk, kan du endre det til standard for bruk av lys-programmet. ui-mørket er bra for grafiske applikasjoner som bruker mange bilder, du viser mye av visuelt innhold. Hvis du viser mye av tekstlig innhold, er ui-lys generelt et godt valg. Du trenger ikke å velge det, men jeg har byttet til det og nå du ser det samme markup, samme alt, det er bare å bruke i utgangspunktet en omvendt ordning her der alt er å gjøre det svart tekst på hvit. Det er alt vel og bra. La meg komme ut her, og la oss faktisk gjøre litt mer med CSS. Jeg skal sette den tilbake på mørk fordi jeg tror det er nok lettere å se på skjermen når jeg begynner å gjøre disse tingene. Jeg kommer til å erstatte den kroppen en gang til. Jeg vil gå her. La meg nuke dette. La oss få inn kroppen med klasser. Jeg tror du har gjort grunnleggende velgere med CSS og sånt allerede, så har du sannsynligvis vet hva som skjer her. Bare tildele noen klasser til vår header, og vi skaper en ny div å pakke resten av at ting som vi nå kan bruke til å style alt sammen. Så det jeg kan gjøre nå er å gå over til vår standard CSS. Har du sett på mediespørringer ennå? Har du snakket om det i det hele tatt? Mediespørringer er en del av denne økende graden - eller det er en etablert trend nå faktisk på nettet - for responsive design eller adaptive, og tanken er at programmene dine kan virkelig justere seg riktig basert på hva enheten at de blir vist på kan gjøre. Så hvis du er på en mobil enhet, åpenbart at du ikke kommer til å ha så mye skjermen eiendomsmegling som du vil på en stor 30-tommers skjerm sitter med en stasjonær, en stor PC sånn. Slik at den gamle svar på det ville være å ha 5, 6 forskjellige versjoner av samme side og du vil åpne opp den versjonen som ble innstilt for at viss størrelse skjermen. Ikke bra. Det er veldig, veldig repeterende og det er massevis av vedlikehold for å gjøre det. Nå har vi noe som kalles CSS mediehenvendelser, og vi kan bruke dette til å automatisk oppdage når det er visse størrelser eller en viss bruk av innholdet som blir utført. Så du kan svare på det, og du kan si: "Ok, i dette tilfellet "Du sannsynligvis ikke engang trenger meg til å fortelle dere hva som skjer her." Dette er bare å si om dette programmet er snappet, som jeg viste deg før - ta tak i det og sette den til side av skjermen - så la oss gjøre følgende styling. Styling er ikke bare om farger og sånt. Det handler også om dimensjonering og marginer og polstringer og orienteringer av innhold eller deaktivere eller aktivere hele deler av siden og, i dette tilfellet, din app eller spillet ditt også. Så her kan du gjøre så enkelt som du vil. Dette ville ikke være nyttig i dine apps, men det er demo tid, så jeg kommer til å gå videre og bare legge på grunnleggende kroppen velger og si, "Når jeg klikket, la oss gå videre og gjøre background-color og la oss velge noe." Du har IntelliSense her. Dette er faktisk veldig kult. I 2012 har vi lagt til en masse ting for CSS-støtte og Javascript og HTML. Du har selvfølgelig fått drop-down IntelliSense også, men det er ikke den kule ting. Det kule er at du har fått visuelle velgere for mange ting i tillegg. Så du kan gå gjennom og bare velge en farge, eller du kan gå ut og være enda mer spesifikk, og du kan velge - dette kommer til å bli forferdelig. Jeg vil faktisk plukke en anstendig farge her. Se markering også, forresten. Det er din RGB standard format der. Men hvis jeg bytter opacity, det kommer til å bytte over til en alfakanalvelger her. Så du kan se at fargen med i hovedsak de prosent gjennomsiktighet som du har for at alle bakt rett i det. Jeg kommer til å holde det som 100%, og deretter når jeg er ferdig med det, er alt vel og bra. Nå hvis jeg kjører programmet og vi tar app og vi snapper den, at bakgrunnsfargen blir automatisk justert bare fordi vi har noen CSS som sier: "Gå og gjør det." Du kan også skrive Java altfor som vil gjøre det samme eller at du kan bruke til å faktisk ta en pause et spill, gjør ting som det. Det er nok når du vil bruke Javascript. Du ville slå av spillet sløyfe på det tidspunktet. Du ville trenge litt Java fordi det ikke ville være noe du ville CSS for. Men husk det er bare en hendelse. Du kan si: "Når søknaden min blir forandra "La oss se om vi knakk." Og det er det. 

Ok? Jeg har snakket mye. Er det spørsmål så langt på hvor vi er? Yeah. [Student] Er det en tutorial for alle å få mer informasjon? >> Ja. Spørsmålet er, er det en tutorial for dette? Jeg vil bare forlenge den til alt. Det er noen ting som du kan gå til. La oss faktisk komme oss ut herfra. La meg gå tilbake her ute. En ting å påpeke er Visual Studio selv har tutorials bygget i. La meg bli kvitt dette. Hvis du går og opprette et nytt prosjekt, gjør File, New Project, og se på venstre side, det er en Online node i denne velgeren. Det kommer til å ta en liten bit. Jeg er på min MyFi her. Men det kommer til å komme opp og det kommer til å gi meg en sjanse til å finne maler men også enda viktigere, prøver også. Så jeg kan klikke på Javascript. Det kommer til å finne eksempler for meg. Min løsning er veien høyt her. Normalt vil du se en liste over mange forskjellige ting her. Hvis det er noe du ønsker å prøve, velge språk, Java her, og si: "Jeg vet ikke hvordan du gjør geolocation." "Jeg vet ikke hvordan du åpner en fil." "Jeg vet ikke hvordan de skal dra nytte av webkamera "Eller optimalisere for berøring eller ting som det." Det er prøver for alt: deling, søking, app barer, gjør eksterne samtaler til en tjeneste, JSON-koding. Alle slike ting er det prøver for her, og de er ikke store prøvene som kommer til å ta deg hele natten for å trekke fra hverandre bare for å finne at en ting du ønsket å lære. De er veldig bra. De er små, rett til poenget typer prøver. Jeg har lært massevis ved å gå gjennom disse selv, og så jeg anbefaler at mye som en ting. 

En annen ting å påpeke også er selvfølgelig jeg viste deg dev.windows.com, så hvis du går tilbake til det, vil du se nederst er det også prøvene her. Så du kan laste dem alle på en gang, men det er også en rekke andre ressurser her også som kan hjelpe deg å få opp til hastighet. 

En annen ting, og jeg vil virkelig anbefale at du prøver dette, Jeg har fått det på bloggen min, men jeg skal bare gå rett til det. Jeg skal vise deg. Min blogg har ressurser og sånt. En av de tingene til å påpeke er akkurat her, denne tingen: Din idé. Din App. 30 dager. Hvis du klikker på dette, det kommer til å bringe deg til en virkelig nyttig nettsted. Dette er mye mer nyttig enn du kanskje forventer. Dette kommer til å bli 30 dager med innhold som du i utgangspunktet kan få tips og triks gjennom den prosessen som du oppretter en app. Og som du kanskje ikke forvente, kan du faktisk få det for spill også og for telefon apps, sånne ting. Så i utgangspunktet registrere deg for det, og de kommer til å være å sende deg tips og triks om, "Har du tenkt på å gjøre dette? Støtter dere Snap?" "Her er noen retningslinjer for hvordan å gjøre det bra." "Har du tenkt på å sende inn til butikken?" "Har du tenkt på hvordan du skal selge din søknad?" Det kommer til å gå gjennom alle disse forskjellige tingene. Og faktisk, hvis du er på gaming spor, på et tidspunkt du vil begynne å gjenkjenne en person som snakker til deg fordi jeg faktisk måtte gå til Redmint å gjøre disse og innspilte to videoer der. Men det er alle en del av gaming spor, og det er også en full spor for generell app utvikling. Det kalles Generation App. Jeg vil absolutt anbefale det til deg, så vel i tillegg til prøvene. 

Det er en masse videoer på et nettsted som heter Channel 9 også. Det er nok det siste jeg vil anbefale så vel før vi går videre her. Channel9.msdn.com. Dette er bra fordi du ikke kommer til å være å lese gjennom tonnevis av stortingsmeldinger. Det er i utgangspunktet en masse videoer, screencasts og ting som er rett til poenget. Jeg skal ikke si det er alltid rett til poenget. Det avhenger av hvem som gjør snakkingen. Men generelt, det er noen virkelig to-the-point-videoer her som vil vise deg noen spesielle ting du kanskje ønsker å lære eller se demoed. Det er også alt av vårt innhold fra vår konferanse som skjedde for et par uker siden kalt Build, og du vil se at akkurat der. Det er Core teknologi for Windows 8 spill. Der du går. Jeg var der, faktisk. Du kan ikke se meg. Jeg var over her. Men uansett, det til side, jeg vil anbefale at du tar en titt på disse videoene. De er ganske nyttig. Hvis du står fast på noe eller du bare ønsker å se hva noe kunne gjøre, skyte dem opp. 

[Guarin] Windows Mail nettopp sendt meg en e-post med en link til innholdet for studenter å laste ned med eksempelkode og sånn. >> [Bowen] Flott. Awesome. Takk, Edwin. 

Bra. >> [Student] Jeg har et spørsmål. >> [Bowen] Oh. Ja, takk. [Uhørbart student spørsmål] >> [Bowen] Å, jeg er glad du stilte det. Ja. Spørsmålet var, er det et visuelt grensesnitt for meg å lage ting? Edwin vil belønne deg vakkert for det spørsmålet. Det er en måte å gjøre dette. Skal vi gjøre det nå? La oss gjøre det nå. Jeg kommer til å gå til det akkurat nå. Egentlig, la meg legge inn en ting til denne demoen, og så skal jeg vise deg den faktiske svar. Jeg hadde tenkt å legge i litt mer CSS her. Jeg var litt ut på tangenter her. La meg legge på noen CSS her for å dra nytte av de klassene som vi har lagt en liten stund siden, til den øverste del, til Maincontent div, og deretter til greetingOutput. Hvis jeg gjør det og kjøre det, kan du se nå har vi fått en litt annerledes padding og marginer, så vi har faktisk noen forskyvninger her. Disse er mer mot hva du skal forvente av en endelig polert søknad. Men jeg prøver bare å vise dette til deg fordi det er rett opp CSS. Så de tingene som du allerede vet at du kan bruke her for å justere innholdet som du ønsker. Du har allerede sett hvordan du gjør bakgrunnen endres ut på den måten. 

Hvis jeg går ut igjen til våre HTML, kommer jeg til å legge inn ett mer sett av markup, og dette er faktisk kommer til å være en kontroll fra WinJS. Jeg kommer til å gå og ta dette, en etikett. La meg se om jeg gjør det på rett sted. Sannsynligvis god nok. Her har jeg bare lagt til - og vi vil gå i full skjerm så du kan se hele greia - Jeg har lagt til en etikett for neste div. Div kalles ratingControlDiv. I seg selv vil det ikke gjøre noe. Hvis du åpner denne i en nettleser, vil du være å se på tomt, div selv. Men på grunn av den mystiske kodelinje som jeg viste deg før, prosessen alt, det kommer til å se etter noe som ser ut som dette - data-vinn-kontroll - og det kommer til å finne alt som er i denne parameteren. Det kommer til å gjøre en forekomst av hva som er den peker til. I dette tilfellet er det en vurdering kontroll, så jeg sier, "Vennligst gå og erstatte denne tingen "Med det du trenger å gjøre for å gjøre en vurdering kontroll." Det kan være en flip-kontroll, kan det være fremdriften ring eller hva kontrollen du ønsker å bruke. De kommer alle til å jobbe hovedsak på samme måte. Du bruker standard HTML5 markup for å indikere hva du vil, og så kommer du til å få en kontroll på slutten av dette. La meg kjøre dette. Jeg bare kopierte det inn, og nå som markup blir dette, som er faktisk ganske mange av HTML-elementer. Disse er alle enkeltbilder, og det er divs rundt dem med velgere. Forhåpentligvis kan du se det. Det er litt subtil. Jeg kan sveve over de ulike elementene, og det kommer til å tillate meg å se vurdering her. Jeg kan klikke på det, og det husker vurdering, men det er omtrent det. Det er egentlig ikke gjør noe med ratingen. 

Den en siste ting jeg vil vise deg på dette før vi bytte til en mer visuell design erfaring er en liten bit av kode som jeg kan bruke til å svare på disse WinJS kontrollene. La meg komme ut av det, tilbake ut av fullskjerm, og bytte over til JS her for andre. Jeg kan gjøre dette her. Jeg tror jeg skal bytte ut hele greia. Egentlig tror jeg det vil erstatte alt av det, men vi vil finne ut sammen. Jeg skal sette dette inn her. Yeah. Jeg kommer til å slette denne også. Hva gjorde jeg legge til? Det ser ut som mye. Det er ikke mye. Jeg bare forlenget den linjen med kode som jeg allerede snakket om før, og jeg sier: "Når alt er gjort, når alle mine kontroller har blitt gjort, "Så gjør dette." Så da kjøre denne funksjonen kalt fullført. I dette tilfellet, er dette ting du kan finne ut. Gå finne at div kontroll. Egentlig, det er en ting jeg skal peke ut. Det neste linje er faktisk sier, "Jeg har fått det ratingControlDiv." "Jeg ønsker å snakke med den som om det var en reell kontroll, en WinJS kontroll." Så i utgangspunktet, er du ber for at fra det. Du sier: "Jeg ønsker å snakke med deg som en kontroll." Og så kan du begynne å si ting som: "Vi kommer til å legge en lytter for deg "Så når du endret vi kan svare på det." Og da kan vi også gjøre ting som dette. Egentlig er det den gamle koden der. Jeg tror jeg mangler lime inn én funksjon, og som ville være den faktiske funksjon som ville svare på rating kontroll blir endret. La meg pop som i rett ned her, et sted rundt der. Og i dette tilfellet, er det eneste som er nytt det faktum at vi går inn i hva rating kontroll forteller oss, og vi ber for det som kalles tentativeRating. Det er en haug med forskjellige andre ting som at kontrollen kan fortelle deg, og det går kontroll av kontroll. Det er veldig grei. Du vil være i stand til å finne ut av det ingen problemer overhodet. Jeg kjører dette, og nå når jeg endrer ratingen og klikk på rating, du kan se nå er det faktisk å svare på det. Det er å sette den vurderingen på skjermen inn i det ellers tomme div tag under alderskontroll. Det er magi av en masse ting her også. Så som du lager applikasjoner for Windows Store, det er massevis av kontroller at du bare kan bruke. De virker som dette. 

La meg vise deg den visuelle siden av å designe for disse programmene. Den gode nyheten er at du allerede har dette verktøyet når du installerer alt hvis du går til at nedlasting og du får Visual Studio. Jeg kan høyreklikke på dette. Jeg vil ikke zoome inn Den sier bare Åpne i Blend. Blend er et annet verktøy som fungerer side om side med Visual Studio og er fokusert mye mer på design siden av ting, så det virkelig overflater verktøy som er optimalisert for å skape stiler, lage animasjoner, jobbe med CSS, en masse ting i den slags blodåre. Her hva som bør være svært interessant og ganske opplagt umiddelbart er vi ser på programmet. Forhåpentligvis er vi fortsatt. I stedet for å se koden, som vi fremdeles kan se nederst vi ser den faktiske representasjon av søknaden. Hva mer er, er det ikke bare en representasjon av programmet, er det faktisk app kjører. Og det er det som virkelig er fint om Blend. Teamet har gjort mye arbeid for å bringe HTML og Javascript og CSS i dette verktøyet. Nå kan du faktisk, hvis du er nysgjerrig, "Hva betyr det? Hva kan jeg gjøre?" Jeg kan faktisk designe til denne søknaden, selv om ting som dette ikke eksisterer i min markup. Husk at alderskontroll? Det var bare en div tag. Denne ting, eksisterer den stjernen kun under kjøring. Hvordan vet jeg det? Det er en liten bit av magi over her. Se disse lyn? Hver gang du ser et lyn, betyr at det ble skapt av noe under kjøring. Noen Java løp og slått noe inn i denne eller skapt dette med noen logikk. Disse stjernene som du ser det ble skapt av Javascript ved WinJS. Det fine er, det spiller ingen rolle for meg, kan jeg fortsatt lage det, Jeg kan fortsatt gå inn og endre det, kan jeg finne ut hva som skjer her, Jeg kan se på CSS, kan jeg gå videre og finne ut hvorfor fargen er slik det er, Jeg kan begynne å rote med ting og gjøre ting fryktelig, hva jeg ønsker å gjøre. Egentlig, vil jeg la ting alene. Men du kan se her er det all CSS og det viser du her. Hvis jeg går opp til det, det kommer til å vise deg alt som de kaller Winning, så de CSS-regler som er den mest konkrete og mest valgt for dette elementet, som du sikkert allerede har gått over i klassene, der du kan si det er en generell font som vi søker til alt, men fordi dette er en h1 og jeg har en farge som er definert for H1S, det kommer til å være denne fargen, og det er fordi det er mer spesifikk enn body1. Denne ene tingen her viser deg alt dette, og det er virkelig kraftige ting som du får mer kompleks, du lurer på hvorfor disse tingene er slik de er. Det vil faktisk fortelle deg, og du kan plukke noen av disse elementene her. At fargen er ikke så ille, faktisk. Du kan velge dem. Forhåpentligvis kan du se dette. For alt som du har på søknaden din, vil du se en hel kaskade av alle CSS som kunne ha brukt på det og hvilken som er å vinne, som man faktisk tok forrang. Disse er litt kjedelig. Det er ikke mye som skjer i noen av disse. Hvis jeg går og endre fargen, så vil du begynne å se noen gjennomgripende der. Du kan også bruke HTML her også. Jeg kan gå gjennom og endre HTML-egenskaper for alle disse tingene som jeg ønsker. Det er bare tonnevis av ting her. 

Jeg ønsker ikke å ta deg god tid ved å gå gjennom alt her. Bare vet det er her. Det er mye av design-orientert funksjonalitet som er bare tilgjengelig for deg slik at du kan holde visuell, jobbe med søknaden, og ikke trenger å gjøre mye for å gjette at du ville ha å gjøre normalt og sykling tilbake fra en nettleser tilbake i design, tilbake til nettleseren. Dette er virkelig kule ting for det, og som du utvikler en Windows Store-app, det kommer til å gjøre deg mye mer produktiv. 

Du vil også se det er sporing markeringen her og CSS som du arbeider gjennom ulike ting. Det er sikkert veldig vanskelig for deg å se at, spesielt på video, men det er det som skjer her, og jeg vil anbefale deg å bli kjent med det. Det vil spare deg for mye tid. Det er Blend. Hvis du gjør noen endringer her, blir de automatisk kommer til å bære tilbake over til Visual Studio. Det er de samme filene, det er det samme alt. Jeg skal la det være. Jeg har et bedre eksempel som jeg vil vise deg. Men hvis jeg har gjort en endring der og lagret det, og jeg kom tilbake til Visual Studio, vil det si, "Hei, du nettopp endret noe. Kan jeg laste det for deg?" Ja. Og du bruker de samme tingene der. Det er slutten av den aktuelle prøven. 

Jeg ønsker å vise deg en høyere slutten prøve bare for å gi deg en oversikt over annen funksjonalitet du kan tenke på i tillegg. Dette er et eksempel app som du kan laste ned. Hvis du ser etter noe som heter Windows Camp i boks, er det noen prøver som er i den, og en av dem er The Contosos Cookbook. Jeg kan bare kjøre dette for deg. Custom splash screen. Dette er programmet Grid view. De har bundet noen tilpassede data her. Du kan navigere gjennom dette. Du kan gå og ta en titt på ulike ting som vil gjøre oss sultne på en fredag ​​ettermiddag. Jeg vet ikke. Hva kommer til å gjøre meg mest sulten? Jeg vet ikke. Jeg skal bare plukke en. Du går inn i disse tingene. Den vil vise deg oppskriften. Du kan også, i stedet for å klikke på et element, du kan gå rett til den kategorien av innhold, som del av innholdet. I dette tilfellet, kan du lese masse falske Latin fortelle deg alt om disse oppskriftene her og deretter gå rett inn i den spesifikke oppskriften. Dette støtter også ting som deling som jeg viste deg før med bildene. Du kan også søke på dette programmet også. Det er veldig enkelt å gjøre søking. I utgangspunktet, du bare får en tekststreng fra Windows og du bestemmer deg for hvordan du ønsker å håndtere søk med det. Det er noen få linjer med kode for å få det, og deretter hva du gjør med det etter det er helt opp til deg. 

Her har de også en app bar hvor de bruker en annen funksjonalitet. Jeg vil bare fortelle deg hva det er. En påminnelse kommer til å bruke det som kalles en toast varsling. Dette er veldig praktisk for å la brukeren få vite når ting har skjedd, som et program ble installert eller noe ble fullført. Det er også bra for spill også. Hvis du har en vedvarende verden eller en ledertavle og en tjeneste som er vert at kanskje på en separat maskin, kan de varslinger bli sendt inn i en maskin og selv om brukeren ikke bruker ditt spill, spille spill eller kjører programmet ditt, de kan fortsatt få meldinger om slike hendelser. Så du kan si, "Din slottet er blitt ødelagt eller er omtrent ødelagt." "Kom tilbake og forsvare det," eller noe sånt. Du klikker på meldingen, går du rett tilbake inn i spillet, og du kan spille det. Så slike ting kan hjelpe virkelig trekke folk tilbake til din app ganske effektivt. 

Det er også støtte i dette programmet for å bruke mikrofon, webkamera, gjør video og ta bilder. Du kan også feste en sekundær flis. Det er nyttig hvis du ønsker å bare ha en brikke som går rett til bestemt innhold. I dette tilfelle går det med en til denne oppskrift. Alt jeg nevner jeg bare vise fordi det er ting som du kan tenke på å bruke også. For det meste er de svært enkel å bruke. Jeg vil bare anbefale at du tar opp at utvalgs explorer og finne en prøve som kan vise deg hvordan du gjør det. Det er ganske enkelt å bringe dem inn dine apps der ute også. 

Jeg hadde tenkt å vise deg noe annet som er ganske kult her. Jeg skal knipse dette programmet, og jeg kommer til å gå tilbake til Visual Studio. Dette programmet kjører. Det kjører fra Visual Studio. Jeg kan gjøre noen ganske kule ting med det. Jeg har faktisk en mulighet til å velge et element, og jeg kan gå over her til live-programmet og jeg kan si, "Jeg lurer på hvorfor er forberedelsestiden litt lysere grå enn tittelen i seg selv?" Jeg kan klikke på det. Det kommer til å synkronisere den tilbake i Visual Studio, og det kommer til å vise meg nøyaktig generert innhold som resulterte i at en del av UI. Så i dette tilfellet, er det element teksting og h4 dobbel konstruksjon, og som trolig forteller oss hva vi trenger å vite, fordi som en h4 innenfor den konteksten, det kommer til å få en viss form for skrift. Men hvis jeg fortsatt ikke vet hvorfor, kan jeg klikke på Spor Styles. Jeg kan deretter utvider ut farge og jeg kan finne ut nøyaktig hvorfor denne fargen ikke bilens farge men i virkeligheten er noe annet. Dette er i hovedsak de dev verktøy fra Internet Explorer til en viss grad brakt inn Visual Studio. Hvis du har jobbet med Chrome Dev Tools, Firebug, ting som det, slike verktøy som er i nettleseren, den slags funksjonalitet har blitt brakt rett inn i Visual Studio slik at du ikke egentlig har å lansere en nettleser og jobbe med disse verktøyene separat. Nå har jeg en Windows Store-app bare å kjøre, og jeg kan begynne å trekke den fra hverandre og finne ut hvorfor ting er å gjøre det de er. 

Jeg kan også gjøre det på denne måten også. Jeg kan gå og bare plukke noe rett fra markeringen, og finne ut hva det er i selve søknaden. Jeg tror jeg har gått alt. Her Jeg svever over dette. Jeg kan velge det. Det kommer til å vise meg i selve driften programmet der at ting er at jeg nå klikke på i markeringen. Virkelig kule ting. Som du prøver å finne ut hva som skjer og hva som HTML gjør, hva CSS gjør, ha dette i bakhodet. Husk dette er her for deg og også at Blend kan arbeide med en levende kjører programmet. 

Den en siste ting jeg ønsket å vise deg med dette programmet - Forresten, viser det du deltaer som ting endrer seg også, slik at du kan se etter de gule høydepunkter. De er ting som bare er endret i programmet. Men en siste ting. Jeg ønsker å gå tilbake til Blend bare for et sekund her. Vi vil åpne opp dette, Open i Blend, samme app, samme alt. Jeg vil bare vise deg den opplevelsen her er ikke bare du sitter fast på hjemmesiden ser på de tingene du får som standard når du kjører programmet og la det sitte der. Du kan også slå på denne ganske lite ikon opp her. Det kalles interaktiv modus. Du klikker på det. Det kommer til å ta opp søknaden din. Du er ikke i Design modus lenger, så du ikke kommer til å være å klikke på ting å endre funksjonalitet, men du kan faktisk jobbe med søknaden nå. Du kan klikke seg gjennom, kan du gjøre hva, få til en oppskrift som du bryr deg om eller til en kategori. La oss gå til denne kategorien. Jeg vil si: "Ok, her hvor jeg ønsker å designe." Deretter klikker du på den knappen igjen, vil det bringe deg tilbake i Design overflaten, og nå kan du gjøre alle de tingene som jeg snakket om før. Jeg skal holde klikke før jeg får dette merket, finne ut sine dimensjoner, finne ut HTML for det, CSS for det for et program som kjører, noen senere del av søknaden. Veldig, veldig nyttig. Jeg skal vise dette til deg. Vennligst holde det i bakhodet hvis du ser inn å skrive kode med dette fordi det kommer til å spare deg for mye stress, og det er ganske bra ting. Det er ganske mye alt jeg ønsket å vise deg på Blend og i Visual Studio for alt dette. 

Eventuelle spørsmål om noen av disse verktøyene? Noe som helst? >> [Guarin] Jeg har ting å gi ut, så gode spørsmål, gode ting. 

[Bowen ler] Jeg har allerede vist deg mine demoer her. Jeg kommer til å sette det på ressurssiden og slå til spørsmål nå. Det første referansen er at Generation App nettsted med låter og app spor. Registrer deg for dem. Du trenger ikke å vente de 30 dager på å få innholdet. Du kan begynne å gå og se på innholdet som du ønsker. Jeg forstår dine tidsrammer kan være annerledes enn - [latter] Så da er det Hackathon? Det er et par uker, ikke sant? Så du ikke har de 30 dager på å vente. Så ja, kan du registrere deg for det, og så bare begynne å trekke innholdet ut fra det. Også Dev og designsentre. Og jeg nevner ikke dette, men det er også Store Docs. Dette ville være for etter Hackathon som du er klar til å begynne å sende dine apps for butikken. Det er noen nyttige retningslinjer her, litt veiledning om hvordan å få ting inn i butikken, noen vanlige problemer som kan reise deg opp, og det er slutten av disse ressursene. 

Så hva tenker du på? Noe annet som du - [Guarin] Hvem tenker på å gjøre en Windows app for CS50? Cool. [Bowen] Cool. Flott. 

Eventuelle spørsmål om ting som du har sett så langt, og hvordan den forholder seg til dette? For eksempel, med mer tid jeg kunne ta et spill som jeg har skrevet og som kjøres i nettleseren, og bare slags gå gjennom prosessen å bringe det inn i Visual Studio og gjør det til en Windows Store-app. Det tar mer tid enn vi egentlig hadde å inkludere i dag, men den korte versjonen er at det er den samme koden som du har kjører i nettleseren, og de tingene som du endre er de tingene som du bestemmer deg for å koble til Windows 8. Så hvis du ønsker å bruke charms, hvis du vil søke etter eller dele, du trenger for å lage en app bar å gjemme bort noe av funksjonaliteten på det, de er den slags ting som du vil endre. Men kjernen i din web app kan forbli intakt. Igjen, så lenge det fungerer i IE10, det kommer til å være en veldig enkel port å bringe de greiene i Visual Studio, i Blend, og gjøre det til en Windows Store-app. Igjen, det eneste du trenger å lære er de andre funksjonene som du kan bruke til å lyse opp et program, som en levende fliser og slike ting. 

Yeah. >> [Student] Mitt spørsmål er om å jobbe mobilt. Så hvis du gjør en app som fungerer som en app på skrivebordet, er det veldig enkelt å overføre den til mobilen, eller er det en - Spørsmålet er, hvis jeg gjør en Windows Store-applikasjon som er virkelig optimalisert for dette miljøet og jeg ønsker å bringe den til en mobil verden, hva som er involvert med å gjøre det? Det, i likhet med mange spørsmål, er alltid et stadig skiftende svar. Den gode nyheten er hvis du stikker med HTML og Javascript, CSS, hvis du starter fra en Windows Store-app, det kommer til å la deg ta den med til Web og deretter bruke disse typer teknikker, som mediespørringer og ting, til å tilpasse seg ulike størrelse enheter. Når det er sagt, er det alltid rammer og ting der ute at støtte som strekker seg ut forskjellige teknologier, ulike plattformer. Det forandrer seg hele tiden. Vi er også i endring ting, så vel som vi ser mot det vi har nå faktisk ut med Windows Phone 8. Vi har noen felles kjerne infrastrukturer tilbudt mellom programmer for disse miljøene. Så ting som du gjør for å skape en Windows Store-app, mye som kan bære over i en Windows Phone 8-programmet også. Det igjen er en ny historie, så det er noe innhold om at på Bygg. Den SDK bare fikk ut en liten stund siden. Det ble nettopp lansert en liten stund siden. Men i form av andre plattformer også, du sannsynligvis kjøre inn mange kryssplattform rammeverk også. Den gode nyheten er det ting som du gjør her, kjernefunksjonaliteten er rett opp web standard ting. Det eneste som ikke ville oversette lett er det ting som Windows 8 gjør, men det er ingen overraskelse fordi det er en Windows-funksjon. Du kommer ikke til å finne deling eller lignende typer kontrakter på hver plattform. Så de er de tingene som du ønsker å fra et designperspektiv sørg for at du har måter å slags abstrakt at ut slik at du kan si, "Hvis jeg kjører på dette, kan jeg gjøre det." Hvis jeg ikke, det er noen design mønstre du kan bruke til å slags skjule at ting unna. Men hold det i tankene. Yeah. Unnskyld. Gå fremover. 

[Student] Hvis jeg ønsker å teste min Windows app på toppen av [uhørbart] [Bowen] Yeah. Jeg hoppet over en ting også. Yeah. Jeg skal svare på spørsmålet ditt først, så skal jeg vise deg en funksjon jeg glemte å nevne. Vi har noen maskiner tilgjengelig lokalt. Jeg beklager. Spørsmålet var, hvordan kan jeg teste ting på enheter hvis jeg ikke tilfeldigvis har en hel masse ting å velge mellom? [Guarin] Vi lånte dere, tror jeg, fem eller seks. Hvor mange trenger du? [Student] Vi fikk fire av dem. >> Ok. Dere fikk fire slates å leke seg med. Så definitivt la alle vite, takk. [Ler] >> [Bowen] Awesome. Det er en enda bedre svar enn jeg hadde tenkt å gi deg. Vi har kontortid for utviklere som vi gjør på vårt kontor og nå kommer snart til Microsoft Store over på Pru, men Edwin har allerede tatt vare på deg. Det er fire slates tilgjengelige for loaning, for testing. Det vi går. Det er et eksempel på en opp der. Så ja, absolutt. Flott. Absolutt den klart beste måten å teste det er å være på en enhet. Hvis du ikke tilfeldigvis har en ennå, eller du ikke ønsker å gå over campus i snøen å hente en eller hva, det er en måte å gjøre dette tilbake i Visual Studio. Hvis jeg går tilbake til der jeg var her, her i stedet for å bruke Local Machine, du kunne koble til ekstern maskin, men det er ikke det jeg snakker om her. Simulator er det ting som du kanskje ønsker å se nærmere på. Jeg skal kjøre dette, og egentlig hva det er, det er egentlig et vindu på ditt eget system. Her er faktisk mitt system løping, løping Contoso, men på en måte som lar meg endre noen av henrettelsen parametere, miljøparametrene. Så jeg kan si her, "Vet du hva?" Oh. Jeg allerede har det kjører i et simulert 27-tommers skjerm på 2560-oppløsning. Jeg kan lett slippe det ned og se hva søknaden min ville gjøre med en mindre skjerm eller ved å endre DPI-innstillinger eller hva. Så på en liten skjerm, en 10,6, hva går det å gjøre? Som fortsatt ser ganske bra, ikke sant? Det er lurt å gjøre dette, spesielt hvis du sender inn til butikken, fordi vi gjør som en del av testprosessen. Og hvis det er problemer som det, så du kan kjøre inn i et problem å få sertifisert for butikken. Men det er en del av simulatoren. Skikkelig kult. Veldig lett å gjøre det. Du kan også bruke funksjoner som å rotere det også. Jeg kan klikke på knappen her, har det rotere, se hva noen ville ha som en opplevelse roterende deres skifer, deres tablet, og ved hjelp av din søknad med det. Det er noen andre ting også som berørings emulering og noen andre ting, sette GPS. Jeg kan late som jeg er på et annet sted og se hva søknaden min gjør når jeg later som jeg er tilbake i Seattle eller noe. Men det er en veldig nyttig funksjon, og det er bygget inn i både Visual Studio og i Blend. Ja. Spørsmålet ditt. 

[Student] Hvis du skriver et spill, ikke Visual Studio har noen støtte for animasjon? Yeah. Spørsmålet er rundt animasjon støtte, særlig med gaming. Det spørs. [Humrer] Med Javascript vil jeg si det er trolig mindre støtte enn det er på XAML side, som har tidslinjer, har storyboards og ting som er bygget i. For animasjoner på Javascript apps, jeg vet ikke hvor mye av et svar jeg ønsker å gi deg. Jeg har ressurser på bloggen min som går gjennom en rekke alternativer for både fysikk animasjoner, alternativer for Javascript-orientert spill på Windows 8. Jeg vil henvise deg til dem. I utgangspunktet, det er så mange valg. Grunnen til at jeg nøler er det er så mange valg for å gjøre animasjoner med Javascript. Det kan være CSS, det kunne være Canvas-basert, kan det være like grunnleggende DOM animasjoner, det kan være mange forskjellige ting, så det er egentlig avhengig av ditt valg. Hvis du bestemmer deg for å bruke noe sånt Create.js eller Lime eller andre typer rammer - Vel, jeg er ikke engang sikker på at du kommer til å være i stand til å bruke en høyere slutten rammeverk liker Impact eller Construct. Som har en tendens til å generere mer kode enn du kanskje vurdere fra scratch. Men i disse tilfellene, kan du fortsatt bruke en simulator, du kan bruke de miljøene, og jeg har en tendens til å bare bruke dette miljøet for min test plattform i de tilfeller som jeg utvikle spill. Jeg har vært fint, spesielt med Canvas animasjoner, som sannsynligvis er den mest vanlige ting. Det beste du kommer til sannsynligvis finne er dev verktøy i nettleseren og dev verktøy i Visual Studio. Slag av en buktende svaret der, men forhåpentligvis fikk jeg svaret. Ja. Du. 

[Student] Hva er lagringsalternativer for Windows 8 apps? Hva er lagringsalternativer for Windows 8 apps, Windows Store apps? Alternativene virkelig er hvert program får sin egen pool av lokal lagring for innstillinger og for data, men det er også latterlig enkelt å bruke roaming lagring, å bruke cloud-basert lagring. Det er gratis. Hva som skjer er du i utgangspunktet velge en annen klasse, og du sier, "roaming-innstillinger, lagre, dette spesielt sett med innhold," og deres Microsoft-konto, uansett hva de har logget på som, kommer til å være nøkkelen til roaming slik informasjon rundt. Så hvis jeg bruker spillet på min laptop, og da jeg logger på med samme konto og jeg spiller spillet på en overflate eller en tablett, som automatisk vil streife at innstillingen og data mellom disse maskinene. Det er en standard ting. Det er bra for visse mengder data. Du ville ikke sette en stor database til disse. For at du trenger å gå til andre typer løsninger, som en hosted database i skyen, ting som det. Det er noen andre samfunns alternativer rundt andre typer datateknologi. Jeg har sett noen SQLite alternativer i samfunnet rundt det også. Så mer og mer dukker opp, men de er de viktigste tingene som du ville se mot for et spill eller en applikasjon. Og du hadde et spørsmål i ryggen også. 

[Student] I forhold til nettverket [uhørbart] laster opp eller ned filer [uhørbart] [Bowen] Er spørsmålet ditt hvordan kan du se det, eller hvordan du kan feilsøke det og teste det? [Student] Hvordan kan du debugge det [uhørbart] Unnskyld. Jeg kan ikke høre alt sammen. [Student] Hvordan får du det bug testet og også [uhørbart] Flott. Flott. Hvordan jobber du med nettverk? Hvordan kan du se hva som skjer? Det er mange forskjellige svar på dette, men la meg vise deg trolig den enkleste ting her. La meg bli kvitt den simulator for et sekund. Bare et par debugging alternativer for nettverksbygging. Det er et komplett nettverk stack bakt rett inn både WinRT nivå og fra WinJS, slik at du kan veldig lett gjøre XHR, kaller AJAX type fra spillet eller applikasjonen til å gjøre det. Primært, jeg pleier å bruke to ting. Jeg bruker den faktiske dev verktøy selv, som har et nettverk stack bakt inn i dem. La meg vise deg Windows hjemmesiden. Jeg kan ta dette opp, og det er faktisk et nettverk proxy bakt inn i disse verktøyene her. Så jeg kan gjøre dette, jeg kan oppdatere siden, og det kommer til å vise meg alle de interaksjoner, inkludert AJAX kaller for den økten, for at forespørselen varighet. Dette er nyttig. Det kommer til å være svært nyttig for nettleserbaserte applikasjoner. For andre typer programmer, inkludert Windows Store apps, Jeg bruker et verktøy som heter Fiddler. Du kommer til å få et spill som svar. [Humrer] Fiddler er en enkel proxy. Jeg tror jeg kan vise det til deg. Det er bare GetFiddler.com, som interessant nok, jeg spore min nettverksstakken kommer til å GetFiddler. Men hvertfall, Fiddler har blitt skrevet av en av de PMs på IE-teamet, så han vet hva han gjør. Dette er en god proxy som du kan bruke til feilsøking nettverkstrafikk. Jeg vil anbefale det. Spørsmål der borte også. 

[Student] Er det en enkel måte å integrere fremmedspråk innspill, liker japansk eller kinesisk, inn i Windows-programmer? Jeg kan ikke si jeg har gjort for mye av det selv, men det er bakt i. Det finnes alternativer for selvfølgelig emitting søknaden din - Jeg beklager, jeg ikke si spørsmålet - alternativer rundt globalisering, lokalisering av innhold, inkludert ting som å kunne selge i ulike markeder og målrette den versjonen av din søknad for de enkelte språk eller kulturer eller sånne ting. Absolutt bygget i. Vi har hatt støtte for det for alltid, og som bærer frem til alternativene for Windows Store. Du kan gjøre det i butikken selv, selge i ulike markeder, du kan gjøre det i søknaden så vel også med å bruke ressurser på å definere, "Hvis jeg er utviklet for denne kulturen, og deretter bruke disse overstyringer for min tekstlig innhold "Eller bruke en høyre til venstre leseren." De er alle en del av standard WinJS og WinRT API. Godt spørsmål. 

Hvordan gjør vi? Noen andre? Og hvis noen på video har spørsmål, jeg cbowen @ microsoft, så jeg er glad for å ta noen av dine spørsmål fra fremtiden. Veldig - Fra fremtiden, fremtidig [ligner ekko]. Så her er meg. La meg sette tilbake min kontakt her. Så bare send meg et notat, cbowen @ microsoft, og jeg vil komme tilbake til deg så snart jeg kan. 

Noe annet som du lurer på? Er vi gode? Flott. OK. Takk så mye. Jeg setter pris på det. [Applaus] 

[CS50.TV]