[Powered by Google Translate] [講座] [Web開發：從理念到實踐] [本庫恩] [比利Janitsch] [哈佛大學] [這是CS50] [CS50.TV] [比利]你好，我叫比利，這是本。 >> [奔]你好。 我們今天要談論的Web開發。 [WEBDEV] [比利Janitsch和本·庫恩] 關於我們位在前。 本是排序的後端的傢伙。他做事情的工作。 然後我進去，讓他們漂亮。 我主要是參與更前端的佈局設計類的東西， 和Ben，而另一方面，知道自己在做什麼，所以他的作品在後端的東​​西。 我們一起做了幾件事情。 舉例來說，去年我們曾在Gimblium這是一個網絡遊戲開發工作室。 這是我們的最終類項目， 從那時起，我們已經取得了哈佛大學類 這是用於瀏覽和購物的課程在哈佛大學一個在線的框架。 我們要開始這個想法為我們的網站。 我們將讓Facebook，但對於貓。 在你真正做這個網站， 不要讓這個網站，因為它不是很好，但是我們將使用它作為一個框架 並通過我們如何把這種想法的過程 並把它變成一個真正的網站，我們可以使用。 我們將通過打破網站下載下來的開始。 就像你一直在做的CS50， 你要想想什麼是進入這個網站上的實際組件。 基本上是從一個想法，就是那種一個抽象的概念，把它 成為一個真正的，實實在在的東西，你可以做。 我們通過問一些問題開始。 這是什麼網站？我們為什麼做呢？ 什麼是它會被用來做什麼？諸如此類的事情。 在Facebook的貓的情況下， 我們基本上希望有一個網站，讓貓的社交網絡與對方。 的想法是，他們可以張貼對方的牆壁上， 他們可以提出意見，諸如此類的事情。 而這也正是我們進入的功能組件。 我們現在有這樣的框架 - 我們的用戶配置文件， 我們有意見，我們可以發布。 也許有一天我們會進水的喜好和諸如此類的事情。 樣的，我們要優先考慮這些特性去英寸 我們想說的一樣，好吧，這真的很重要，每個人都有一個配置文件 而且每個人都可以發表各自的牆壁上。 次要的是，意見將是很好。 也許以後我們會進水喜歡。 所以，你想擁有一個什麼樣的基礎到項目的想法 這有什麼樣的，可以在以後應用於更廣泛的功能。 你要排序的有一個特定的列表記， 但你開始這個項目不會是你完成的項目。 換句話說，事情會你正在開發的網站，而改變， 並且要留有餘地的。 我把它交給奔誰去談談結構。 [奔]我要談論Web開發的更多技術方面。 讓我們只是去了一些基礎知識第一。 當你在做一個web應用程序， ，你將不得不具備的主要分工是 你將有一些東西在客戶端怎麼回事 - 那就是，你的瀏覽器代碼需要從網站 和JavaScript，HTML，CSS的東西。 這是所有客戶端上。 你將有一個在服務器端運行其他代碼 它記錄所有的人發送到您的數據， 決定誰給什麼，這樣的東西。 這只是一些術語，讓你們都熟悉我們正在談論的。 除此之外部門它的好，想著你的Web應用程序中的條款 一對夫婦不同的分量。 當你在做web開發 那你應該總是嘗試做的事情之一是降低複雜性。 更複雜的代碼是更多的機會存在，使臭蟲， 就越難以後更改。 所以，如果你能打破你的應用程序到一些不同的功能區 即會 - 你可以減少跨區域的通信量的排序 - 這將幫助你很多，從長遠來看減少錯誤方面。 要具體，通常人們瓜分了一個Web應用程序到 - 這是種時髦詞了​​，但他們仍然有用。 你可能聽說過人們談論的模型，視圖和控制器。 模型是您的應用程序將要處理的實際數據。 例如，在你的貓的Facebook，你的模型將是 - 你有一個模型一樣的帖子，和一個模型為用戶配置文件，這樣的東西。 您的意見是你如何展示數據給用戶。 你可能有1視圖尋找一個崗位，所有的評論 和不同的觀點對你的牆具有所有文章列表 定向到你，並有不同的看法為您訂閱 - 類似的東西。 最後，你有這是基本的控制器，當人們發送給您的帖子 和您更新您的後端系統， 你增加了一堆櫃檯，和什麼的。 這些都是你的控制器。 ，我將要討論大部分是關於模型。 意見在技術上並不困難，問題是多與他們的設計 控制器將要具體到任何你正在設計。 但也有一些可以使用相當普遍的技術 讓你的模型更好，更容易與我認為是非常有益的工作。 這主要是將是如何處理你的web應用程序的數據在一個不錯的方式。 配車型的主要問題 是他們生活的客戶端和服務器上，你必須弄清楚 一）如何讓他們 - 所有相關的人 - 從服務器到客戶端， 和b）如何使它們保持同步。 你的用戶會想要做一些更新。 他們將要進行新的帖子。 他們將要喜歡的事情和東西，如果你有喜​​歡。 這些都是處理模型的主要技術難題。 那你會想要問自己的第一件事就是 什麼樣的數據去在這個模型中，並且我們要什麼樣的查詢到想要做的 - 也就是說，我們怎樣看的機型？ 為了您的貓的Facebook為例， 您的文章將不得不與它相關聯的作者， 有些牆後的文本，以及壁後的收件人。 然後你可能要質疑，在一堆不同的方式。 你想看看它通過誰寫的帖子， 通過誰收到的發布，也許通過他們發布的日期。 但如果你打算按日期做，那麼你必須到另一個字段添加到您的文章 當它實際上是發布。 這2個因素 - 你想要什麼樣的數據使用，你怎麼想觀看 - 你應該想想他們首先是因為他們互相依賴， 而這將更加難以將它們以後。 還有一些其他方面的考慮。 當你思考你如何處理在服務器上的模型 你想看看什麼是 - 基本上你想使服務器盡可能的簡單。 在客戶端做的東西一般是，如果你能完全做到這一點的客戶端上要快得多 沒有做任何形式的網絡請求。 我們的想法是做盡可能多的疑問，你可以在客戶端上。 與唯一的問題 是，如果您要求您的所有數據在開始 那麼那將需要很長的時間來加載。 所以，這個想法是要在有足夠數據在客戶端之間的折中 你可以做大部分工作，但還有不只是獲取面面俱到 使您獲得真正慢加載時間在開始。 例如，你的貓的數據 你可能會想取一串最近牆崗位。 你不會想獲取所有的人，因為這可以回去了幾年。 但你不想要獲取它們一次一個 因為這會引入大量的網絡開銷。 它往往相當困難 - 一旦你有一個數據庫運行 - 它往往相當難改你在它什麼樣的數據 - 也就是說，添加一個新的數據庫列或某事 - 所以一個好的策略實際上只是保持你的很多數據在文本BLOB - 一個JSON的blob - JSON是JavaScript對象符號 - 究其原因，是非常有用的，因為你可以添加新的屬性 所有這些斑點的JSON不改變你的數據庫。 唯一的缺點是，如果你有一堆領域 那你後來加入 - 就像隱藏在JSON一滴 - 那麼它很難在數據庫中查詢它們。 舉例來說，如果你以後 - 如果你有你的模型後，我們前面討論過的 只有作者，收件人和文本 - 你也可以有一個JSON的blob，然後，如果你以後想添加一個日期字段 你不會有改變你的數據庫。 你可以只添加日期以所有文本字段。 然後你就可以看看那些在客戶端， 但你不能夠查詢它們在服務器端 因為它是隱藏的文字裡。 要思考的另一個問題 是如何你的客戶和你的服務器要溝通。 你通常希望保持這種盡可能簡單。 你可以有這樣一個get - 我 - 這個數據請求， 一個建立 - 一個全新的對象的東西，以及更新，一個歷史的對象的要求。 而這些都將是一個服務器上的不同的URL，你 - 瀏覽器會 - 你可以使用AJAX請求所有這些 而無論是接收或交的數據。 再次，我們的貓的Facebook為例， 你可以有這個URL來獲得一個單獨的職位， 而且你已經有了一個URL來創建一個新的牆後 也許您上傳個人照片，這樣的東西的URL。 但同樣，這是預先取得大部分數據，這樣你就不必繼續 使得網絡請求。 出於這個原因，你可能不希望有一個帖子說個人get請求， 而是你只是想在整面牆1 get請求。 然後，如果你想取得一個平衡，因為 - 這也將取決於您的應用程序。 因為如果你期待的人只有10或20牆職位 這將是罰款。 但是，如果你希望他們將有成千上萬的那麼請求將花費太長時間， 所以你可能要添加一個獲取 - 所有職位 - 因為參數。 對於所有這些你可能會想同步您的數據以JSON - JavaScript對象表示法。 幾乎每一個語言處理JSON的非常好。 jQuery有這個漂亮的getJSON函數，會做所有的辛勤工作的你。 並在PHP中也是非常不錯的JSON通信功能。 所以，這可能是用於發送您的模型來回的最佳格式。 由於我們已經談到，到目前為止的例子， 這裡是你的貓的Facebook應用程序的示例流程。 它與您的瀏覽器請求的基礎網站的網址開始起飛。 該服務器可能會發送過來的靜態HTML和一些JavaScript和CSS。 它通常最好不要在服務器上做任何渲染。 您可能不希望 - 什麼樣的服務器是不是做有下降的牆職位列表 並產生一些HTML為每一個和發送該結束了。 它通常是最好做在客戶端上，否則 你要重新繪製的東西每一次，你必須做出一個服務器請求。 而這很快為您提供了大量的開銷。 它通常是最好的只是船降下靜態HTML 然後JavaScript和CSS，會做在客戶端的呈現。 只要這些東西進來， 那麼你可以有 - 在JavaScript - 你能為牆面做數據的請求 之類的東西，之後，服務器基本上只是在做數據庫查詢 並檢查權限。 唯一重要的事情是，它不能發送超過其他一些用戶牆職位 那你不許看。 它可以基本上是一個非常薄的接入層到數據庫， 然後將所有的顯示數據 - 所有的意見和東西 - 那些可以在瀏覽器中發生，然後當你想使一個職位或某事 你只是發送另一個請求。 還有一些花哨的東西，你可以在此之上做。 在更具體的技術信息方面， 在普通的JavaScript開發可以是一個有點痛苦的， 所以有一些庫和工具，這將有助於你一個不少。 我想你們都可能聽說過jQuery的，這使得做的HTML渲染 和操縱方便很多 - 有很多花哨的功能淡入淡出， 和做比比動畫。 還有這個庫稱為Underscore.js。 它有很多有用的實用功能，的東西，你會期望JavaScript才能有 它真的doesn't - 比如洗牌數組， 從列表中刪除重複項，或壓扁列表的列表。 這只是一個小的代碼示例。 底線有一噸，你希望你把所有的時間這些漂亮的功能。 再有就是1，我想花一點點時間對多個庫 所謂Backbone.js因為骨幹確實能幫助你處理在客戶端模式 和很多的混亂，它可引起。 骨幹網為您提供的模型和集合這個概念 在JavaScript中它們基本上完全一樣的JavaScript對象 在JavaScript數組，但他們有，當你改變它們的屬性事件。 就像在JavaScript中，你可以有一個事件，當按鈕被點擊或某事 這些骨幹模型和骨幹的集合將廣播之類的東西 當他們改變。 這意味著，你可以只寫這樣的事情代碼片段在這裡 - 這表示，當你添加任何職位陣列您重繪整個牆面。 這可以說只要喜歡的文章的數量變化， 你通知有人喜歡他們貼的用戶。 或當某一職位的任何屬性更改您重繪後。 這樣的東西，將節省您萬噸的複雜性，因為否則 如果你不那麼每個代碼中的時候，你必須改變這樣的一些框架 關於後事情，你必須要記得自己叫所有的渲染功能 之類的東西，如果你想添加新的東西發生 每次你修改後的時間，你就必須要經過你的每一個地方 您修改了帖子，並添加新的東西的代碼。 像這樣的框架將免去很多的層之間的通信 使你的代碼複雜和難以維護。 有大約看法也一點點。 我要離開這個最給比利，因為他們在技術上並不十分困難。 使用jQuery你的看法。這幾乎就像一個必要在這一點上。 它只是讓一切變得更輕鬆。 有很多的庫。 如果你有複雜的用戶界面元素， 如果你想要一個自動完成的事情還是喜歡那些花哨的多選擇之一 - 如果你想這樣的事情，你應該只是圍繞搜索 你可以找到一個好的圖書館，會做你想要的。 比利將更多地解釋的意見，實際上是困難的部分。 此外，作為一個側面說明，骨幹具有使意見交流一些功能 很好地與模型 - 看看所有這些庫的文檔，其實。 試想一下，在文檔。他們是寫得很好，易於遵循。 一般情況下，你可以非常簡單，只是谷歌，如果你有問題。 有很多人使用它們。 我覺得這是作為一個最後要注意的。 也有一些更高級的東西，你可以做 如果你正在尋找讓你的web應用程序的額外真棒。 你可以這樣做 - 新的HTML5規範有很多花哨的東西，你可以做。 本地存儲 - 這是你可以在瀏覽器中存儲的數據 - 而不必回去細讀服務器的一切， 你可以保留一些它的客戶端，甚至讓人們 - 在某些情況下，它甚至可以讓你使用網頁離線。 有這個東西叫的WebSockets這是一個不同類型的網絡通信 在那裡，而不是只是你做一個請求，你會得到響應就大功告成了， 你一直打開到服務器的連接，所以你可以做這樣的事情 實時更新。 所以，如果你試圖做一個聊天應用程序，你可以使用的WebSockets 溝通來回，這樣你就不必繼續申請， “哦，服務器，沒有人給我聊一會兒嗎？”每10秒什麼的。 還有一個有趣的HTML5功能，您可以使它看起來像 頁面的URL被改變，而無須真正重新加載它。 您可以使用前進和後退按鈕沒有做一堆的網絡請求。 這樣的東西是使其迅速方面確實有用，而且工作就像一個web應用程序應該。 還有這個東西叫做CoffeeScript的。 CoffeeScript的是不同的語言，其實，那編譯為JavaScript。 你會寫所有的代碼在CoffeeScript中，然後運行這個編譯器， 和它吐出一個JavaScript文件，您可以在您的網頁。 究其原因，CoffeeScript的是好的，因為它擺脫了很多的 奇怪的案件JavaScript有哪裡等於平等， 和等於等於做不同的事情，還是喜歡 - 它用於處理數組和功能更好的語法。 這是CoffeeScript中的一個小片段，產生所有的方塊的列表 從10 ^ 2〜1 ^ 2以相反的順序。 正如你所看到的，CoffeeScript的往往可以讓你在1線表現 什麼將採取5行JavaScript。 它可以使事情變得更加簡單。 它是新的語法一點點學習在第一， 但它肯定會讓你從長遠來看更富有成效。 您也可以使用其他語言在服務器上比PHP - 語言如Ruby，Python或甚至還有所謂的node.js項目 ，可以讓你使用JavaScript在服務器上。 就個人而言，我說真的，真的很討厭的PHP。 我只是不喜歡和它一起工作。 如果你也認為這是一種語言的一個可怕的cluge， 那麼你可以使用其中的一個來代替。 一般來說，如果你想要做的東西，你真的不知道你會怎麼辦呢， 剛剛在網上搜索。 還有成噸的資源，特別是對 - StackOverflow的是一個偉大的。 它的這個網站，程序員互相提問。 您可能遇到了它，如果你正在對CS50習題麻煩。 並有做幾乎任何你想萬噸庫。 如果你想要做的東西，你不知道如何做到這一點， 不要以為這是不可能的。 只要看看四周，您可能會發現一些好的資源。 作為一般的包， 主要的外賣是讓事情變得簡單。 更複雜的代碼是在一開始 你嘗試做花哨的東西越多， 的時間越長得到的東西其實功能 並就越難將在以後更改。 因此，首先要做的事情是喑啞的，簡單的方法。 一起去的， 不要害怕扔掉舊代碼或清潔了很多。 一般來說，一旦你真正擁有的東西的工作， 它更容易去思考比當你還處於起步階段 的我怎麼把這一切放在一起。 這是最好使的作品最愚蠢的可能的設計 然後反复比試圖讓一切都在第一時間進行改進。 在客戶端 - 服務器事業部方面，盡量保持你的服務器非常簡單 - 只是一個數據庫和一些認證和不做有什麼艱苦的工作。 在瀏覽器中做所有的複雜的東西在客戶端 在JavaScript中一樣，你可以。 環顧四周，使您的生活更美好庫。 總是最好使用代碼，別人寫 如果你 - 而不是你自己寫吧。 有很多東西在互聯網上。谷歌是你最好的朋友。 谷歌是程序員最好的朋友。 是啊，絕對不要害怕到處尋找的東西。 好的。及以上比利。 [比利]其實，在我開始與一些設計的東西， 沒有任何人有任何任何事情，他談到了問題的本？ 好了，好。 再次，讓我們知道，如果有什麼不清楚 或者如果您希望我們走過去的東西多一點。 我要退一步了一下，說說設計的更為根本的部分。 奔提到所謂的模型 - 對不起，模型視圖控制器系統 這是有點技術方面，所以我要看看具體的意見， 和我要開始你如何設計一個視圖，看起來不錯。 下面是一種對我們的貓Facebook上的真正的基本模板。 我認為有現代的UI設計中的一些基礎知識 這是值得回升。 你可以看到有大量的白色空間在整個頁面， 足夠的空間的東西。 不要覺得你必須壓扁東西放到一個頁面。 你要離開大量的空間打開，如果你去到幾乎任何現代的網站 你會看到有白色無處不在。 有白色的，你不會想到的地方。 你有這樣的調色板，它是明智的開頭 選擇一個調色板，你打算使用和發展。 您也 - 它有助於選擇字體​​，和排序的方式，您正在使用 設計這些具體的基本面。 你有你的類型，你有你的顏色，然後你可以種 根據需要在適應一切。 所以，正如我所說，你的配色方案你想用你的配色方案的大膽色彩 節制。頭是不錯的。按鈕是好的，有非常大的，浮華的色彩。 但在一般情況下，如果你有一個網站，有色彩無處不在， 在臉上都盯著你，它只是看起來雜亂，而且它沒有好。 你想一般採用淡雅的色彩。 嘗試，再挑一個漂亮連貫的配色方案。 你可以有很多顏色的這些小飛濺 - 可以看起來很不錯，但你想使用它們相當謹慎。 正如我所說的，你想成為最小。少即是幾乎總是更。 如果你能顯示東西或不顯示的東西， 和你有點不確定是否應該存在默認情況下 - 可能是你最好離開它了。你總是可以在以後添加它。 是啊，讓事情變得簡單。 但最重要的，你要考慮多個設計。 不要以為，當你犯了一個網站，你​​必須在你的頭，你要 使網站以某種方式，並且它要看起來完全是這樣的。 這將有頂部的藍色邊條藍色的頭和 然後將黃色的子報頭的事情。 你想多個模板。 您可以 - 如果你有好的照相館，您可以打開排序，高達和 設計一個網站，只要你喜歡它的樣子。 如果沒有，你可以只使用筆和紙， 但劃傷了多種設計。 你想基本上有一個設置，你有很多不同的設計， 而如果一個人結束了工作，那麼這是偉大的。 如果最終失敗，那麼你總是有一個又一個轉向。 一般情況下，不要覺得你應受限制 到任何設計您最初決定。 設計是非常可變的，並且該模型的重要性部 控制器查看系統是可以進出交換你想要不同的看法。 你可以揮灑的數據的一種方法，然後再決定，呵呵，其實，不工作的很好。 我認為這是一種過於複雜或有這裡的一部分，這不是真正的工作， 所以我只是要完全放棄這一觀點，並交換在一個完全新的。 我們仍然可以使用老款車型和老的控制器。 我們可以在服務器和客戶端因為我們之前做的一切。 而是將數據作為顯示的實際波將是稍微不同的。 至於實際執行你想要的設計， 一旦你有幾個設計勾勒出在紙上或照相館或什麼的， 還有一些被提供給您的工具。 第一個你非常熟悉的是你的HTML，PHP或任何 你只用代碼來在您的網站的靜態頁面的語言。 你用HTML那種，讓你這些標籤的工作很多 你可以把東西放進了，基本上它是組織內容的方式。 例如，你有頭那裡，所以你將有一個標題標籤， 而這將有它內部的一些文字這可能是要在另一個標記。 那麼你有一個側邊欄，也許有一些不同的環節， 和那些將要放在不同的標籤。 所以，基本上HTML在它的心臟是瓜分頁面的方式如何 你最終想要格式化。 如此反复，你以前見過的。 你很舒服的現在與它一起工作 因為你希望做最後的PSET， 所以應該是沒有問題的。 那麼你有CSS基本上可以處理所有的設計靜態方面。 這將處理所有的顏色，所有不同元素的定位， 在那裡它們相對於彼此去， 他們有多大，不同類型，你就必須定位運動的 - 換句話說，你就可以有固定的東西，這樣當你向下滾動，他們留下來， 或者你可以有相對於其他元素的東西。 所有那類東西是在CSS中。 此外，你可以做不同的裝飾，你可以有文字的顏色， 文字特效，所有的那種東西的。 奔上了這最後一個週末一個很好的研討會上， 所以我一定會檢查出來，如果你打算做一些花哨的東西用CSS。 CSS3實際上是對CSS的最新版本，它可以做各種各樣的非常好的事情。 它可以做漸變，你可以有不錯的，圓潤的邊角，你可以做各種各樣的東西 為使您的網站看起來更加現代和花哨。 下一個工具是JavaScript和jQuery的這本談了一點關於， 但我會得到一點點遠成。 JavaScript的，因為你已經用它在課堂上的工作一點點，或者至少看到它， 是一種動態的東西做以HT​​ML的方式。 HTML，如你所知，是靜態的，所以一旦你有你的HTML不能修改它。 但JavaScript，在某些方面，是一種能夠修改HTML。 所以，你可以這樣做，這是偉大的，而JavaScript真的是一個痛苦的工作。 它是如此漫長而鈍，並做哪怕是最簡單的事情 需要大量的JavaScript的線條。 因此，jQuery是一個基本上JavaScript庫，它簡化了這一切。 它說，好吧，如果你想有一個方盒子來自左 而淡出人們的頁面，以便它在中間，在JavaScript中，將採取 - 我不知道，百行做的，這將是一個痛苦， 和你出來了憎恨一切關於網絡編程的。 JQuery的你基本上有元素點淡入，或者類似的東西。 所以，非常，非常簡單的功能，可以讓你做各種很酷的動畫 和那種事。 另一件事，這兩個都是非常好的，只是在做動態的東西 與該網站。 因此，而不是僅僅有你的HTML頁面 - 它顯示了一些數據，但實際上並不 做任何事情 - JavaScript和jQuery將讓你有按鈕，您可以點擊， 你可以拖動的元素和重新排序它們，對它們進行排序，並且有新的元素 添加或刪除。您可以添加，刪除，諸如此類的事情。 因此，jQuery也噸很酷的事情。 和Vipul保持今天實際上是給它一個研討會上，我相信，在5點鐘， 所以如果你能堅持圍繞這麼久，那會 - 5或4？ 四。抱歉。它實際上是右後這一點，所以我會建議 堅持圍繞它，如果你能。 jQuery是超級，超級有用，你就可以做很多非常好的事情吧 對於幾乎任何Web開發項目。 現在，我要進入怎樣的一個區別。 我一直在談論基本上是關於用戶界面。 用戶界面是網站的僅僅是設計。 但有幾分另一個概念，它是用戶體驗。 兩者有很大的不同。 接口是絕對的經驗的一部分。 換句話說，當你去一個網站，你​​看看接口。 這就是你如何體驗的網站的一部分。 但用戶體驗不止於此。 用戶體驗是什麼，用戶會從你的網站的印象。 所以，很顯然，接口是其中的一部分。 它絕對是一個必要組成部分，但它不是足夠。 換句話說，如果你有一個漂亮的界面，它的漂亮，豐富多彩，所有這一切， 這是偉大的，但如果用戶進入你的網站，看到一個漂亮的佈局，它的困惑 一切，不知道如何做任何事情，那麼顯然你已經有了一個真正 可憐的網站。 這就是那種地方的用戶體驗的用武之地。 我要談談UX設計 - UX是短的用戶體驗 - 善良的你如何能確保你有一個良好的用戶體驗。 第一點是，你可以設計一個網站，用戶可以做任何事情， 該用戶可能想要的。 但是，如果用戶無法弄清楚如何做的那些事 - 換句話說，如果用戶沒有一個好主意，當他們去到你的網站， “哦，如果我想更新我的個人資料，然後我點擊這個按鈕，或者如果我想張貼上 人的塗鴉牆上，然後我去他們的牆，點擊一個小盒子。“ 如果用戶不知道，那麼你有效地並沒有真正 正確實現該功能。 實現的功能之一是，用戶實際上能夠使用它。 它可能是令人沮喪的 - 你可能會做一個網站，它可以做各種 奇妙的事情，但隨後你就會有人們對其進行測試，並說，“這不可能做到這一點。 為什麼不能這樣做呢？“，你會說還給他們， “嗯，這可以。你只需要進入第七下拉菜單上的這種模糊的 只有通過在底部右下角“什麼的一個環節發現頁面。 很明顯，你不希望出現這種情況。 你希望它是明確的，以你的用戶什麼他們應該做的， 它應該是簡單而直觀的他們。 要嘗試做另一件事是，如果有人的會去你的網站 和9個10倍做動作A和1出10倍做動作B， 你可能想集中行動A.經驗 換句話說，你想它非常，非常清楚該怎麼做A。 A應前端和中心 - 去到現場，看到了吧，哦，它就在那裡。 而乙顯然，你想清楚，但你可以讓它多一點 在背景中。 大衛給出了一個很好的例子在講座中， 這是波士頓T系統的。 當你去到波士頓T和你想要買一張票， 你必須進入5個菜單，然後才能真正購買車票 為2美元，二元五角的價值，這是多大的才能乘坐地鐵 在一個方向上。 這是一個問題，因為大多數人誰是乘坐地鐵 可能只是想去一個地方，購買他們的票，得到的時候了。 它沒有任何意義，他們必須經歷許多不同的菜單 到那裡。 更好的用戶體驗將是第一個頁面上的快捷按鈕 這只是說，'買了單程票，“那將使所有的標準 默認值，然後如果有人想購買不同的車票比， 他們還在，當然，可以選擇，但你已經​​優化 共同使用的情況下，這是非常重要的。 你可以看到這樣的例子在Facebook上，對不對？ 如果你去Facebook和要發布一個狀態， 它的右側上方，而這正是你經常想做的事情。 只要您進入的頁面，你可以做的最常見的事情， 你想做的事情。 如果你想要做像稍微複雜的事情， 說我想要去我朋友的牆上，張貼圖片就可以了 - 我想要做的時候，但不是經常張貼狀態更新 - 所以在這種情況下，我輸入他們的名字在箱體頂部，點擊他們的個人資料， 然後，儘管如此，它的右側上方有一次，我已經得到了他們的個人資料。 再次，我已經優化的優先級為最常見的使用案例。 另一個重要的事情是有點，往往人們會嘗試解決這個問題 說，好吧，所以我做了該網站，人們發現它令人困惑， ，這是一個問題，對不對？ 很顯然，我不希望人們通過我的網站的內容所迷惑。 但要解決的方式是不是有東西彈出說， 哎，我要教你如何使用這個網站。 步驟1 - 單擊此按鈕。第2步 - 去這裡。 當然，這是變通的辦法 - 這是一種方式，你可以告訴人們應該做些什麼，但它的 真的不是最佳的方式。 如果我去一個網站，突然間我催要本教程是在告訴我， 做什麼和去哪裡，所有這一切，這不是好玩的我。 這不是我的一個很好的經驗。 這是一種痛苦。我想剛開始做的東西。 人們會收了他們的對話方塊中， 或走出教程，不知道該怎麼做，然後抱怨，因為 你還沒有告訴他們該怎麼做。 解決這個問題的方法是不給予任何形式的教程或方向 - 類似的事情。 就像你能避免它，你真的想向用戶顯示該怎麼辦 剛剛通過了如何在網站的佈局的性質。 換句話說，如果我去給Facebook沒有登錄， 我的主網頁上看到的第一件事情 - 這是一個有點登錄框。所以，真不錯。我需要登陸。它就在那裡。 然而，如果我去到Facebook，我不得不單擊底部一點​​點鏈接 那個說'登錄'和頁面的其餘部分只是一些圖片什麼的， 我真的不知道該怎麼做了吧？我會被混淆。 因此，它可以告訴我去那裡，然後單擊按鈕進行登錄， 或者在日誌中鍵可以在那裡我會看到它的頂部是正確的。 你要始終顯示用戶做什麼， 這應該是固有的頁本身。 當你正在考慮設計和嘲諷了不同的方式 表達你的網站，你真的要想想什麼樣的用戶會 做以及如何告訴他們該怎麼做。 最後一件事就是測試是非常非常重要的。 這是偉大的找人 - 找個朋友，找人你不知道，即使 - 誰是從未見過的站點之前使用該網站。 因為你已經在現場工作了幾個小時，你一直盯著它， 你確切地知道這樣做很明顯你將要測試 事情，你一直都在，你知道的工作。 但如果別人走來，並使用該以前從未使用過該網站， 這是一種獨特的體驗，因為你有別人誰沒有先驗知識 該網站進入，所以他們將有有效地不知道該怎麼做的 或者什麼樣的用例都存在他們。 這是偉大的。這是獨一無二的，因為它們基本上是一個人與一個空白的頭腦。 他們可以告訴你，如果事情是混亂或不清晰。 他們可以給你的正是你的網站的用戶體驗是一個想法。 它可以是非常困難告訴自己，所以我肯定會鼓勵你 為您開發的項目 - 如果你正在做的基於Web的項目 - 早在你有某種功能的演示使用該網站得到的人。 現在，我要談談如何管理一個Web開發項目一點點。 我們已經討論了如何才能做到的技術後端側， 如何設計一個非常好的網站， 這就是偉大的，如果你自己的工作，但 - 即使你通過自己的工作，特別是如果你在一個團隊工作， 項目管理成為一個大問題。 那種你既然聽說過項目管理的不同形式 小學當你被告知小組的工作。 你必須合作，溝通，所有這一切。 這一切都仍然適用在這裡，但也有一些特殊情況 要知道，你要確保你處理好計算機科學。 我先談一點關於球隊，你會是英寸 這是非常重要的，選擇一個團隊進行工作的大小合適， 並在最終的項目，我認為你必須選擇的選項 如果我是正確的1至4人。 你要確保你不只是選擇的人數 您要使用，因為他們是你的朋友合作。 你要選擇一個團隊，是一個很好的大小，這將完成這項工作。 有一個權衡中有更多的人與較少的人。 如果您有更多的人，顯然更多的工作可以做 因為你有很多的人，大量的代碼，很多想法， 這就是所有偉大。 但它也需要更多的管理和更大量的溝通。 換句話說，如果你有4人工作在同一個項目 而且他們都編輯了相同的代碼，或多或少都種需要知道的 這是怎麼回事，因此需要你 - 排序的，如果你添加了一些新的功能，你必須告訴人們 - I'm加入此， 我改變了這種以這種方式 - 特別是如果你進入非常深的東西 像模型和控制器，實際上將影響該網站如何工作的。 整個團隊需要意識到這一點， 所以你需要確保你不選擇太大的球隊，那將是很難 作出這樣的溝通。 你也不想選擇一個足夠小的團隊，你不會 能夠溝通，因為它只是你。 另一個要考慮的是，人們的技能的平衡。 這是偉大的，如果你真的所有優秀的程序員。 但如果你是所有後端的人，那麼你的網站是不會很好看 因為你有這個偉大的數據庫，而且它超快的搜索查詢 - 這是偉大的 - 但是當你去到它，它就像1990年的網站用紅色和藍色 無處不在，而這也不行。 請注意，Ben和我的工作作為一個團隊是非常好的，因為我是那種更 在前端，我們無論是在中端交互，和本真的很好用後端的東西， 使作品真的很好，因為我們可以設計任何網站，基本上孔 該站點需要被填補可以通過任何一個人來說，也可能兩者填補。 你要確保有在你的團隊沒有漏洞。 沒關係，如果有一點重疊。 換句話說，如果你有2人是既具有良好的後端， 這可以很好的為好，因為他們可以互相幫助與問題 他們是有。 它可以是一個問題，如果你只有1人誰負責某一件事 他們碰到的一個問題，所以你希望有重疊一點點 但你最重要的是要確保所有可能的孔被填充。 最後一件事 - 這應該是顯而易見的，但它往往並非如此。 你真的想要獲得樂趣。 在CS50這最後的項目點和網絡的發展往往是在一般的點 是不是只是做一個工作，因為它需要在做。 你真的想要獲得樂趣，並且你想成為使一些 這是激勵你的工作就可以了。 如果無論你正在做的是一件痛苦的坐下來工作， 那麼你就不能選擇合適的項目。 你要選擇一個你覺得有趣的東西， 你真的想看到的結果，你很高興，當你得到關於一個新的想法 一些你可以做的 - 所以有各種各樣的項目有，我敢肯定， 你可以找到 - 每個人都有的東西，真的會他們的陰謀 如果他們正在做一個基於Web的項目。 我再說一遍，現在。 如果你的項目似乎是一個痛苦，你不想要工作就可以了， 選擇其他項目。選擇一些真正激勵你。 本提到迭代有點這個概念，我想通過它去了一下。 這真的很重要，你得到的東西噴功能的工作。 它可以是偉大的，如果你有這樣的計劃，一個網站，會做A，B和C， 並最終會到達那裡。 但你停留在這個階段，你正在使用它，處理它， 但什麼也沒有得到實現。你沒有什麼可看，有形的，功能性的東西。 你真的想要，因為它似乎一種痛苦有時做盡可能多的什麼 對一些工作，然後有點糟糕的是關閉，因此它至少在一個穩定的，運行 版本即使沒有你想要的所有功能。 也許有一些功能，你真的想加入，但你就是不能 因為你想要得到這個網站的功能點。 所以你想要那種把整個開發過程看起來像他一樣。 你想從某個地方開始功能 - 或者根本就什麼也沒有 - 但你想要得到的地方非常基本的和功能。 然後再次，做一個排序跳，再次得到的地方發揮作用。 你會慢慢建立起來，它可能會去會比其他慢一點， 但是從長遠來看，如果你經常停留在這個中間地帶階段，你 實際上沒有任何工作，它可以是一個真正的大挫折 在你的項目中工作，因為你總是如此接近得到它的工作， 而且它從來沒有真正的工作。 你想在這些功能苗頭工作， 而你也希望每個人以後做一些反思。 換句話說，一旦你在一個點，該網站是現在的工作 - 它沒有你喜歡的一切，但它做一些事情 - 你要想想，還好，就是這個網站辦成，我所要做的目標是什麼？ 換句話說，如果該網站將做X，是我在X方向有工作？ 都是，我想那裡的功能呢？ ，而且，它是服務，我想整體的目的是什麼？ 如果你發現你的網站已開始在不同的方向來改變方向 也許事情就有種不工作了，它可能是時間換擋一點點。 換句話說，這是值得考慮 - 這是值得扔出去的想法，如果有必要 並考慮我真的努力爭取我想要的。 我相信這是我的下一個點。不要害怕放棄的想法。 僅僅因為你花了很多時間工作的一個特點 終於得到了它的工作，但它確實是不會這麼好 - 就像是沒有多大用處的，或用戶正在使用它遇到了麻煩 - 諸如此類的事情 - 不要害怕把它扔掉。 它吮吸你已經花了很多時間工作就可以了， 但最終你不想要一個網站那種的放在一起，這些片段， 這類工作，但都不是很好的服務。 另外，不要害怕接受新的想法。 如果有人走來，說，哎，該網站看起來真的很酷，但 那豈不是即使是偉大的，如果它也這樣做？ 只是因為這件事情，你不打算和東西是不是在你的 規格，東西，你有沒有下決心做， 不要害怕把它，然後使用它。 因為往往你在整個發展過程中運行思路 最終成為該網站的很酷的功能。 我之前已經說過了這一點。我再說一遍。 測試人員是超級，超級有用。 試圖讓人們誰從未見過的網站之前登錄並查看發生了什麼事情 因為他們不僅可以測試網站和用戶體驗的實用性， 但他們也可以的方式，你不能測試功能。 如果你做了一些功能，做某一件事 你知道它會做正確的事情一樣，每一次，這是偉大的。 但它往往是很難解釋的角落情況下，一個用戶可能 因為你準確的界定 - 鍵入的東西，你沒有想到 自己的特點。 所以，有一個人過來對誰不知道如何使用該網站 而剛剛打破它以任何方式，他們可以做的是真正有用的，因為你 從您的網站什麼是工作的一個完全不同的角度得到一個想法 什麼需要修理。 最後，我要談的一些好的做法， 你已經看到了很多這些在CS50，但他們也非常非常適用於項目的設置。 一個是註釋。總是特別註釋你的代碼，如果你正在做一個大的團隊。 它可以是那麼討厭，只是有一個代碼塊巨大的，有人是寫 也許奏效，也許沒有，但你不知道它做什麼， 所以你不知道它是否有用與否，或是否應該存在與否， 如果你工作在別的東西，你的工作就它甚至有可能 同樣的事情，所以只是非常，非常小心，要體諒你的同伴 和寫代碼，是有據可查的。 你不必跑那麼遠的做，如果你增加地方喜歡整個事情 計數器有一個評論，說，我添加1到這個計數器。 這並不一定是因為詳細，但對於你曾經編寫任何功能 你應該有一個什麼樣的功能究竟做了一些文檔， 什麼它的輸入，以及它應該返回。 這樣，你可以使用該網站的其他人的組件 你可以朝著建設事大工作。 另一個重要的事情是你想要做定期清除。 代碼就會變得混亂。不要難過，如果你的代碼僅僅是完全不可讀和一個巨大的爛攤子。 這種情況發生在web開發中始終。 你添加新的功能，刪除舊的。東西是要在那裡不應該。 這很好，但你要確保處理定期。 你不想讓它建立到這種地步，你就不能發現什麼 在你的代碼，而你不知道是什麼東西呢。 這是用HTML的情況。 有時，你會最終與不包含任何對象， 你會想擺脫那些。 在CSS中，你可以指的是不存在了的元素， 所以你想擺脫的代碼。 在JavaScript中，你可能已經刪除從HTML的東西。 所以，你要確保你總是清理，使美麗的東西 就像你可以定期。 我不認為另一個非常有用的東西概述十分CS50 但它是值得進入的是版本控制。 版本控制的想法是，當你基本上保持跟踪所有的進展 你做對您的網站，如果在任何時候你意識到，哦，這是工作 前一段時間，但它不工作的更多，你可以回到以前的版本 看看從那時起，諸如此類的事情發生了什麼變化。 主要的方法來做到這一點是使用Git，以及Git是這整個樣的系統是 我相信湯米MacWilliam了一個關於去年的研討會。 如果你去到CS50研討會於2011年，你可以看到他的研討會上說。 混帳的想法基本上是每隔一段時間你正在做這些承諾 這是說該網站是在一個相當穩定的版本，現在這樣的方式 我把它包裝起來並把它發送到了服務器，那麼你可以去到該服務器 看看你的代碼之前的所有版本，看看它是如何進展 和所有諸如此類的好東西。 所以，這是基本的。 至於網絡的發展，我們很高興留下來，回答任何 的問題，據我們的介紹。 就是這樣。謝謝。 >> [奔]謝謝。 [鼓掌] [比利]工作人員，有沒有人想過這事我們已經討論的事情有任何疑問 或者說我們還沒有涉及，他們希望事情我們會覆蓋？ 我們很樂意回答這些。任何人嗎？ [聽眾]什麼是使用Ruby或使用Python的利弊？ [奔]現在的問題是，什麼是使用Ruby或Python的利弊 而不是像PHP。 優點是Ruby和Python是比PHP更好的語言。 至少在我看來，我想了很多別人的意見為好。 他們的目的多用於做複雜的東西， 少的重擊在一起網頁真的很快與 動態內容一點點。 的缺點是有一點點 - 有更多的學習曲線 ，讓他們建立起來。 也就是說，想在PHP中，你可以有一個HTML文件，你寫的小於， 問號，然後寫一些代碼，然後你寫的問號， 大於號，然後就大功告成了。 在其他語言如Ruby或Python， 你必須要經過更多的工作來獲取初始站點運行。 還有 - 至少它曾經是如此 - 那還有更多的文檔 可用於PHP的，只是因為有使用它更多的人。 我認為這不是太大的問題了。 有肯定是非常好的文檔東西像Ruby on Rails的 或者Django對於Python是等價的。 PHP是每個人都已經使用了多年的一個，你知道它是如何工作的。 Ruby和Python都有點不太成熟。 [聽眾]如果你是其中之一之間進行選擇學習或回暖， 你會選哪個？ 老實說，我認為取決於人。 對不起。現在的問題是這會你挑人來學習呢？ 我發現Python的個人的最好。 有很多人誰 - 我做了Python和Django的我的第一個web開發項目。 有很多人誰喜歡的Ruby on Rails也。 或許更多的人誰on Rails的了解Ruby。 老實說，我只想去任何你周圍的人都知道 這樣你才有人來問問題。 現在的問題是 - 在共享服務器上是種很難工作的Python呢？ 這取決於您的主機。 有許多網絡主機，將發布Python的東西。 WebFaction這樣做，對嗎？ WebFaction是一個比利和我已經用於一些項目。 他們是真正偉大的。它們支持大多數語言。 但它是真實的，PHP是更廣泛的支持。 所以，如果你堅持一個虛擬主機，只做對的PHP，這是使用PHP一個很好的理由。 [聽眾]我剛坐進學習如何查詢一些數據庫， 我知道我的SQL是所有的地方，但是我最近得到了暴露 - 你指了出來。你看，JSON和可擴展數據庫。 我的SQL仍然是所有的地方。你怎麼看這種事情發生？ 是否有將要為更多的擴展（聽不清）成為增長的趨勢？ 現在的問題是 - 我覺得有將是對非SQL數據庫的趨勢。 舉例來說，像MongoDB的。我認為這是絕對真實的。 我的建議是在這裡大多是MySQL相關，只是因為MySQL是 行業標準。 就個人而言，我更喜歡那些沒有像MongoDB的schemos數據庫 在那裡你沒有問題，呵呵，我需要添加另一列。 禍是我，就像不管我該怎麼做？ 這是很難做到這一點的MySQL，但是當你有像蒙戈 它更漂亮。 關於蒙戈的其他好處是，你的記錄實際上是JavaScript對象。 有沒有排序的轉換步驟，你需要把這些數據庫中的行 並把他們變成一個JavaScript對象，然後將它們發送過來的電線。 我覺得這樣的東西將是非常，非常有用的快速Web開發的未來。 [比利]東西我想補充這僅僅是一個普遍的觀點是， 不要覺得你應該已經學會了所有我們已經討論過的語文 從我們的研討會。 很顯然的一點是給你一個什麼樣的在那裡一個想法， 如果你被任何我們已經提到的東西很感興趣你可以Google他們 並在他們讀了。 正如我所提到的，還有一些處理正是這些東西了幾個研討會。 還有，我沒有提到，可能進入更加研討會 這個東西也是如此。 我們的想法是，如果你要處理的東西，這裡是在您的處置工具。 如果你真的不知道什麼這些工具做完全不覺得不堪重負， 但要知道，他們是在那裡，你可以使他們的廣泛使用 由谷歌。 [聽眾]你需要什麼樣的事情要做，以確保您的網站 在移動設備上看起來不錯？ [比利]移動設備是有點硬。 有2種方式可以接近它。 第一種方式是，你實際上有一個移動網站。 換句話說，就在開始時執行某種檢測 當瀏覽器發出請求到您的網站，或者說 返回這個觀點 - 這將是該視圖的台式​​機或筆記本電腦的瀏覽器 - 這另一種觀點適用於移動設備。 這是一個地方的意見是非常好的在您幾乎可以互換的 兩頭在外，並有作品真的很好地在移動設備上的接口 並有一個完全不同的一個很好地工作在瀏覽器中的設備。 與該問題是它需要很長的時間，因為這意味著編碼 一個完全不同的接口。 你可以做到這一點的另一種方式是 - 很多現代的手機將顯示網站和嘗試，使它們像瀏覽器那樣， 和他們做最好的自己。 有種你可以盡量留在光的jQuery的JavaScript您使用的金額 這往往是那裡的東西可以去錯了一點點。 這是那種你應該使用，如果你沒有那麼多時間的方式。 如果你有工作，在移動界面上的時間，這顯然是最好的選擇。 我覺得一般的CS50項目，你會希望選擇一個或另一個。 換句話說，你想使一個移動應用程序或者你想在桌面網站。 排序並決定你要去哪裡這一點。 但是，如果你想在以後展開了，可能是你最好的賭注是 作為其他的另一個接口。 我的WordPress的開發為基礎的網站的一點點經驗。 我託管在WordPress的個人網站一段時間。 這些類型的框架可能是好的，就像很基本的東西。 通常情況下你會正好碰上了很多定制性的問題雖然。 你想擁有的東西看起來某種方式或一定的方式 你只是不能因為它是硬連接到系統中 你這是怎麼要做的事情，可能是有點問題的。 那種從那時起我一直更傾向於從地上爬起來地盤工作。 的事情，比如博客數據庫和諸如此類的事情它真的不是那麼難建立一個框架。 如果你真的對捉襟見肘的時候，你當然可以使用像WordPress的 或者諸如此類的事情一個博客。 這樣的東西，博客存儲和做是不是真的夠硬的 如果你運行任何這些類型的東西，你可能最好只是為了 做一個內部版本。 我認為這是它，所以再次感謝您的到來。 我們非常喜歡你說話的傢伙，希望你學到了一些東西。 [奔]我們很樂於交談 - 我們必須去，但我們很樂意多談外 如果你有另外一個問題。再次感謝。 [鼓掌] [CS50.TV]