[Powered by Google Translate] [研討會 - Windows 8的 - 程序/遊戲開發與HTML5] [克里斯·鮑文，埃德溫Guarin - 哈佛大學] [這是CS50。 - CS50.TV] 嘿，大家好。我的名字叫埃德溫Guarin。這是克里斯·鮑文。我讓他介紹自己在一秒鐘。我只想做一個快速的公告。首先，你CS50學生獲得Windows 8是免費的。因此，如果你想真正使用它為您的最終項目，它是你的了。內特將發出以後的電子郵件中的說明。第二件事是，如果你決定寫一個Windows 8的應用程序為您的CS50最終項目，我們將做一些贈品：一個Xbox，我們也許可以給一個石板走，這樣的東西。所以，如果有什麼事，你回來，讓克里斯和我知道我們如何能夠幫助您建立的東西真的很酷。所以，再次感謝今天到來，我會交給克里斯。謝謝你，埃德溫。謝謝，大家好，今天參加我們的。我是克里斯·鮑文。我是愛德溫的同事在這裡的東北部之一。我只是想花一點時間跟你說起如何使Windows應用商店的應用程序使用HTML5，JavaScript和CSS 和那種讓你可以有任何關於它的問題回答對您因為你正在尋找走向想著也許使用它的一個CS50總決賽的機會。這就是說，我們只潛水權利英寸我會去到幻燈片在這裡。如果你有任何問題，請隨時給我發送電子郵件。我cbowen@microsoft.com，而且有我的博客和我的Twitter。但是你想獲得與我聯繫，這很好。我已經得到了有關的東西一個小時，我希望得到您的問題在前進的道路上，所以不要羞於在這個有問題。他們看不到誰的要求對記錄的問題，所以，你想你會為匿名。讓我潛水權，只是給你一個快速的介紹了Windows 8，並告訴你一些的東西有關，你可能會考慮使用Windows Store應用程序當你正在考慮開發一個應用程序。我們正在尋找在Windows 8中。我們已經出了幾個星期了。很多強大的採用已經在那裡的。你可能已經看到了表面的機器，我們也一樣。有一個在這裡其實你可以看看，如果你在這裡的人。我真的想和你談談，告訴你身邊有關Windows 8一點點。與Windows 8的想法，它確實提出你所知道的關於Windows的東西到一些新的經驗 - 尤其是，事情像表面的機器上，帶觸摸，這些種，現在市場上有更多的移動設備，但它也是Windows為核心。因此，這意味著你可以在運行Windows 7的任何真正安裝它，從你最大的三重SLI遊戲平台到你的筆記本電腦和你嶄新的其他設備，你可能今天接了。他們將運行Windows 8的。我會告訴你身邊的只是一點點，和所有的經驗，你會在這裡看到的東西，你可以創建。我們的想法是無論是觸摸，鼠標，鍵盤，不管使用什麼設備是你運行你的應用程序時，它會運行很好。 Windows 8將幫助所有那些場景。這些幻燈片放在一邊，讓我們得到正確的進入考慮看看在這裡。讓我告訴你我身邊的主屏幕。這是我的開始屏幕。我就在這裡給你一個旅遊的一點點。我是一個非接觸的機器上，所以像我想摸摸我的筆記本電腦的屏幕，它不會做的事情，所以我就在這裡左右滾動一點點告訴你。有些事情你可能會注意到的一個事實，即這些所謂的磚直播其實可以製作動畫，並且可以提供信息給你 - 對統計數據可能更新一個遊戲或者告訴你一些早期的應用程序，在這裡的左側的消息。我們走吧。我敢肯定，這是唯一積極的，充滿了想像的好消息。你可以在這裡看到它的真正呼喚你的注意力轉移到應用程序，他說， “嘿，有一些新的東西在這裡。看看。回來，看看有什麼新的給你。” 這就是所謂的動態磁貼，你可以做的通知無論是從應用程序本身的權利或者，如果你看看更詳細，你會發現如何編寫遠程服務實際上可以推動信息瓷磚，這就是所發生的事情與這些新聞應用程序。他們實際上得到從雲的新聞和更新的瓷磚就在那裡讓人們知道有一個理由去打開應用程序，看一看在任何最新的消息是在任何這些或者，如果有新的配方或新的高比分擊敗或在這些應用中的朋友玩或什麼的。它的東西來吸引你。互動所以這是活的瓷磚，它可能是一個人，也可能是一個網站也是如此。通常它是一個應用程序。幾乎所有的這些事情，我這裡有來自Windows應用商店。我會發動的。這是你得到默認的應用程序之一這是運行Windows 8的任何機器上。您可以來這裡找到任何你想要，從被突出顯示，我以前從未見過的遊戲的東西。哦，哇，我們已經有了一個新的彈球這裡。你可以從商店就在這裡安裝這些，我們將討論如何開發這些。你有很多選擇的你如何創建它們。我們將聚焦於JavaScript的故事，HTML和CSS，但對用戶，對應用程序的購買者，也無所謂什麼它編寫的。他們可以繼續使用它。我被這個很感興趣，所以我需要打開這個起來看一看。每一個應用程序，包括那些你可以提交和銷售或免費贈送的，不管你想要做的店，會得到這樣一個主頁。你可以提交你的申請一堆屏幕截圖 - 你在這裡看到一些 - 有關應用程序的詳細信息，並隨著時間的推移你會積累兩項評級 - 他們基本上只是星級 - 和評論，它提供了多一點點的洞察力。其實，有人要輸入的東西，告訴你，你是如何真棒，並且，將進入您的評論部分在這裡，我沒有看過。太棒了。 “甚至不會開。”多麼偉大。嗯，對他們來說，這的確打開並運行的鄉親，他們似乎真的很喜歡它。 [笑] 請記住這一點。互聯網。任何人都可以說，他們想了解你的應用程序是什麼。所以一定要確保你正在做它一個偉大的工作，確保你正在做它舒適的用戶，你可以因為他們是一對夫婦的點擊即可獲得提供了一個回顧，並且，將累積到您的全面審查評價。並且要做到最好，因為你將要對抗其他應用程序。將有數以千計的應用程序已經在店裡，和機會，可能有一些做類似的功能，你在做什麼。所以，如果你真的可以在人群中脫穎而出，那將是你的優勢，當然。我們會得到進店一點點以後。我真的希望把重點放在創建應用程序。但短版店是世界性分佈，它會自動的Windows 8中的一部分，人們剛剛火起來，一起來看看各種應用程序在這裡，你的裝扮貼紙書和各種不同的應用程序。新鮮油漆，我用這個有很多 - 很差，但我用了很多。它向我展示我已經擁有它。讓我告訴你一些我沒有 - UVideos我沒有為全新的。你在這裡看到它是免費的，所以你可以從商店正確安裝。你有選擇了。你當然可以把它送人。你可以把廣告中的應用程序或遊戲。您也可以為它充電，你可以很容易地提供試用的應用，以及這樣你就可以讓鄉親們嘗試了一個星期或任何你想做的事情。這只是通過定制門戶。你不寫任何代碼的。所以你說，“你可以用這個一個星期，然後你就必須買它。” 或者你可以不喜歡，“事情你可以打第3級這個遊戲 “然後你就必須購買才能訪問的休息。” 你甚至可以做應用內購買為好，這樣你就可以說， “我們已經有了更多的冒險或套被解鎖圖形或東西 - “更多的菜譜被解鎖 - 如果你購買這些擴展集” 你可以做所有的內部應用程序或遊戲本身。所以，完全取決於你，你的選擇。有很多東西，你可以在店裡做，然後基本上你要提交到一個認證通道。我們可以討論所有關於那個有點稍後，但這是我們的目標。你想要得到你的應用程序的全球知名度在這裡店。回到這裡開始屏幕上，我想告訴你身邊多一點點。如果我啟動這些應用程序，讓我給你一些跨應用程序的功能的例子在這裡。為了做到這一點，我會推出新的油漆。有一件事你會在這裡看到的是屏幕的每一個位，屏幕上的所有像素，去你的應用程序。飄在那裡你必須圍繞這些窗口邊框的日子有很多的按鈕，總是有佔用空間所有的時間。現在，你真的想擺脫這一點，只需要你的內容是重點。我們可以通過訪問其他類型的菜單做的事情與Windows。其中之一是實際上什麼所謂的魅力吧，和它出來從屏幕的一側。您可以從側面實際上輕彈，如果你有一個觸摸屏，你可以右鍵點擊，如果你有一隻老鼠，有一個鍵盤快捷鍵吧，總是有做一下這裡的環境不止一種方法。這帶來了一些東西，你可以做。最明顯的是你可以回到開始屏幕，但其餘4個均為所謂的魅力。他們是合同，你可以插入作為一個應用程序開發人員。他們很酷。搜索，我敢肯定，這東西你打算怎麼辦，分享我會告訴你在第二，與設備和設置，這些都是所有的東西，你的應用程序可以插入利用Windows中，說，“我已經做了我的一部分 “我希望Windows支持一些其他的功能， “我不想寫大量的代碼來實現這一目標。” 這是真正使用這些功能的好處。讓我告訴你一個。為了做到這一點，我會成為一個新的繪畫。我也談到了使用的每一個像素為您的應用程序。默認情況下，這是什麼樣的油漆應用程序的外觀，當你使用它等等。這真的只是無論你畫，你的內容。我可以在這裡做可怕的事情。我應該怎麼畫？我不知道。塗鴉？哦，太棒了。我可以做的塗鴉。太棒了。火雞？ [笑] 這是最抽象的火雞，你會看到。我還可以帶出什麼所謂的應用欄，這是真的，你可以使用密鑰的方法之一隱藏了所有可能一直在你的應用程序或遊戲之前的東西只是佔用空間，所有的時間。所以，現在你可以把它放在這裡，這真的是更美麗的經歷之一與我見過的應用欄。把選擇這裡選擇不同的顏色。我們想要一個火雞，所以我們會把一些棕色這裡，開始在一對夫婦的色彩混合。我們將採取一個中間色在這裡，然後回到這裡。您可以開始繪製。還有你的火雞。太棒了。我不能畫首先，而是要在觀眾面前觸摸板做的更好。這是真棒。這個想法，不過，是我關心的是在這裡表面上的一切。比方說，我很滿意這一點，我不得不與別人分享。通常你會與其他版本的Windows做，你也許會採取一個屏幕快照，你會做你的文字部分複製粘貼或者您要分享出來這樣的事情，然後去打開另一個應用程序，並把它變成它。在這裡，你不必這樣做。實際上，你可以襯托出迷人的酒吧，說：“我想分享這個。” 在這一點上它會告訴你所有的應用程序知道如何與任何被共享的工作。在這種情況下，它是一幅畫，那麼它會說，“我看你已經有了一張照片。” “你想分享一下？”你可以看到我發電子郵件給自己的東西所有的時間。它承認，它的遞給我，作為一個快捷方式，但它也給我看每一個應用程序，它知道如何處理拍攝圖片並做一些與它。這些都表明到Windows，他們能做到這一點。在這一點上，這是Windows操作系統。用戶只需選擇他們想要做什麼。我會盡我平時PuzzleTouch的。你可以看到我已經創建了各種謎題隨著時間的推移。我要PuzzleTouch說，“我想和PuzzleTouch分享這個驚人的創造。” 它會繼續前進，說：“太好了。你想分享這個？神奇。” “你想使一個難題，很容易，中間，不管？” 我會做一個中間位置。它使這一難題。這將是一個可怕的謎，因為它主要是空白。但它已經準備好，它實際上早在其他應用程序。如果我來到這裡，我可以搜索並啟動它。現在，如果我們翻閱了一點點在這裡一點，我們應該看到我的創作的地方。我上哪兒去？我都做了什麼樣的難題？難道我可以很容易？哦，還有這是，就在那裡。 [笑]這是容易辨認的火雞難題，在這裡。不過，我想向你指出的東西，這裡的很酷的事情是應用程序不知道對方什麼。他們只說，“我有一個圖片分享，我知道如何處理的圖片。” 而你作為一個開發者，你不必編寫代碼。當有人問我分享，我要去把一些數據到這個小的數據結構和我完成了。其他的應用程序接管，做它的事，這就是共享經驗的結束。這只是一件事，你可以做的 - 真的，真的很強大 - 而這將是其中的一件事情，可以真正幫助區分你的應用程序還你的遊戲太在店裡。人們將能夠說，“這是非常有用的。” “我用這個謎題創作者所有的時間。這是夢幻般的。” 這大約夠這是怎麼回事上進行簡要回顧。有一對夫婦的其他功能太，也許我們將重點為我們經歷的代碼。但我想潛入幻燈片，要做到這一點，我要去桌面，這本身就是在這裡另一個動態磁貼。我可以去到這個，果然，我在我的幻燈片，但讓我告訴你其實我們在哪裡。我們實際上是在桌面模式。這確實是在那裡我之前說有關Windows弘揚新的經驗表明本身。這是你知道的Windows。 Windows應用程序被稱為桌面應用程序。它們運行在這裡。如果您有現有的應用程序，你想在Windows 8上運行它們，你完全可以做到這一點。這些都是不一樣的東西作為存儲應用程序，這是在這裡，喜歡新鮮的油漆和這些NBC新聞的應用程序之類的東西。那些將來自實體店。它們可以插入一些，我是您展示的功能和其他人，我還沒有表現出你只是還沒有。但是，僅僅記住這一點。我們對這些事情都支持。對不起。什麼是不顯示在屏幕上？我已經完全失去了它。這是奇怪的。好吧。感謝您指出了這一點。你還沒有看到有一段是我顯示你的桌面就在這裡。什麼是你看到的最後一件事？你看到了嗎？這是桌面。你已經知道它是什麼樣子。沒什麼可怕的不尋常。這是我們進行了經驗推進對你和讓你使用，你有過的事情。例如，我會向您展示的Visual Studio。這是一個桌面應用程序。它會在此模式下運行。這將支持更複雜的環境有很多的選擇之類的東西，所以它使一個很好的選擇作為一個桌面應用程序。這就是說，讓我們去幻燈片只是一點點並給你一些介紹的內容，然後進入實際編碼在這裡。好消息是我聽說你一直專注於大量的CSS和JavaScript，HTML的。所有這些事情，你一直在直接學習進位使Windows Store應用程序。你已經聽到與應用CSS選擇器和所有這些事情的事情正是你在這裡創建的商店的應用程序。我們將通過位經歷這些事情位。基本上，我建立的，你已經花時間去學習的東西。這是你可以使用的技術整體圖使為Windows 8的應用程序。在右邊的桌面應用程序，東東真的是我們已經知道的。這東西，真的是Windows 7的世界結轉到Windows 8。所有這些選項發揚：C＃，VB，Win32的一種發展。大。沒問題。新的東西是在左手邊。這是Windows應用商店的應用程序，這時候我想要得到我的應用程序連接到Windows 8 使用所有這些功能，讓它進店，並獲得真正爽體驗的Windows應用商店的應用程序。要做到這一點，你可以在這裡看到你已經得到了所有你的選擇使用XAML，C + +， C＃，VB，你可以做的DirectX，這樣的事情，事情是超越的幻燈片。但對我們來說，我們要正確的專注於一個事實，即HTML，CSS和JavaScript 是一個真正的一等公民作出的Windows 8應用程序和Windows應用商店。因此，這是對大家都有好處這裡的鄉親觀看視頻因為你可以利用所有這些，你有經驗真正扎到什麼Windows提供。你要做的是通過一組API，它應該是毫不奇怪。每個操作系統都有自己的API。我們揭露Windows可以通過了所謂的WinRT做什麼。這是一組API，只是沒有你的一切。如果你需要打開的文件，則需要使用相機，地理定位，這樣的事情，他們經過哪些Windows可以提供給你。要訪問，我們有一些更多的JavaScript那將使其更容易為你做到這一點。我們會得到，在一個時刻。但現在，這是基本的路線圖。你已經在做的一些API之上的東西這種幫助您使用的Windows等於存儲應用程序。而這的的確確是所有你必須知道，從較高的水平。我們將深入到實際工作與現在的東西。你可能已經看到了一堆的東西，與IE9的一小會兒回我們介紹了很多的支持，在當時，在Web新標準，所以很多新的CSS特性，很多新的HTML，ECMAScript 5標準，這實在是JavaScript的。所以一切的，除了嚴格模式是在IE9。只是一個用CSS噸的東西，CSS3，都在那裡呢。而這一切的東西發揚到我們正在做的與Windows 8。您可以使用這些東西，你可以用一切的新的IE10。隨著我們的IE10引入所有這些事情支持。他們所有的硬件加速，所以如果你的機器上有某種的GPU上，這可能是幾乎每一台機器，你可以得到在過去的8年中，你要能夠有硬件加速的輸出，用CSS可視化輸出，畫布，SVG。所有的這些事情將通過硬件加速並且是，更快，更高效。短版所有這一切 - 我可不是要經過每一個東西在這裡 - 如果你看到這個名單上的，如果你能在IE10做到這一點，如果它是你正在運行的Web應用程序，在IE10的作品，它的東西，你可以做一個Windows應用商店的應用程序。而這幾乎是它。所以，如果它工作在IE10，它將會作為一個Windows應用商店的應用程序。這是在桌子上的東西，你可以使用。有很多在這裡。我們沒有到午夜，所以我不能在此回顧的一切。但也有一些網站，這將有助於您了解這些事情可以做，我會告訴你其中的一個在第二。我只是想指出幾個，你可能看關鍵的東西。也許你已經看到了其中的一些在你的研究中，但這些都是非常有幫助，特別是在Windows應用商店的應用程序，從CSS的一面。所以能夠做轉換和過渡，提供運動與動畫 - 這些是CSS的一部分了，而且他們都支持現代瀏覽器，和IE10和IE9增加了支持隨著時間的推移，所有這些東西。所以，為什麼你自己寫吧，為什麼要經過手工做這些事情的所有的麻煩當你可以使用一個簡單的CSS變換為應用程序創建一個3D效果？大。這就是它的工作原理。我不能讓任何比這更困難。如果你知道如何做到這一點在CSS中，你知道如何做到這一點在Windows應用商店的應用程序。超越，對於佈局，之類的東西，甚至商店的應用程序，但超出這個限度，看著也許是新聞的應用程序，是顯示您的文章或配方或類似的東西，這些其他類型的功能在CSS中是非常有用的：網格，Flexbox，CSS的地區更是一個相當新的標準也是如此。這些東西都是要幫助你制定出的內容和流量之間的部分內容，能夠做到分頁和斷字，不用您親自編寫的東西。你剛才說，“請執行以下操作對我來說，” 和屏幕房地產是不同的在不同的機器或者，你會看到在某一時刻，當你捕捉應用程序有在屏幕上少量的空間，這是對CSS沒有問題。它可以利用的優勢 - 關於第二個媒體查詢we'll談話 - 它可以採取的東西重新定位你的內容照顧，從區域流動內容只是這些東西，你可能已經看到了使用Web技術。在HTML5的一面，也有一堆東西這將是對你非常有幫助的Windows Store應用程序。同樣，我們也不會去通過所有這些，但他們只是在這裡。所以，如果你需要使用它，音視頻，如果你想從形式做驗證，地理定位，所有的東西你可以在JavaScript中做的JavaScript 5或5的ECMAScript， IndexedDB本地存儲 - 這是給你的所有選項。如果你正在尋找一個答案，只是看對現有技術使用HTML5和CSS 你會發現不必自己推出了很多的東西更容易的答案。讓我告訴你在這裡一點點。我有一個網站，我們可以去。讓我放棄了這個幻燈片的一秒鐘。如果我們出去IETestDrive.com，我不會做太多這裡演示的。 IETestDrive.com真的向您展示了很多什麼新與IE10，的事情，你可以做。這是我找到的，因為不是通過一串白皮書讀書真正有用的，看幾個演示，這會幫助你把它放在自己的個人雷達有關技術是否有意義，甚至做任何更多的研究，所以你就會明白，“我看這是什麼。” “我明白請求幀動畫不適合我。” “我明白我怎麼可以使用的地區或SVG過濾器。” 你看到他們在行動中，看到他們一個例子，並決定為自己，如果這就是要在自己的項目和以後對您有用如您繼續使用Web技術工作。在這裡，我只想鼓勵你去看看。我不認為我會花很多時間實際運行這些。我們有足夠的與編寫代碼來顯示。你會在這裡看到的東西從觸摸效果在該條中，觸摸為基礎的遊戲，動畫，非常快的硬件加速動畫那裡，一些優化，你會在其中一些樣本看為好，並有許多，許多。如果你走在這裡，開闢了站點地圖，這裡還有一個荒謬的樣本數在這裡。你可以看到他們都在這裡。如果你正在尋找的東西或者你聽說過的東西你想知道，也許這將是很酷的東西在應用程序使用，嘗試尋找在這裡，有可能是一個不錯的演示它來保存自己一些時間。好嗎？如有任何疑問，到目前為止在這裡的鄉親？好吧。我們將繼續在這裡。同樣，剛剛檢查出來。它們是Web標準，所以去你知道的任何其他網站展示看看這些技術讓你感覺想要做什麼。回到幻燈片。這就是說，您是從網絡世界轉移到真正的本地安裝的應用程序的世界裡，所以有一些東西在這裡指出。首先，這裡還涉及到任何Web服務器。有沒有Apache的，沒有IIS運行在這裡煮好頁到遠程客戶端，在遠程瀏覽器代理。在這種情況下，真的一切都打包給你。您提交您的應用程序商店，它得到認證，它是在商店，然後人數以千計會安裝遊戲或應用程序。但基本上，他們拉下來在本地自己的機器。有沒有必要走出去到Web了，除非你有需要的遠程API調用，那是完全正常的也很好。但他們不會是在該模式下，他們必須從一台服務器去請求響應得到其內容的下一個頁面。所以這麼說，有一些小的API的差別。這是令人難以置信的未成年人。他們不會打你你的正常編碼，但他們至少記錄。那種他們邊緣情況有。值得一提的另一件事是信任的差異。我只提到這一點，因為我只是想確保我說的因此，如果你碰上它以後，你會想，“克里斯說了一些關於這一點， “所以也許，是啊，沒關係，”然後你回去，你會發現它是什麼。上下文關係。默認情況下，我們盡量保護用戶免受攻擊向量。有一些東西，你可以在默認情況下做和一些事情你需要改變上下文，使。由於您使用的是一些圖書館在那裡 - you've已經工作與jQuery，但如果你看看其他的庫在那裡 - 你可能會使用一些功能那種超越本地使用，並更具活力的互動 XHR請求，這樣的事情。有時候，你可能會發現那些將默認被禁用，而在這種情況下，只是做一個搜索，查找本地和網絡方面，你會發現如何解決這個問題。只要確保你知道，當你開始使用其他框架，其中，我應該提到，你完全能夠做到的。所以，如果你能找到一些其他的框架 - 這在第二we'll談話 - 為遊戲和你要使用，要使用一些控制庫是在那裡而你不想自己寫的東西 - 這是一個好主意，對吧？ - 你完全可以用這個東西。沒有什麼阻止你使用的基於JavaScript的任何類庫回來， CSS，HTML5。再次，如果它的東西，你可以在IE10，這是很多赫克這幾天做的，你可以做到這一點。它拉進你的應用程序，引用JavaScript庫，並用它在你的應用程序，只是記住你可能會在一段時間打了一個安全上下文一次 - 不是很經常。然後在功能，我們就去了一些更多的那些，因為我們去。有種你會習慣的，你看到越來越多的應用UX 從Windows應用商店。你感受一下它們是如何工作以及如何設計美學往往工作在不同的應用程序和什麼人會被用來體驗。這是真正的重要組成部分。確保當他們啟動你的應用程序，他們並不需要閱讀一本手冊，他們永遠不會做，順便說一句。他們應該能夠開始與您的應用程序打並認定它沒有太大的困難。通過堅持，堅持了很多這些做法，你會做你的用戶一個大忙，使那更容易。好吧。在API的側最後一件事，然後我們將進入實際編寫代碼。的WinJS是我的事與复溜提到很簡單與你有製作應用程序的所有這些不同的選擇。的WinJS，你可以把它作為一個哥們。這是你的朋友幫你更快地寫東西。它只是JavaScript和CSS。您不必使用它。你可以使用它。如果你將要調用到Windows的功能，你最終會使用它，但如果有像一些設計模式或控制的事情，你真的不想用，你想用別的東西，它給你。決定要使用什麼和要使用的樣式。從命名空間和類生成的特徵 - 由你決定。如果你喜歡一個或另一個，這是完全由你決定。它仍然是JavaScript和CSS。但是，它會幫你做了很多的東西。例如，這裡有什麼可以做的一個子集，事情，比如幫助異步編程與承諾。任你聽說過或使用Node.js的工作？這是一個具有異步編程工作，常見的模式。所以基本上你說的是，“去做些什麼， “和你要給我當你做，你會回到我的承諾。” 這是本質發生了什麼事情。這樣你就不會凍結您的應用程序，而用戶是怎麼回事，並選擇一個文件什麼正在從Web流下來。用戶界面保持響應。你可以做，通過使用異步編程。這聽起來很可笑複雜，但它真的很容易，因為你使用的承諾而你只說，“去做到這一點，當你做，回調到這個方法。” 這幾乎是它。這是所有內置到的WinJS。這將使它更容易寫出真正靈活和強大的應用程序。你可以看到這裡的休息，很多動畫。可能是這張幻燈片上，更重要的事情之一是控制。我覺得我有一個整體 - 是啊，我做的。這裡只是一些你可以在你的應用程序中使用控件的一個例子。這是所有垂直向上從的WinJS。你是不是寫這些呀，你剛才說，“這是我要如何撰寫我的申請。” “我將使用一個翻轉視圖，這樣我可以在不同的畫面之間走了。” 我還沒有表現出你的語義縮放。我會告訴你，在第二。 ListViews。還有的GridView。你已經看到了一個網格，商店應用程序的一部分，所以能夠使用的內容塊和整個的滾動。彈出菜單，你會看到不時。應用欄我給你帶了新鮮的油漆應用為好，所以你看到了如何自定義，通過把上的按鈕並且具有躲避，當你不小心使用。這真的完全取決於你使用。這些是的WinJS的一部分，所有控件。我會告訴你如何在短短一秒鐘讓這些，但有更多的不僅僅是這一點，而關鍵是使用他們，如果你想要，節省一些時間。如果您有其他的控件庫，你想用，這完全沒關係。事情像jQuery UI做了很多的這種想法為好，提供更多的控制，擴展你可以在HTML和JavaScript做什麼。讓我們開始吧。我已經說過了。使用你喜歡的東西。只要記住，你可能會遇到一些方面的問題。但你一定可以混合和匹配任何一種你舒服庫，你想學，你要使用，以節省自己一些時間。讓我們來談談工具只是一秒鐘。你可以得到你需要開始使用Windows Store應用程序的工作。如果我回去了，我有太多的東西在這裡。如果你到這個頁面，這是dev.windows.com，你可以下載你所需要的一切。作為學生，您有機會獲得更多的比一般市民呢，這樣你就可以得到Visual Studio中的高端版本。埃德溫提到你已經獲得Windows以及。但在一般情況下，所有的開發者，你可以去這個網站並下載你需要的應用程序的一切，而且它是免費的。因此，有Visual Studio的免費版本，有一些工具，將一起安裝的是 - 你需要創建和測試應用程序的一切。只有當你要發布你的應用商店，你將需要一個開發者賬戶。這也是我認為是免費的。它是免費的學生呢？ >> [Guarin]哪一個？開發者賬號，實際提交。 >> [Guarin]是的。這是更多的好消息。你會去看看這個。它會在默認情況下說個別是為49美元。但是，不要報名，作為一個學生。我們將通過你的程序，你可以得到一個免費帳戶給你一些信息，並且，可以讓你再遞交申請一直到店，多達你喜歡，和所有善良很快就會跟進。所以這是dev.windows.com。您可以下載您可能需要從這裡的工具。如果你願意，你可以讓Windows的試用版在這裡，但同樣，你將不再需要。其他站點 - 讓我迅速點這一個你 - 是design.windows.com。這是dev.windows.com。 Design.windows.com，你能猜出它是什麼的。它實際上是一個非常友好的網站。有很多很好的信息在這裡。你可以通過它的工作。這將讓你對一些事情的一些建議也許你有沒有想過之前或收到處理，就像設計為觸控，設計不同的形式因素，設計為Windows 8的功能，這個事情我前面提到的像搜索和分享，有些事情，我還沒有談過呢。他們都列在這裡，這是一個相當不錯的一套有用的文件頁面這將有助於你了解如何使某一類型的應用程序，如何做互動，如何處理應用程序的UI和UX。我建議你看看這個，特別是如果你在某個時刻希望能夠發布應用程序商店。你會想知道如何使一個很好的應用因為我如果不這樣做之前提到的，再有就是那些評論。人們會不高興。他們將不能夠找到，他們希望在正確的地方的東西。沒有人希望這樣的事情發生到你。展望未來在這裡，讓我收了下來。現在，你知道從哪裡得到的東西，我會告訴你如何真正開始使用的東西。首先，我居然會在這裡告訴你我的開始屏幕上的桌面應用程序的一個例子。在這裡，您可以看到Visual Studio中，您可以看到Blend和其他開發工具，我有。它們具有略微不同的瓦片。這是因為它們是桌面應用程序，在這些情況下他們都將要推出回我的桌面真的就像應用程序，你已經習慣了。所以Windows的經驗，這是同樣的事情。他們都沒有，比如說像武裝！還是這些東西。讓我迅速啟動之一。其實，這裡有一個有趣的。這是由學生在NERD的通力合作，一起開發的。全屏應用程序，這些類型的經驗在這裡。哦，好的切屏和各種有趣的東西。他們開發了這個。我們不妨展示了整個事情，而我們在這。其實，我跟他們合作了一點點，給了他們對事物的一些建議因為他們做的JavaScript為他們的應用。拜託，我不是信貸對他們的工作，他們做了所有的工作。我只是給他們建議一點點在這裡和那裡，但他們通過使用JavaScript的前端做了一些偉大的東西和搭售一些物理引擎和活動作出了很多這項工作。去。讓我們看看是否能工程。哇，它仍然工作。好的，好的。但你的想法。一個全屏幕的應用程序，一個很好的經驗。這不僅支持我的鼠標和筆，如果我有這樣的事情，但也觸及。如果我有一個觸摸屏，我可以只畫到它，並繼續與合作。有一件事我沒有顯示出來，為什麼我提出這個問題的原因是我想有另一個應用程序告訴你什麼可以做，你其實可以在Windows應用程序，並將其拖動到屏幕的一側。這就是所謂的捕捉的應用程序。在這種情況下，我已經採取Inkarus，我已經把它添加到這裡邊。目前它在快照視圖，並允許我做其他事，而該應用程序是存在的。大多數遊戲中，你會發現只是簡單地暫停。這通常是一個體面的事情，除非你的遊戲可以在某種程度上縮小該小的分辨率，如可能為某種棋類遊戲或者類似的東西有時。但在一般情況下，最容易做的事情，最合適的事情做遊戲是暫停的應用程序。對於這樣的新聞應用程序的應用程序，如果我啟動這一個，然後我捕捉它，你會看到它實際上是在它是如何呈現數據，您顯著的變化。在這裡，它的真正顯示你在一個更垂直平移的信息，但我仍然可以完全使用該應用程序。因此，它仍然是非常有用的。事實上，它是在一個較小的視圖不阻止我使用該應用程序。所以，想想這一點。那就是你需要有你的應用程序確實在一定程度上的東西，但它是由你來決定你的應用程序的功能如何應在那樣的一個小環境。讓我關閉了一個下來，並重新回到我們在這裡。埃德溫，你加我的照片了嗎？ >> [Guarin]是啊。 >> [博文]你看那個。看到了嗎？埃德溫添加了一張照片。 [笑] 讓我們回到了這裡到Visual Studio中。讓我啟動這個給你。我可以點擊了瓷磚的開始屏幕上。它把我帶回進入桌面模式，它的啟動Visual Studio的桌面應用程序。這是你已經知道的Windows操作系統。我可以繼續在這裡創建一個項目。我們將再次專注於JavaScript的HTML。我要出去，並選擇在這裡下的JavaScript，Windows應用商店。有一些模板，您可以使用。對於生產力，我會建議你看一看其中的一些其他的在這裡像網格和拆分。他們是真正有用的，如果你正在做一個應用程序那將會有那種設計和導航。你會看到這些很多。就是我剛才給你看的竟是電網應用程序的實例。所以，如果你認為你將要製作的新聞應用程序或RSS閱讀器或類似的東西，隨著對你想顯示的細節多個項目交易，考慮使用這些模板之一快速上手並從那裡定制它。但是，僅僅這樣我就可以告訴你所有的運動部件在這裡我要創建空白的應用程序，然後我們會去一點點深入到細節。我只是做了空白的應用在這裡。它會為我創造了整個計劃。我打開了，我想在默認情況下，顯示你的東西。讓我拉近一點點告訴你什麼是對我們在這裡創建。那你要看看第一的東西，都命名為默認值。所以，你要尋找的default.html，Default.js中，並且是default.css。另外要指出的是，我們已經有一個參考一下我之前提到的。這是的WinJS。居然沒有人在這裡稱之為這個長名。它的WinJS，在Windows JavaScript庫。如果你打開它，你可以看到這一切都在這裡。有不同的CSS文件，還有JavaScript的。它的存在為您排憂解難。這真是有提供控件和樣式之類的東西，你可以只使用自動。但同樣，如果有您想要使用，而不是在造型和其他控制方面的東西，這完全取決於你。我會告訴你如何使用一對夫婦的那些東西現在。回過到我們的左邊，讓我告訴你默認的HTML頁面。你已經看到了的WinJS的東西，那就是真的那麼回事有與中間線的標記，只是把在CSS默認並把一對夫婦從的WinJS JavaScript文件。你並不需要是主什麼的那些文件裡面去的。這是非常有趣的，看看他們那種檢討什麼的在那裡怎麼回事因為有相當有趣的中級和高級的技術在那裡怎麼回事，但好處是，作為開發者，你可以利用它們，只是用它們而不是真的要擔心。您仍然可以駕駛汽車，而不必知道它是如何工作的，對不對？所以這是什麼樣的東西是怎麼回事。有控件和樣式之類的東西，你可以乾脆去和使用並且，你可以在第二個使用而無需知道什麼是在那裡的代碼。這裡有自己的文件。這些都是你的地方，你可以修改自己的CSS 和你自己的Java Script才能把事情滾動。您將添加一定的其他JavaScript文件，也許還有其他的CSS文件作為項目的增長，但是這是真的只是一個起點。這裡是你好，世界等價的HTML的，所以我們背在身上的標籤。在頂部，順便說一句，這是HTML5的doctype，所以你會認識到，從你一直在工作。有完整的IntelliSense在這裡為好，所以如果你在一個視頻標籤做的事情一樣類型並擴大了這一點，你可能已經了解了事實你需要做後援編碼視頻標籤在HTML5中 - 或者也許你有 - 以確保不同的瀏覽器對視頻的支持。我們有這樣的事情整個HTML，JavaScript的跨越，跨越的CSS。這是內置的，我會告訴你在第二的CSS。在這裡，你可以繼續前進，開始修改代碼，標記。其實，在我改變什麼，我要運行這個，並且告訴你你會得到什麼。你會得到一個閃屏，你可以自定義然後你會得到你好，這裡世界的經驗。這是夢幻般的，對不對？繼續前進，船，對吧？內容放在這裡。這是基本的東西。它只能從那裡更好。我們將繼續前進，在添加一些東西。我有標記的，我要在這裡複製一點點只是讓你不必看我打字。讓我去調出工具箱在這裡，我將針這一點，因為我會做這幾次。工具箱，如果你還沒有看到Visual Studio中，在這裡你會找到一大堆的控件。你也可以把代碼片段到它，你可以重複使用。在這裡，我將只流行在一些其它的HTML，沒什麼可怕的先進都在這裡。這只是基本的HTML，說我有一個輸入，我可以打字，我有一個按鈕，我可以提交它，然後我有一個div那本質上是一個佔位符我可以用它來輸出“你好，你輸入這個。” 這是介紹到HTML示例。如果我運行這個，我們自動獲取的HTML，但我們也自動獲得的造型。這是從的WinJS重要的事情之一。它會給你默認了一些外觀和感覺，真的是一致的與什麼的Windows 8正在做休息。在這裡，你看到的東西，如按鈕。默認情況下，在HTML中的按鈕不會像她那樣，但它確實在這裡因為它得到了正確的CSS從的WinJS的CSS文件。如果你想使用別的東西，如果你想改變這種狀況，完全罰款，繼續做你想要什麼。但是，這是默認的。這將是更多的為用戶所熟悉。這當然不會做任何事情，因為我其實沒有線了任何類型的代碼響應這一點。這只是在HTML。這樣我就可以擺脫這一點，我們會回來到我們的應用程序。讓我切換到我們的Default.js中。這看起來很複雜，但它只是在做一些事情給你。它的樣板。它會在所有的項目是相同的。這是做的唯一的事情就是那種問，“我怎麼會在這裡？” 並說，“你發動的第一次這個程序？” “你是從擁有它被掛起恢復應用程序？” 一對夫婦這樣的事情。真的，我們的重點就在這裡這個文件是對的在這裡。在這一點上，這一行代碼是非常重要的。它實際上要去，並期待通過您的所有標記，並且它要找到的東西，你已經問到已經變成控制，像一個等級控制，如網格視圖，如彈出更深層次的控制而且我以前向您展示了在該幻燈片其他的事情。他們不是原生的HTML控件。你就是不說彈出作為一個元素，並將它知道該怎麼做。其實我們做的是，發生在其他類型的控制架構是一樣的。 jQuery UI的做同樣的一種通用方法。你在你的HTML中使用的標記，然後一些JavaScript來通過後，說： “哦，我知道那是什麼，這就是要求這變成這個東西，” 這是其他更具表現力的HTML做出像一個分級控制，這是我會告訴你現在。這行代碼是一種承諾，是在說：“當這一承諾被兌現， “一切，你已經問了，然後被建立。” 就是這樣。它看起來有點複雜，但它確實同在每個項目中。下來在這裡你就可以開始在任何其他你想有發生增加，所以我們會回來，在第二。首先，我需要一點，可以這樣的事實做出響應的代碼已經有人點擊了按鈕。我要繼續前進，把在這兒吧。同樣，我不會做任何輸入在你面前在這裡。非常基本的JavaScript只是說當這被稱為我們將提供有關我們如何來到這裡的一些細節然後我們要做一些基本的東西。去找的東西在名為nameInput我的HTML頁面，抓住它，拿在它前面它的價值，一巴掌“你好”，並堅持認為得到的字符串到該div標籤，我們收到了真的沒有以前有什麼。現在，我們會發現，標記，並使其內含量等於該字符串。很簡單的JavaScript。希望你認識到，沒什麼好說的異常怎麼回事。這只是直線上升的HTML和JS在這裡。如果我運行這個現在，它仍然不會做任何工作，因為我還沒有連接起來接收事件。為了做到這一點，我會的就在這裡，再次回到我的工具箱，它突然出現在這裡。我希望你已經看到所有這些東西之前，所以我不會過分解釋。現在，我們要去拿helloButton。我們會說，“按鈕，表示祝賀。” “這裡就是你現在所響應的事件。” “當有人點擊你調用這個函數時，buttonClickHandler。” 這就是我們剛才添加的底部都有正確的減函數。就是這樣。所以，現在我們已經得到了一個令人驚訝的功能應用。我想你會為此而真正打動。克里斯。等待它。哇。好吧。這是驚人的。 [笑] 但是，還有更多。不買它呢。等待。讓我在這裡更告訴你一點點，並得到了全屏幕。我們要我們走之前運行。讓我進去，實際上告訴你用CSS一點點。只是在默認情況下，如果我們回頭看看頁面在這裡，每當我們在這些東西拉到離的WinJS，我們得到的UI暗，事實上，你可以將其更改為默認使用的光的應用。 UI暗是良好的圖形應用程序，如使用大量的圖片，你表現出了很多視覺內容。如果你表現出了很多的文本內容，用戶界面光通常是一個不錯的選擇。你沒有選擇它，但我已經切換到了現在你又看到了同樣的標記，同樣的一切，它只是使用基本上是一個倒置的方案在這裡這裡的一切正在對白色是黑色文本。這一切都很好。讓我離開這裡，讓我們實際做多一點點的CSS。我把它放回暗，因為我認為它可能更容易在屏幕上看到當我開始做這些事情。我要更換身體一次。我會去這裡。讓我用核武器炸了。讓我們把在體內的類。我相信你已經完成了CSS和類似的事情已經基本選擇，所以你大概知道這是怎麼回事。只是將部分類來我們的頭，我們正在創建一個新的div 來包裝這些東西，我們現在可以使用樣式一起休息。所以我現在所能做的就是去到我們的默認CSS。你看著媒體查詢了嗎？你有沒有在所有談過這個問題？媒體查詢是這一新興趨勢的一部分 - 或者它是一個既定的趨勢現在實際上在網絡上 - 為響應設計或適應性，而這個想法是，你的應用程序可以真正適當地調整自己依據是什麼，他們正在被顯示在該設備可以做到。所以，如果你是一個移動設備上，顯然你不會有盡可能多的屏幕房地產因為你將一個大的30寸顯示器上坐在同一個桌面，一個大的PC那樣。所以老答案將是有5個，6個不同版本的同一頁面而且你打開那個被調整為一定尺寸屏幕的版本。不是很大。這是非常，非常反覆，有一噸的維護做到這一點。現在我們有一些所謂的CSS媒體查詢，我們可以用它來自動檢測，當有一定的大小或者正在執行您的內容擁有一定的使用。所以，你可以回應這一點，你可以說，“好吧，在這種情況下， “你可能甚至不需要我來告訴你這是怎麼回事。” 這只是說，如果這個應用程序是啪的一聲，就像我以前向您 - 抓住它，並把它在屏幕的一側 - 然後讓我們做下面的造型。造型不只是顏色和類似的東西。這也是關於大小和頁邊距和填充和內容取向甚至禁用或啟用您的網頁的整個區域並且，在這種情況下，您的應用程序或遊戲，以及。所以在這裡，只要你想，你可以做的那麼簡單。這不會是在你的應用程序非常有用，但它的演示時間，所以我要繼續前進，只是添加在基體選擇，並說， “當我啪的一聲，讓我們繼續做背景色，讓我們選擇的東西。” 你有智能感知這裡。其實，這是真的很酷。在2012年我們已經對CSS的支持和JavaScript和HTML增添了不少的東西。當然，你得下拉智能感知過，但是這不是很酷的事情。最酷的是你已經有了視覺選擇的很多事情也是如此。所以，你可以去通過，只是選擇一種顏色，或者你可以走出去，更加具體，你可以選擇 - 這將是可怕的。我居然挑一個體面的顏色在這裡。看標記過，順便說一句。這就是你的RGB標準格式存在。但是，如果我切換的不透明度，它會切換到這裡alpha通道選擇器。所以，你可以看到，基本上與您具有該百分比透明的顏色就在那裡所有的出爐。我要保持它作為100％，然後當我與我做的，一切都很好。現在，如果我運行的應用程序，我們把應用程序和我們捕捉它，該背景色自動調節只是因為我們有一些CSS，上面寫著：“去這樣做。” 您也可以編寫JavaScript也將做同樣的事情或者，你可以用它來居然暫停遊戲，做這樣的事情。這可能是當你想使用JavaScript。你會關掉遊戲循環在這一點上。你需要一些JavaScript，因為那會不會是一些你會CSS的。但請記住，這只是一個事件。你可以說，“當我的應用程序的大小時， “讓我們看看如果我們斷了。”就是這樣。好嗎？我已經談了很多。是否有問題，至今對我們在哪裡？是啊。 [學生]有沒有教程，任何人都可以得到更多的信息？ >>呀。現在的問題是，是否有教程嗎？我只是把它擴展到一切。有幾件事情，你可以去。讓我們真正離開這裡。讓我回到了這裡。有一點需要指出的是Visual Studio中本身有內置的教程讓我擺脫這一點。如果你去創建一個新的項目，做文件，新建項目，並期待在左手邊，有一個在這個選擇的在線節點。這將需要一點點。我對我的MyFi在這兒。但它要來了，這是怎麼回事，給我一個機會，找到模板而且，更重要的是，樣品為好。這樣我就可以點擊的JavaScript。這將樣品找到我。我的解決辦法是高在這裡。通常情況下，你會在這裡看到了很多不同的事情的清單。如果有你想嘗試，挑選語言的東西，這裡的JavaScript，並說，“我不知道該怎麼辦的地理定位。” “我不知道如何打開一個文件。” “我不知道如何利用網絡攝像頭的優勢 “或優化的觸摸或類似的東西。” 有樣品的一切：分享，搜索，應用程序欄，實現遠程調用一個服務，JSON編碼。所有這些類型的東西有樣本在這裡，他們不是說要帶你整夜拉開巨大的樣本只是為了找到一件你想學。他們真的很不錯。它們很小，切中要害種樣品。我已經學到了很多我自己經歷這些，所以我建議很多，因為一件事。另一個要指出過，當然是我給你dev.windows.com，因此，如果你回去，你會在底部看到有也是在這裡的樣本。所以，你可以下載所有這些一次，但也有很多其他的資源在這裡也這可以幫助你加快速度。還有一件事，我真的建議你試試這個，我知道了，在我的博客，但我只是去對想。我會告訴你。我的博客有資源之類的東西。其中一件事要指出的是就在這裡，這個東西：你的想法。您的應用程序。 30天。如果你點擊這個，它會帶你到一個真正有用的網站。這比你所期望的更多的幫助。這將是含量30天那你基本上可以得到提示和技巧全因為你正在創建一個應用程序，過程。正如你可能想到，你實際上可以得到它的遊戲太和手機應用程序，這樣的事情。所以基本上簽署了它，他們會向您發送的提示和技巧， “你有沒有想過這樣做呢？你是否支持快照？” “下面是關於如何做到這一點以及一些指引。” “你有沒有想過提交到店裡？” “你有沒有想過如何你要推銷自己的應用程序？” 它會遍歷所有這些不同的事情。而實際上，如果你在遊戲的軌道，在某些時候你會開始認識你說話的人因為我實際上不得不去Redmint做那些並記錄2視頻那裡。但是，這所有的遊戲軌道的一部分，並且還有一個完整的軌道一般的應用程序開發。這就是所謂的新一代APP。我肯定會推薦給你聽，除了樣品。有很多的視頻在一個名為第9頻道以及網站。這可能是過去的事情，我會建議，以及之前，我們就搬到這裡。 Channel9.msdn.com。這是偉大的，因為你不打算通過噸白皮書進行閱讀。它基本上是一個很大的視頻，截屏和東西都切中要害。我不應該說這是永遠正確的地步。這要看是誰在說話。但是總體來說，有一些真的到了視頻點這裡會告訴你你可能想了解或看到全世界展示了一些特別的事情。還有我們所有的內容，從我們的發布會上說，幾個星期前發生的事情所謂的構建，你會看到在那裡。有核心技術為Windows 8的遊戲。你去那裡。我在那裡，其實。你看不到我。我是在這裡。不過，無論如何，那一邊，我建議你先看看這些影片。他們是相當有幫助的。如果你被卡住的東西或者你只是想看看有什麼事情可以做，那些火起來。 [Guarin] Windows Mail的只是給我發了一封電子郵件，鏈接到內容學生下載示例代碼和類似的東西。 >> [博文]大。真棒。謝謝你，埃德溫。好。 >> [學生]我有一個問題。 >> [博文]哦。是的，請。 [聽不見學生提問] >> [博文]呵呵，我很高興你問這個。是。現在的問題是，是否有可視化界面為我創造的東西？埃德溫將豐厚的獎勵你這個問題。有一種方法可以做到這一點。如果我們現在就做？讓我們現在就做。我打算去它現在。其實，讓我在一件事添加到該演示中，然後我會告訴你實際的答案。我要在多一點的CSS加在這裡。我是一個小關的切線在這裡。讓我把一些CSS這裡利用我們增加了一個前一陣的類，到頭部，向搜索Maincontent格，然後向greetingOutput。如果我這樣做，並運行它，你可以看到現在我們已經有了一點點不同的padding和margins，所以我們實際上有一些偏移這裡。這些都是更傾向於你將成為怎樣的期望最終拋光應用。但我只是顯示這個給你，因為它是直線上升的CSS。這樣的事情，你已經知道你可以用這裡，你要調整的內容。你已經看到了如何使背景改變了這種方式。如果我回去了，以我們的HTML，我要在一個更集中的標記的添加，這實際上是將是從的WinJS控制。我會去抓住這一點，一個標籤。讓我確認我在做它在正確的地方。可能不夠好。在這裡，我只是說 - 和我們一起去全屏幕，以便可以看到整個事情 - 我已經為下一個分區添加一個標籤。在div被稱為ratingControlDiv。它本身不會做任何事情。如果你打開這個在瀏覽器中，你會看空，則DIV本身。因為那神秘的線，我才向您的代碼，但是，該過程中的所有，它要尋找的東西，看起來像這樣 - 數據共贏 - 控制 - 而且它會發現無論是該參數。這將會使之不管它是什麼它指向一個實例。在這種情況下，它是一個等級的控制，所以我說，“請去代替這個東西 “與任何你需要做的，使一個等級的控制。” 這可能是一個翻轉控制，也可能是進度環或者您想要使用的任何控制。他們都將基本上相同的方式工作。您使用的是標準的HTML5標記來表示你想要什麼，然後你會得到一個控制在本月底。讓我運行這個。我只是複製在了，現在該標記變成這個，這實際上是相當多的HTML元素。這些都是個人的圖像，並有周圍的div與選擇。希望你可以看到。這是一個有點微妙。我可以將鼠標懸停在不同的項目，這將讓我看到的評級在這裡。我可以點擊它，它會記住的評級，但僅此而已。這不是真的做的評級東西。我想告訴你這個的最後一件事之前，我們切換到一個更直觀的設計體驗是代碼一點點，我可以用它來對這些的WinJS控件響應。讓我離開那裡，回到了全屏的，並切換到JS這裡第二。我能做到這一點就在這裡。我想我會代替這整個事情。其實，我認為它會取代所有的，但我們會發現在一起。我把這個在這裡。是啊。我要刪除這一點。我是怎麼補充？它看起來像一個不少。這不是很多。我只是延長該行的，我已經講過了之前的代碼，和我說，“當一切都完成後，當完成所有我的控制， “再這樣做。”所以，再運行該函數調用完成。在這種情況下，這是東西，你可以弄清楚。去發現，格控制。其實，有一件事我必須指出。那下一行實際上是說，“我明白了ratingControlDiv。” “我想跟它，好像它是一個真正的控制，控制的WinJS。” 所以基本上，你問的，從它。你說，“我想和你談談作為對照。” 然後你就可以開始說這樣的話，“我們將增加一個監聽器為你 “所以，當你改變了我們可以應對的。” 然後我們也可以做這樣的事情。其實，這是舊的代碼存在。我覺得我缺少粘貼在一個更加功能，這將是實際的功能，將在評價控制被改變作出反應。讓我彈出，在就在這裡，我身邊不遠。在這種情況下，唯一的新事物的事實是，我們正在進入什麼樣的等級控制告訴我們，我們正在要求什麼所謂的tentativeRating。有一堆不同的其他東西，該控件可以告訴你，它通過控制進入控制。這是非常簡單的。你就可以到任何弄明白沒有煩惱。我運行這個，現在當我改變了收視率和點擊的評價，你可以看到現在它實際上是應對它。它把該評級在屏幕上成，否則空的div標籤下面的等級控制。這是一個很大的東西在這裡的魔力了。所以當你正在創建的Windows應用商店的應用程序，有一噸的，你可以只使用控件。他們都像這樣工作。讓我告訴你在設計這些應用程序的可視化的一面。好消息是你已經有了這個工具，當您安裝的一切如果你去那下載，你會得到的Visual Studio。我可以用鼠標右鍵點擊這個。我不會放大。它只是說打開在Blend中。 Blend是的作品並排與Visual Studio的另一個工具並更加專注於事物的設計方，所以它確實的表面，用於創建樣式優化工具，創建動畫，使用CSS，很多東西在那種靜脈。在這裡，我應該會很有趣，很明顯馬上就是我們正在尋找的應用程序。希望我們現在仍然是。而不是看到代碼，我們仍然看到在底部，我們看到應用程序的實際表示。更重要的是，它不是應用程序只是一個代表，它實際上是應用程序的運行。而這正是真正的好話混合。該團隊已經做了很多工作，使HTML和JavaScript和CSS這個工具。現在，你可以實際，如果你好奇，“這是什麼意思？我該怎麼辦？” 我其實可以設計這個應用程序，儘管這樣的事情在我的標記是不存在的。請記住，評價控制？這只是一個div標籤。這東西，那顆星，只存在於運行時。我怎麼知道？有魔法在這裡一點點。看到這些閃電？你看到閃電的任何時間，這意味著它是由一些在運行時創建的。一些JavaScript跑去翻東西到這個或一些邏輯創造了這個。你看到有由JavaScript的創建者的WinJS那些明星。的好處是，它並不重要，我，我還是可以把它設計，我仍然可以去改變它，我可以找出哪些是怎麼回事，我可以看看CSS的，我可以繼續下去，並找出為什麼顏色是事情是這樣的，我可以開始搞亂的東西和做的事情太可怕了，無論我想做的事情。其實，當我離開的事情孤單。但是你可以在這裡看到它的所有CSS和它在這裡展示您。如果我去到那裡，它會告訴你，他們叫勝出的一切，這樣的CSS規則是最具體和最選定該項目，您可能已經走了過來在你的類，在那裡你可以說有，我們正在運用一切一般的字體，但因為這是一個h1和我有H1S定義的顏色，這將是這個顏色，那是因為它比BODY1更具體。這一件事情就在這裡告訴你這一切，它的真正功能強大的東西，因為你變得越來越複雜，你想知道為什麼這些東西是他們的方式。它實際上會告訴你，你可以選擇這些項目的任何位置。顏色是不是太糟糕了，其實。你可以選擇它們。希望你能看到這一點。對於您對您的應用程序的一切，你看到整個級聯的所有可能應用到該和哪一個CSS是贏球，其中一個居然拿了優先。種這些無聊。有沒有很多在其中的一些事情。如果我去改變顏色，那麼你會開始看到一些級聯那裡。您也可以使用HTML在這裡。我可以通過和修改所有這些事情的HTML屬性，我想。這裡還有噸的東西在這裡。我不希望由經過這裡的一切把你的時間。只知道它在這裡。有很多的設計為導向的功能，只是為您提供這樣你就可以保持視覺，與應用程序的工作，而不必做了很多猜測那你就必須正常，做騎自行車從瀏覽器的後退回到您的設計，返回到瀏覽器。這實在是很酷的東西是什麼，以及在開發一個Windows應用商店的應用程序，這將讓你有更多的生產力。您還可以看到它在這裡跟踪標記和你的CSS 因為你通過不同的東西的工作。這可能對你來說很難看到，尤其是在視頻，但是這就是是怎麼回事，我會建議你熟悉的。它會為你節省大量的時間。這就是混合。如果你在這裡做任何改變，它們會自動去扛回來了到Visual Studio。這是相同的文件，它是相同的一切。我會獨自離開了。我有一個更好的例子，我想告訴你。但是，如果我做出了改變，並有保存它，我回來到Visual Studio中，它會說， “嘿，你只是改變了一些事情，我可以重新加載它嗎？”是。和你使用的是同樣的東西在那裡。這就是該特定樣品的末端。我想告訴你一個更高端的樣品只是給你的其他功能的視圖你可能會考慮一下為好。這是一個示例應用程序，您可以下載。如果你看的東西叫做Windows的營一箱，也有一些樣本是在說了，其中一個是在Contoso食譜。我可以只運行這個給你。自定義開機畫面。這是網格視圖的應用程序。他們已經在這裡綁定了一些自定義數據。你可以通過這個導航。你可以去看看各種各樣的事情，這將使我們在星期五下午餓了。我不知道。這是怎麼回事，讓我最餓了嗎？我不知道。我只是要挑一個。你去到這些東西。它會告訴你幾招。而不是單擊某個項目，你也可以，，你可以去權利這一類的內容，內容的部分。在這種情況下，你可以閱讀大量的假的拉丁告訴你所有關於這些食譜在這裡然後直接進入到具體的配方。這也支持這樣的事情我以前向您展示的圖片共享。您還可以搜索到這個應用程序了。這是非常簡單的做搜索。基本上，你剛剛從Windows中的文本字符串你決定要如何處理搜索這一點。它是幾行代碼來獲得，然後之後你用它做什麼完全取決於你。在這裡，他們也有他們使用的是其他一些功能的應用欄。我只是告訴你它是什麼。提醒一下將要使用什麼所謂的Toast通知。這是非常方便的讓用戶知道什麼時候事情已經發生了，像一個應用程序被安裝或某事完成。這也是很好的遊戲了。如果你有一個持久的世界或一個領導委員會，並在主控一項服務，也許一個單獨的機器上，這些通知可以發送到一台機器即使用戶不使用你的遊戲，你玩遊戲或運行你的應用程序，他們仍然可以得到有關這些類型的事件通知。所以，你可以說，“你的城堡已經被破壞或只是摧毀。” “回到這裡，並保護它，”或者類似的東西。你點擊通知，你去右後衛進入遊戲，你可以發揮它。所以這些類型的東西可以幫助真正吸引人們回到你的應用程序相當有效。還有支持此應用程序中使用麥克風，攝像頭，做視頻和拍照。您還可以鎖定一個次要的瓷磚。如果你只想有一個瓷磚的順利，某些內容是有用的。在這種情況下，這是不言而喻的權利這個食譜。一切我提的，我只是展示因為它的東西，你可以考慮使用為好。在大多數情況下，它們是非常容易使用。我只是建議你帶出該樣品的探險家並找到一個樣本，可以告訴你如何做到這一點。這是很簡單的把那些到你的應用程序也有。我要告訴你一件事那是很酷這裡。我會捕捉這個應用程序，我會回去的Visual Studio。此應用程序正在運行。它從Visual Studio中運行。我可以做一些很酷的東西這一點。我其實有一個選項來選擇一個元素，我可以走了過來這裡的現場應用，我可以說， “我不知道為什麼是準備時間比標題本身有點淺灰色？” 我可以點擊它。它會同步處理返回到Visual Studio中，並且它會告訴我確切，導致在UI的那部分所產生的內容。因此，在這種情況下，它的項目，字幕和H4雙結構，且有可能告訴我們什麼，我們需要知道，因為作為該範圍內的H4，它會得到某種字體。但是，如果我仍然不知道為什麼，我可以點擊跟踪樣式。然後我就可以擴展出彩，我可以找出到底為什麼顏色是不是身體顏色但實際上是另一回事。這實質上是從Internet Explorer的開發工具要帶入Visual Studio中一學位。如果你用Chrome瀏覽器開發工具的工作，螢火蟲，那樣的話，這些類型的工具，是在瀏覽器中，那種功能已被帶到右到Visual Studio 所以你實際上並不需要啟動瀏覽器，並用這些工具獨立工作。現在我有一個Windows應用商店的應用程序只是運行，而我就可以開始拉它拆開，找出為什麼事情正在做什麼，他們是。我也可以這樣來做了。我可以去隨便挑右的東西從標記，並找出它是什麼在應用程序本身。我想我已經過去了的一切。在這裡，我徘徊在此。我可以選擇它。它會告訴我在實際運行的應用程序，其中那個東西是那我現在在點擊了標記。真正酷的東西。當你正在試圖弄清楚這是怎麼回事，什麼HTML是幹什麼的，什麼是CSS是幹什麼的，記住這一點。請記住，這是為你在這裡同時又有Blend可以用一個實時運行的應用程序的工作。的最後一件事我想告訴你用這個應用程序 - 順便說一句，就說明你的增量隨著事態的變化太大，所以你可以看那些黃色的亮點。這些都是剛剛改變了應用程序的東西。但最後一件事。我想回到這裡混合只是一秒鐘。我們會打開這個了，開在Blend中，相同的應用程序，同樣的一切。我只是想告訴你這裡的經驗是不是只是你被困在主頁上在看的東西，你會在默認情況下得到，當您運行該應用程序，並讓它坐在那裡。您還可以打開這個漂亮的小圖標在這裡。這就是所謂的互動模式。你點擊。它會帶給你的應用程序。你不是在設計模式了，所以你不會被點擊的東西改變功能，但實際上你可以與應用程序現在的工作。您可以通過點擊，你可以做什麼，得到您關心的食譜或到一個類別。讓我們去到這一類。我會說：“好吧，這裡就是我想設計。” 然後再次單擊該按鈕時，它會帶給你回到設計表面，現在你可以做所有這些事情，我之前講的。我會繼續點擊，直到我得到這個選擇的，找出它的尺寸，找出HTML它，的CSS，它正在運行的應用程序，該應用程序的一些後期。非常，非常有用。我將展示給你。請記住這一點，如果你正在尋找與這寫代碼因為它會為你節省很多的麻煩，而且它是相當不錯的東西。這幾乎是所有我想告訴你在Blend和Visual Studio中的一切。在任這些工具有問題嗎？什麼呢？ >> [Guarin]我有東西給出來的，所以好問題，好東西。 [博文笑]我已經向您展示我的演示在這裡。我打算把它放在資源頁面上轉來轉去的問題了。首先參考的是，新一代APP網站的遊戲賽道和應用程序的軌道。報名者。您不必等待30天獲取內容。您可以開始準備，並著眼於內容如你所願。我理解你的時間框架可能比不同 - [笑] 因此，當是Hackathon？這是幾個星期，對不對？所以，你沒有30天等待。所以是的，你可以註冊為，然後就開始從它拉出來的內容。還開發和設計中心。我並沒有提到這一點，但也有在商店的文檔。這將是在Hackathon之後，你就可以開始提交您的應用程序的商店。有一些有用的指導，介紹了如何把事情進店一些指導，可能你絆倒的一些常見問題，這就是那些資源的末端。那麼什麼是您的想法？其他任何你 - [Guarin]誰在想著做一個Windows應用程序的CS50？涼爽。 [博文]酷。大。關於你見過這麼遠的東西，它是如何有任何疑問涉及到這？舉例來說，有更多的時間，我可以把我寫的一個遊戲並運行在瀏覽器中，只是一種經歷的過程使這一到Visual Studio中，並使其成為一個Windows應用商店的應用程序中。它需要更多的時間比我們真的有今天包括，但短版是它的，你在瀏覽器裡運行相同的代碼，而且你改變的事情是你決定插入到Windows 8的東西。所以，如果你想要使用的魅力，如果你想搜索或分享，您需要創建一個應用程序欄隱藏了一些功能上說，這些都是各種各樣的事情，你會改變。但你的web應用程序的核心可以保持不變。同樣，只要它工作在IE10，這將是一個非常簡單的端口把這些東西到Visual Studio中，為混合，並使其成為Windows應用商店的應用程序。同樣，你將需要學習的唯一的東西是那些其他功能您可以用它來點亮一個應用程序，就像一個活的瓷磚和這些類型的東西。是啊。 >> [學生]我的問題是關於工作的移動。所以，如果你做一個應用程序，可以作為一個應用程序在桌面上，是不是真的很容易將其傳送到手機，或者是有一個 - 現在的問題是，如果我做一個Windows應用商店的應用程序，是真正為這個環境優化我想將其帶到一個移動的世界，什麼是參與這樣做？也就是說，像許多問題，始終是一個不斷變化的答案。好消息是，如果你堅持使用HTML和JavaScript，CSS，如果你是從Windows Store應用出發，這將讓你把它給Web 然後使用這些類型的技術，如媒體查詢和事物，以適應不同尺寸的設備。儘管如此，總有框架和東西在那裡這種支持延伸出不同的技術，不同的平台。那時刻都在變化。我們也正在改變的東西，以及我們仰望我們現在實際上用的Windows Phone 8。我們有一些共同的核心基礎架構對於這些環境的應用程序之間提供。所以，你正在做創建一個Windows應用商店的應用程序的東西，很多的，可以結轉到Windows Phone 8的應用程序也是如此。這又是一個新興的故事，所以有關於在構建一些內容。該SDK只是一小會兒前下了車。這只是一小會兒前公佈。但在其他平台也條款，你可能會遇到很多的跨平台框架以及。好消息是，你在這裡做的東西，核心功能是直線上升的Web標準的東西。這不會容易翻譯的唯一的東西都是Windows 8做的事情，不過這並不奇怪，因為它是一個Windows功能。你不會找到任何其他平台上共享或類似種類的合約。因此，這些都是，你會想從設計的角度看事情請確保您有辦法那種抽象的，所以你可以說， “如果我在這跑，我能做到這一點。” 如果我不在，有一些設計模式，你可以用它來種隱藏的東西了。但記住這一點。是啊。抱歉。來吧。 [學生]如果我想測試在[聽不清]頂我的Windows應用程序 [博文]是啊。我跳過一件事了。是啊。我先回答你的問題，那麼我會告訴你一個功能，我忘了提。我們確實有一些可用的機器上本地。對不起。現在的問題是，我怎麼測試的東西上的設備如果我不碰巧有一大堆的事情，不知如何選擇？ [Guarin]我們為您借給你們，我想，5或6。有多少你需要什麼？ [學生]我們得到了4人。 >>好吧。你們得到了4石板玩弄。所以，絕對讓大家知道，謝謝。 [笑] >> [博文]真棒。這是一個更好的答案比我正想給你。我們的辦公時間為開發商，我們做在我們的辦公室而現在即將推出的微軟商店對在保誠，但埃德溫已經採取照顧你。有4個石板可供借出，進行測試。我們走吧。有一個在那裡一個例子。所以是的，絕對。大。絕對遠遠測試它的最好辦法是做一個設備上。如果不碰巧有一個尚未或想在校園行走在雪地裡你不搶一個或什麼的，還有一種方法可以做到這一點早在Visual Studio中。而不是使用本機，如果我重新回到那裡，我在這裡，在這裡，您可以連接到遠程計算機，但是這不是我這裡所說的。模擬器是，你可能要考慮的東西。我要跑這一點，真的它是什麼，它本質上是一個窗口到您自己的系統。這裡其實是我的系統運行，運行Contoso公司，但在某種程度上，讓我改變一些執行參數，的環境參數。所以我可以在這裡說，“你知道什麼？” 呵呵。我已經有它運行在一個模擬的27英寸顯示器2560的分辨率。我可以很容易地降下來，看看我的應用程序將與一個較小的屏幕做或者通過更改DPI設置或什麼的。因此，在一個小屏幕，一個10.6，它是什麼怎麼辦？這看起來還是蠻不錯的，對不對？你要做到這一點，特別是如果你要提交到店裡，因為我們做的作為測試過程的一部分。如果有這樣的問題，那麼你可能會遇到獲得認證的存儲問題。但是，這是模擬器的一部分。真的很酷。很容易做到這一點。您還可以使用的功能，如旋轉它。我可以按一下按鈕，在這裡，有它旋轉，見什麼人會有作為一個經驗旋轉的石板，他們的平板電腦，並使用您的應用程序與。還有一些其他的事情太像觸摸仿真和一些其他的東西，設置GPS。我可以假裝我在不同的位置，看看我的應用程序的功能當我假裝我回到西雅圖什麼的。但它是一個非常有用的功能，它的內置於Visual Studio和Blend中。是。你的問題。 [學生]如果你正在編寫一個遊戲，它的Visual Studio有任何動畫的支持？是啊。現在的問題是各地的動畫支持，特別是遊戲。這要看情況。 [笑] 與JavaScript的我會說有可能是支持少比沒有對XAML的一面，其中有時限，有故事和那些內置的東西有關JavaScript的應用程序的動畫，我不知道我該怎麼回答他很想給你。我有一個經歷了很多為物理動畫的選項在我的博客資源，選項在Windows 8的JavaScript的面向遊戲。我想請你到這些。基本上，有這麼多的選擇。我猶豫的原因是有做動畫用JavaScript這麼多的選擇。它可能是CSS，它可以被帆布基，它可能只是基本的DOM動畫它可能是一個很多不同的東西，所以它實際上取決於你的選擇。如果您決定使用類似Create.js或石灰或其他類型的框架 - 嗯，我什至不知道你要能夠使用較高端框架喜歡衝擊或構造。這往往會產生比你可能會考慮從頭開始更多的代碼。不過，在這些情況下，您仍然可以使用一個模擬器，你可以使用的環境，我傾向於只使用這個環境，我的測試平台，在這種情況下因為我正在開發的遊戲。我一直特別細帶帆布動畫，這可能是最常見的事。你將可能發現最好是在瀏覽器的開發工具並在Visual Studio中的開發工具。樣的曲折答案，但希望我得到你的答案。是。您。 [學生]什麼是Windows 8的應用程序的數據存儲選項？什麼是Windows 8的應用程序的數據存儲選項，Windows應用商店的應用程序？你的選擇真的是每個應用程序都有自己的本地存儲池用於設置和數據，但它也是可笑的易於使用的漫遊存儲，使用基於雲的存儲。它是免費的。什麼情況是你基本上選擇不同的類，你說， “漫遊設置，保存，這組特定的內容，” 和他們的Microsoft帳戶，無論他們在已經簽署的，將是關鍵漫遊周圍的信息。所以，如果我用你的遊戲我的筆記本電腦，然後我用相同的帳戶登錄和我打在表面上的遊戲或片劑，它會自動漫遊那些機器之間的設置和數據。這是一個默認的事情。這是很好的數據一定數量。你不會把一個龐大的數據庫到這些。對於那些你需要去其他類型的解決方案，就像在雲中託管的數據庫，這樣的事情。周圍有其他類型的數據技術的一些其他社區的選項。我已經看到了在社區周圍還有一些SQLite的選項了。所以越來越多的不斷湧現，但這些是主要的事情，你會仰望遊戲或應用程序。而你又在後面一個問題了。 [學生]在網絡方面[聽不清]上傳或下載文件[聽不清] [博文]是你的問題，你怎麼能看到，不然你怎麼能調試和測試它？ [學生]你如何調試呢[聽不清] 抱歉。我不能聽到這一切。 [學生]你怎麼得到它的bug測試和也[聽不清] 大。大。你如何與網絡合作？你怎麼能看這是怎麼回事？有許多不同的答案到這一個，但讓我告訴你可能是最簡單的東西在這裡。讓我擺脫了模擬器的一秒鐘。只是一對夫婦的調試選項進行聯網。還有烤右進WinRT的水平，並從兩者的WinJS一個完整的網絡協議棧，這樣你就可以很輕鬆地進行XHR，AJAX類型從您的遊戲或應用程序調用來做到這一點。首先，我傾向於使用兩件事情。我用的是實際的開發工具本身，其中有烤到他們的網絡堆棧。讓我告訴你Windows的主頁。我提這件事，而且也確實烤到這裡這些工具網絡代理。因此，我可以做到這一點，我可以刷新頁面，它會告訴我所有的相互作用，該屆會議，包括AJAX調用，該請求的時間。這是有用的。這將是基於瀏覽器的應用程序非常有用。對於其他類型的應用程序，包括Windows Store應用程序中，我使用了一個名為Fiddler工具。你會得到一個遊戲響應。 [笑] Fiddler是一個簡單的代理。我想我可以證明給你。這只是GetFiddler.com，其中，有趣的是，我跟踪我的網絡協議棧要GetFiddler。不過，無論如何，提琴手已經寫入了對IE團隊的項目經理之一，所以他知道自己在做什麼。這是一個很好的代理，您可以使用用於調試網絡流量。我建議。問題在那裡了。 [學生]有沒有一種簡單的方法來將外國語言輸入，像日本或中國，進入Windows的應用程序？我不能說我已經做了我自己了吧，但它烤英寸有用於發射過程中您的應用程序的選項 - 我很抱歉，我沒有說這個問題 - 圍繞全球化的選擇，內容的本土化，包括像能夠在不同的市場銷售並針對該版本的應用程序對於那些個別的語言或文化或類似的東西。絕對是內置的。我們已經為支持永遠，並發揚到您選擇Windows應用商店。你可以這樣做，在商店本身，賣在不同的市場，你可以做到這一點的應用，以及太使用的資源來定義， “如果我開發了這種文化，然後使用這些替代我的文字內容 “或者使用左讀者的權利。” 這些都是默認的WinJS和WinRT的API的一部分。好問題。我們做得怎麼樣？任何其他人呢？如果有人對視頻有問題，我cbowen @微軟，所以我很高興把您的任何問題來自未來。非常 - 從未來，未來[模仿呼應。因此，這裡是我的。讓我放回我的聯繫方式在這裡。所以只是給我一張紙條，cbowen @微軟，我會盡快給你，只要我可以。其他任何你想知道？我們是否良好？大。好的。謝謝大家了。我很感激。 [鼓掌] [CS50.TV]