Web開發入門不得不看

　　如今，各種網際網路的Web應用程式層出不窮，那麼如何快速入門，成長為一個優秀的Web開發工作者呢？

　　這個問題不容易回答，幾乎所有的培訓機構都不能清晰地解答。

　　所以對於Web開發剛剛入門的菜鳥們，我覺得只有通過去做，去實驗，學會Web開發，可能是學著學著，實驗著實驗著就會了。

　　沒有人告訴你如何去做。我學習的時候，我的導師只是給了我一堆視訊，一堆文件。我們從明確一個目標開始：“哦，這個階段，我要獨立完成一個簡單的Web應用程式，例如新聞釋出系統”。

　　或許學會如何開發Web應用程式只是在完成這個Web應用程式過程中產生的副產品而已。你可以管它叫專案驅動，也可以認為這只是學習任何語言的一個非常有效的方法。 

　　一、分析與設計

　　無論做一個傳統的桌面應用程式，還是做一個Web應用程式，前期的分析與設計是不可避免的。

　　分析：需求分析，你必須瞭解你要做的是什麼，你的客戶到底想要的是什麼，在做新聞釋出系統的時候，我就必須問我自己這樣的問題：我的新聞釋出系統能幹什麼，我想他是什麼樣子的等等。

　　當搞明白了，我到底要做什麼的時候，就要開始設計了。設計是很繁瑣的，記得以前做機房收費系統，設計幾乎是改了又改，細化了又細化，這裡也是一樣。

　　對於剛剛入門的你，我想應該簡單地畫畫頁面流程圖，選擇什麼樣的工具？不重要，可以用Word，可以用Visio，即使用紙也無所謂，因為鉛筆和橡皮能讓你快速應變，只是如果要儲存和傳播，就不要選擇紙了。這個時候，頁面畫出來，就是一堆框框的羅列，很簡單，只要能讓自己知道，這個應用最後大概會是什麼樣就可以了。當然點選某個按鈕能完成什麼等，可以用程式流程圖表示出來，流程圖還是推薦大家畫的，因為這樣你對系統的整個脈絡會有更加清晰的認識。

　　二、網頁實體模型

　　呵呵，理論上說，草圖整完了，應該做實體模型了，仍然可以看做是頁面的細化，不過這次看起來應該像最後Web應用程式成品的一個截圖了。當然，如果你的客戶就是你自己，只要你自己看著滿意就可以了。

　　如果你是在不信任自己的Ps技術，或者，你實在沒有審美細胞，又或者你不想成為大牛的網頁設計師，你也可以偷懶，直接奔向網頁原型的開發。當時，我就偷懶了，給自己的理由是：我是沒有審美的程式設計師。事實證明，如果你沒有實體模型，做起網頁原型來肯定是要花費更多時間的，有句話說得好，“出來混，早晚要還的”。

　　三、網頁原型開發

　　網頁原型是用HTML開發出來的，肯定是要使用CSS渲染的。一般，我們的HTML文件都會利用外部樣式來定義文件中使用的樣式。Javascript也放在外部文件中，這個文件只包含了Javascript程式碼。

　　按照這樣方式進行分離，網站將包含三種文字檔案：HTML，包含頁面的內容和結果；CSS：控制頁面的外觀和表示；Javascript，控制頁面的行為。

　　HTML, Javascript, CSS檔案必須是純文字格式的，這樣瀏覽器才能理解他們，推薦幾款不錯的編碼工具：NotePad++（小巧，免費），EditPlus（功能全面的文字、HTML、程式原始碼編輯器），VIM（速度，用它你可以把滑鼠扔掉了）。

　　這個時候，在我的網頁原型上做一些可用性測試，防止以後出現大面積的失誤。在這個步驟的最後，我基本上就知道了我的web應用是如何組織到一起的了，前臺頁面有什麼，各個頁面是怎麼跳轉的等等。

　　這就好比，我做好了一個車模，剩下的就是讓車跑起來了，又或者，我是造人，我已經把人的皮囊做好了，接下來就是做它的五臟六腑了，哈哈，貌似人不是這麼造的，不太貼切。

　　四、選擇框架

　　現在你已經知道了要去開發什麼東西了，接下來的工作依然很多，我想，這個時候，你就該選擇，要採用什麼語言，什麼框架了。

　　有選擇自然就有痛苦。我至今沒有看到，有人大膽宣稱，哪個框架最好，哪種語言最好。

　　其實，它們都各有不同，每個都有自己的長處。最重要的是你要知道它們任何一個都能讓你開發出好用的web應用。

　　選擇合適自己的，真是不容易，還好，如果你並不想花時間去研究所有框架，那麼建議你選擇比較容易上手的ASP.NET 框架吧，語言自然就選擇C#了。

　　如果不是開發很小的系統，我想，你應該會用到資料庫，如果你不知道如何選擇，那就先從Access或者Sql Server開始吧。

　　五、開發進行時

　　好像蓄勢待發了，那就挽起袖子開幹吧，標準的程式設計工作嘛。在後臺，你要建立類，物件，服務，過程，以及資料持久層來把這些物件儲存到資料庫中。

　　後臺是整個應用的核心，對任何應用來說，它跟普通的程式設計沒有什麼區別，才用物件導向的方式，應用設計模式，等等，可以把C/S開發的經驗應用過來。

　　然後，把後臺的程式和原型介面整合到一起，把系統各部分整合到一起。整合的過程依然是可以用Javascript精雕細琢滴，採用jQuey，採用Ajax等等。 

　　六、測試，除錯。

　　這個時候，你的web應用程式開發已經接近尾聲了，只是開發。再回頭看看自己的需求和設計是否被實現，你同時還要確保你的程式能夠在各種瀏覽器裡都能正確的執行（如果是IE6，我想你還是會糾結一下的，至於為什麼？真正做的時候，你就知道了）。

　　在各個瀏覽器中除錯的時候，推薦你安裝一些外掛，例如FireFox瀏覽器中的Firebug，IE下可以用WebDevelopmentHelper等。

　　自己測試沒有問題了，最好找一個身邊的人簡單測試一下，你也不希望，釋出了後，你的應用被一些“愚蠢的網友”莫名其妙的操作搞死吧。

　　如果你是一個追求完美客戶體驗的人，那麼接下來就要花些心思去改變你的Web應用程式去給使用者創造更美好的體驗了，這個時候依然會用到一些剛才提過的技術，jQuery和Ajax等，如果你選擇Asp.NET框架，你可以試著瞭解一下Asp.Net Ajax。 

　　七、釋出和後續工作

　　這最後一步是釋出你的應用，如果你願意，先釋出一個Beta版，因為肯定會有bug，這樣只有一小部分使用者能夠發現你的應用裡的大問題。

　　他們會幫助你改程式序的質量。切記，不要忙著增加功能，要專注於把你目前的程式變的穩固。

　　經過了beta階段，就要釋出正式版了，這裡會牽扯到一個推廣的問題，像我這種小人物，我還是喜歡用微博，這是個好東西，如果你不懂，可以去了解一下這方面的動態。

　　或許直到你徹底完成自己的第一個Web應用程式才明白我開頭說的那句話："或許學會如何開發Web應用程式只是在完成這個Web應用程式過程中產生的副產品而已"。

　　那麼，上述內容一到七中提到的那些英文單詞就是我們開發過程中學到的東西，讓我們一起來大概地看一看，在上述開發過程到底學到了什麼：

　　1、Html

　　HTML 超文字標記語言 (Hyper Text Markup Language) ，是用來描述網頁的一種語言。 不是一種程式語言，而是一種標記語言(markup language) ，HTML 使用一套標記標籤(markup tag) 來描述網頁 。

　　網頁檔案本身是一種文字檔案，通過在文字檔案中新增標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁檔案，然後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對於不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。

　　HTML之所以稱為超文字標記語言，是因為文字中包含了所謂“超級連結”點。所謂超級連結，就是一種URL指標，通過啟用（點選）它，可使瀏覽器方便地獲取新的網頁。這也是HTML獲得廣泛應用的最重要的原因之一。

　　2、Xml

　　Xml可擴充套件標記語言 (Extensible MarkupLanguage, XML) ，用於標記電子檔案使其具有結構性的標記語言，可以用來標記資料、定義資料型別，是一種允許使用者對自己的標記語言進行定義的源語言。 XML是標準通用標記語言 (SGML) 的子集，非常適合 Web 傳輸。XML 提供統一的方法來描述和交換獨立於應用程式或供應商的結構化資料。

　　XML與HTML的設計區別是：XML是用來儲存資料的，重在資料本身。而HTML是用來定義資料的，重在資料的顯示模式。

　　3、CSS

　　在Web開發早期，網頁設計人員經常抱怨他們對網頁的外觀缺乏控制力，他們無法精確地控制物件在網頁上的位置，而且對頁面上的字型的外觀也沒有什麼控制力，因為網頁不比實際紙張，針對多大的紙做什麼樣的設計，而網頁的大小是不固定的。

　　CSS（Cascading Style Sheet，層疊樣式表）規範是由W3C制定的，由於允許同時控制多重頁面的樣式和佈局，CSS可以稱得上 WEB 設計領域的一個突破，它使得內容與表現分離 。作為網站開發者，你能夠為每個 HTML元素定義樣式，並將之應用於你希望的任意多的頁面中。如需進行全域性的更新，只需簡單地改變樣式，然後網站中的所有元素均會自動地更新。這樣，即設計人員能夠將更多的時間用在設計方面，而不是費力克服HTML的限制。

　　4、JavaScript

　　首先，JavaScript和Java無關，JavaScript 是屬於網路的指令碼語言！那麼為什麼名字如此相似?這是典型的市場營銷方面的成功，它的推廣成功，也是借了Java的東風。當微軟開始意識到JavaScript在Web開發人員中流行起來時，微軟還是一貫風格，建立了自己的指令碼語言，JScript。

　　JavaScript可以使網頁更具互動性，給使用者提供更令人興奮的體驗，當使用者在頁面間導航時向他們提供反饋。例如他可以設定滑鼠懸停效果，在客戶端驗證表單，建立定製的HTML頁面，顯示警告框，設定cookie等等。

　　5、Ajax

　　Ajax是Asynchronous JavaScript and XML(非同步 JavaScript 和 XML)的縮寫。嚴格意義上Ajax是Javascript的一小部分。但隨著頻繁地使用，這個詞不再指某種技術本身，而是以下這些技術的組合：

　　XHTML；CSS；JavaScript訪問DOM；XML，在伺服器和客戶之間傳輸的資料的格式；XMLHttpRequest，用來從伺服器獲取資料。

　　Ajax是一種用於建立快速動態網頁的技術，大多數處理在使用者的瀏覽器中發生，往往在後臺與伺服器進行少量資料交換，時間很短，而且AJAX可以使網頁實現非同步更新，這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新（傳統的網頁，即不使用AJAX的網頁，如果需要更新內容，必需過載整個網頁面）。基於以上這些，可以使用Ajax建立功能豐富的應用程式。

　　有很多使用 Ajax的應用程式案例：Google 地圖，Google日曆，Gmail，My Yahool！門戶，騰訊微博，新浪微博、開心網等等。 

　　不錯的ajax工具包有：AjaxControlToolkit，Yahool！UserInterfaceLibrary等等。

　　6、DOM

　　在網頁上，組成頁面的物件被組織在一個樹形結構中，頁面的頂級包含在<html>標籤中，在其中會找到<head>和<body>標籤，而其他標籤包含在這兩個標籤中，依此類推。

　　Javascript將文件樹中的每個專案當作物件，通過 Javascript，您可以重構整個 HTML 文件。您可以新增、移除、改變或重排頁面上的物件，要改變頁面的某個東西，Javascript就需要獲得對 HTML 文件中所有元素進行訪問的入口。這個入口，連同對 HTML元素進行新增、移動、改變或移除的方法和屬性，都是通過文件物件模型來獲得的，也就是說，文件中物件的表示稱為文件物件模型，即Document Object Model，簡稱DOM。

　　在1998年，W3C 釋出了第一級的 DOM 規範。這個規範允許訪問和操作 HTML 頁面中的每一個單獨的元素。所有的瀏覽器都執行了這個標準，因此，DOM的相容性問題也幾乎難覓蹤影了。DOM 可被 Javascript 用來讀取、改變 HTML、XHTML 以及 XML 文件。

　　DOM被分為不同的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：

　　Core DOM，定義了一套標準的針對任何結構化文件的物件

　　XML DOM，定義了一套標準的針對 XML 文件的物件

　　HTML DOM，定義了一套標準的針對 HTML 文件的物件。 

　　7、jQuery

　　jQuery是繼prototype之後又一個優秀的Javascrīpt框架。它是輕量級的js庫(壓縮後只有21k)，它相容CSS3，還相容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera9.0+）。jQuery使使用者能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX互動。jQuery還有一個比較大的優勢是，它的文件說明很全，而且各種應用也說得很詳細，同時還有許多成熟的外掛可供選擇。jQuery能夠使使用者的html頁保持程式碼和html內容分離，也就是說，不用再在html裡面插入一堆js來呼叫命令了，只需定義id即可。

　　其宗旨是——WRITE LESS, DO MORE（寫更少的程式碼,做更多的事情）。 

　　8、ASP.NET。這個就不用我羅嗦了，你懂得……

　　9、整個開發過程你還會學習到一些工具的使用：

　　Visio，Dreamweaver，Vistual Studio，Sql Server或Access，(Vim, EditPlus, Notpad++)，各種瀏覽器以及FireBug的外掛，IE下的WebDevelopmentHelper等。

　　10、當然，如果你足夠用心，你還發掘出很多不錯的資源，例如MSDN，W3cSchool，一些前輩的部落格，一些技術論壇等等，這都是你未來前進道路上的財富。

　　綜上，如果你真的完成了自己的Web應用程式，並通過做這個程式學習了以上這些技術和工具的基礎內容，那麼恭喜你，你已經成為一個初級Web應用程式開發者了。

相關文件：十步讓你成為一名優秀的Web開發人員 、網站開發人員應該知道的62件事