[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]