網(wǎng)站開發(fā)流程和工具概述課件

講師：張迪網(wǎng)頁設(shè)計(專業(yè)必修課)2017講師：張迪網(wǎng)頁設(shè)計(專業(yè)必修課)20171網(wǎng)站開發(fā)基本流程和工具第二課網(wǎng)站開發(fā)基本流程和工具第二課2上節(jié)內(nèi)容回顧上節(jié)內(nèi)容回顧3上節(jié)課內(nèi)容回顧網(wǎng)站（Website）：在互聯(lián)網(wǎng)上提供網(wǎng)頁資源的通信工具。從計算機角度講，我們訪問的每個網(wǎng)站，都是駐留在服務(wù)器上24小時不間斷運行的服務(wù)程序。服務(wù)器（server）:在計算機網(wǎng)絡(luò)上提供服務(wù)的設(shè)備。需要響應(yīng)請求并進行處理。瀏覽器（brower）:是用于訪問萬維網(wǎng)的客戶端軟件。上節(jié)課內(nèi)容回顧網(wǎng)站（Website）：在互聯(lián)網(wǎng)上提供網(wǎng)頁資源上節(jié)課內(nèi)容回顧瀏覽器的組成：瀏覽器由排版引擎、外觀套件、開發(fā)人員工具等幾個部分組成。排版引擎：負責將HTML解釋為易讀的網(wǎng)頁，是瀏覽器的核心。常見的有webKit（chrome）、Gecko（firefox）、Trident（IE）上節(jié)課內(nèi)容回顧瀏覽器的組成：瀏覽器由排版引擎、外觀套件、開發(fā)網(wǎng)站的發(fā)展簡史與技術(shù)構(gòu)成PART01網(wǎng)站的發(fā)展簡史與技術(shù)構(gòu)成PART016早期網(wǎng)站結(jié)構(gòu)最簡單的網(wǎng)站結(jié)構(gòu)：最早Web主要被一幫科學家們用來共享和傳遞信息，全世界的Web服務(wù)器也就幾十臺。網(wǎng)頁直接以靜態(tài)HTML文本的形式存儲在服務(wù)器上。阿里早先做的黃頁也就是把企業(yè)信息通過進行HTML展示的Web應(yīng)用。早期網(wǎng)站結(jié)構(gòu)最簡單的網(wǎng)站結(jié)構(gòu)：動態(tài)內(nèi)容的出現(xiàn)（CGI）隨著web應(yīng)用越來越廣，其內(nèi)容量呈指數(shù)增加。這時候，人們希望能在服務(wù)器端把數(shù)據(jù)動態(tài)地組成網(wǎng)頁，以滿足各種需求。故而1993年誕生了CGI（CommonGatewayInterface）技術(shù)以實現(xiàn)這一點。當時主流的技術(shù)是用perl、C、shell腳本等編寫CGI程序，HTML內(nèi)容通過printf輸出到web服務(wù)器，再由服務(wù)器發(fā)給瀏覽器。動態(tài)內(nèi)容的出現(xiàn)（CGI）隨著web應(yīng)用越來越廣，其內(nèi)容量呈指Web后端（服務(wù)器端）腳本語言PHP/ASP/JSPCGI已經(jīng)提供動態(tài)網(wǎng)頁了，但是CGI技術(shù)還很初級，例如其對每個請求都啟動一個進程來處理，這樣性能很差。于是一些專門的web服務(wù)器端腳本語言被開發(fā)出來，專門做動態(tài)網(wǎng)頁開發(fā)。1994年php語言誕生，1996年asp誕生，1997年jsp誕生。這些語言能較高性能地處理請求，搭配上數(shù)據(jù)庫技術(shù)，web這個時候開始大規(guī)模發(fā)展起來。Web后端（服務(wù)器端）腳本語言PHP/ASP/JSPCGI已后端（服務(wù)器端）框架橫飛的年代隨著web大發(fā)展，許多大公司開始構(gòu)建大規(guī)模web應(yīng)用，在分布式、安全性、事務(wù)性等方面提出了更高的要求。為此，各種輔助web開發(fā)的技術(shù)框架開始層出不窮。企業(yè)級web應(yīng)用編程框架：J2EE/java（1999）.Net/asp（2000）靈活的一站式web開發(fā)框架：Rails/ruby（2004）codeIgniter/php(2008)Django/python（2005）SSH/java(2004)

后端（服務(wù)器端）框架橫飛的年代隨著web大發(fā)展，許多大公司開Ajax和javascript的流行前文中提到的腳本語言都是運行在服務(wù)器端的。但瀏覽器端也需要腳本語言實現(xiàn)一些特殊效果。Javascript就是這樣一種語言，可以實現(xiàn)很酷的頁面效果。2005年谷歌的Gmail采用了ajax技術(shù)，可以在不刷新整個頁面的情況下更快速地響應(yīng)用戶操作。使得javascript應(yīng)用更為廣泛，單頁應(yīng)用這個時候也流行起來。Ajax和javascript的流行前文中提到的腳本語言都是前端（瀏覽器端）框架的流行在ajax流行起來以后，前后端的分工非常清晰，前后端的關(guān)鍵協(xié)作點是Ajax接口，規(guī)定好交互接口后，前后端工程師就可以根據(jù)約定，分頭開工，在特定時間點做集成測試。這種模式有效地提升了效率?，F(xiàn)在，對于一個前端功能、交互復雜的SPA，JavaScript代碼很容易膨脹（超過10萬行）。很自然地，前端開發(fā)也出現(xiàn)了大量的框架，比較典型的包括AngularJS(2010),VUEJS(2010)，reactJS(2012)等。前端（瀏覽器端）框架的流行在ajax流行起來以后，前后端的分Javascript在服務(wù)器端的逆襲：Nodejs由于各大瀏覽器的競爭，使引擎性能不斷提升。于是許多人希望直接使用javascript像java一樣直接寫桌面程序和服務(wù)器程序。于是誕生了Nodejs。它直接使用chrome瀏覽器中用于解釋處理javascript的V8引擎，效率極高?，F(xiàn)在做web開發(fā)，已經(jīng)可以使用javascript從前端寫到后端。Javascript在服務(wù)器端的逆襲：Nodejs由于各大瀏移動端網(wǎng)頁開發(fā)技術(shù)今天，移動互聯(lián)網(wǎng)的日益發(fā)達，傳統(tǒng)網(wǎng)站建設(shè)更加重視移動端。在移動互聯(lián)網(wǎng)的早期，由于手機等移動設(shè)備性能太差，很難像電腦一樣流暢地顯示網(wǎng)頁，因此手機APP開發(fā)的規(guī)模蓋過了網(wǎng)頁開發(fā)。但隨著HTML5及其相關(guān)技術(shù)的應(yīng)用，以及移動端的性能提升，讓我們可以直接用網(wǎng)頁開發(fā)技術(shù)制作APP（如cordova,reactnative）或者直接訪問web應(yīng)用（如微信程序）。移動端網(wǎng)頁開發(fā)技術(shù)今天，移動互聯(lián)網(wǎng)的日益發(fā)達，傳統(tǒng)網(wǎng)站建設(shè)更小結(jié)e7d195523061f1c0d6ea1dd7b36377c92c11ddca0a6448a16FA487BA5F61AF2253005085FBFF04C7A998087942C8938002675E51E54E0B85A142DCFA69BB348EA976E7F8A8B79E671A63D2CFEB204EEF874495E8B387862C9F2D31E360DB45D317C92143E25085ED591A30FCF812D67C3D6EAB7D3B2526668EF71AE8EC10A7719ACCFFFCC7F175D4但不論web開發(fā)技術(shù)如何演進，其核心內(nèi)容依然是基于Internat的信息的傳輸、包裝與展現(xiàn)。并且隨著技術(shù)的進步，在易用性、可靠性、功能性上不斷向前進化。小結(jié)e7d195523061f1c0d6ea1dd7b36315網(wǎng)站開發(fā)流程PART02網(wǎng)站開發(fā)流程PART0216現(xiàn)代web開發(fā)流程項目整合總體設(shè)計需求分析測試與維護用戶需求分析由項目經(jīng)理牽頭，以程序員為重心，共同討論，完成用戶需求分析總體設(shè)計根據(jù)功能需求，設(shè)計網(wǎng)站欄目規(guī)劃，約定數(shù)據(jù)庫、文件關(guān)聯(lián)關(guān)系，并進行界面設(shè)計項目整合將工作分配給各個職能員工，完成后及時整合測試與與維護由項目組共同聯(lián)調(diào)測試，發(fā)現(xiàn)bug，完善一些具體的細節(jié)。最后進行網(wǎng)站部署上線和維護?，F(xiàn)代web開發(fā)流程項目整合總體設(shè)計需求分析測試與維護用戶需求171.甲方提出建站申請創(chuàng)建一個網(wǎng)站，或者web應(yīng)用，首先是由甲方（商業(yè)術(shù)語，指項目需求方）提出任務(wù)和要求給乙方（商業(yè)術(shù)語，指項目承接方）。甲方要提供網(wǎng)站制作要求、功能要求、基本素材等內(nèi)容。1.甲方提出建站申請創(chuàng)建一個網(wǎng)站，或者web應(yīng)用，首先是由甲2.用戶需求分析我們作為乙方，承接了項目以后，第一步是進行用戶需求分析。用戶提出的功能要求往往很籠統(tǒng)，甚至很多時候用戶自己并不太清楚自己的需要是什么。因此，乙方必須花足夠的精力，全面地理解客戶的各項要求，并且能夠準確、清晰地表達給參與項目開發(fā)的所有成員，保證開發(fā)過程按照客戶的需求去做，而不是為技術(shù)而遷就需求。2.用戶需求分析我們作為乙方，承接了項目以后，第一步是進行用3.設(shè)計建站方案經(jīng)過細致的需求捕獲活動后，就可以設(shè)計建站方案。通常我們需要設(shè)計一個靜態(tài)的網(wǎng)站demo，可以讓甲方直接感知，方便客戶與開發(fā)人員就網(wǎng)站系統(tǒng)的業(yè)務(wù)背景、設(shè)計風格、網(wǎng)站內(nèi)容達成共識。同時指定技術(shù)方案和工作日期安排，方便后期的制作和完善。3.設(shè)計建站方案經(jīng)過細致的需求捕獲活動后，就可以設(shè)計建站方案4.簽署合同，客戶支付預(yù)付款在甲乙雙方都覺得滿意的情況下，要簽署商業(yè)合同（以法律手段保護雙方利益）。接下來甲方要支付預(yù)付款。以前我承接項目時，預(yù)付款大約33%，項目中期檢查再要求甲方支付33%，項目完成則要求最后的33%。4.簽署合同，客戶支付預(yù)付款在甲乙雙方都覺得滿意的情況下，要5.網(wǎng)站制作接下來就是按照時間安排和設(shè)計方案，制作網(wǎng)站。需要開發(fā)人員熟練地部署服務(wù)器、制作頁面、定制各種功能、制作UI模板。其中，首頁制作是網(wǎng)站的重點。首頁是一個網(wǎng)站的門面，是一個網(wǎng)站的靈魂，因此，首頁制作的好壞是一個網(wǎng)站成功的關(guān)鍵所在。制作模板便于設(shè)計出具有統(tǒng)一風格的網(wǎng)站。5.網(wǎng)站制作接下來就是按照時間安排和設(shè)計方案，制作網(wǎng)站。6.網(wǎng)站內(nèi)部測試開發(fā)大致完成后，首先要進行測試，以保證用戶滿意度。測試大致包括如下內(nèi)容：是否按合同要求完成網(wǎng)頁各個連接是否可用瀏覽器兼容性如果是復雜的web應(yīng)用，則測試內(nèi)容還會更多。6.網(wǎng)站內(nèi)部測試開發(fā)大致完成后，首先要進行測試，以保證用戶滿7.站點發(fā)布網(wǎng)站開發(fā)好后，就要在公網(wǎng)服務(wù)器上發(fā)布。現(xiàn)在有許多云服務(wù)器提供商可以讓我們部署站點。例如亞馬遜云計算、新浪云、百度云、阿里云、騰訊云、恒創(chuàng)主機等等。當然，大型公司有自己的公網(wǎng)web服務(wù)器，也可以直接自己部署。發(fā)布的網(wǎng)站要有獨立的IP，為了方便訪問還要有域名（DNS）。7.站點發(fā)布網(wǎng)站開發(fā)好后，就要在公網(wǎng)服務(wù)器上發(fā)布。8.站點的維護根據(jù)合同內(nèi)容，一般乙方要提供半年或更長時間的網(wǎng)站維護工作。包括但不限于：防止黑客入侵日常服務(wù)器維護流量監(jiān)控內(nèi)容控制處理bug8.站點的維護根據(jù)合同內(nèi)容，一般乙方要提供半年或更長時間的網(wǎng)網(wǎng)站開發(fā)項目組的人員分工PART03網(wǎng)站開發(fā)項目組的人員分工PART0326人員分工網(wǎng)站開發(fā)項目組（工作室或公司）的本職，是吸引更多的商戶（B）或用戶（C）來使用自己的產(chǎn)品（P），并使得他們愿意為其花錢買單。既然如此，我們就可以把它比作一家餐館，將其中的只能與餐館的職能對應(yīng)起來，從而方便大家理解。項目經(jīng)理：餐廳經(jīng)理運營經(jīng)理：大堂經(jīng)理前端開發(fā)工程師：炒菜大師傅后端開發(fā)工程師：切菜大師傅運維工程師：洗碗工/維修工美術(shù)/交互設(shè)計師：菜品外觀設(shè)計銷售：推銷員前臺/客服/需求分析：服務(wù)員數(shù)據(jù)分析師：顧客調(diào)查員…..人員分工網(wǎng)站開發(fā)項目組（工作室或公司）的本職，是吸引更多的商271.項目經(jīng)理項目經(jīng)理是項目組的核心，也是項目組的領(lǐng)導。他負責項目的管理和協(xié)調(diào)，合理分配和使用資源，保證項目按計劃順利進行。他不僅要有管理下屬的能力，還要有何客戶溝通的能力。通常需求確認、合同簽署都需要他出面。

1.項目經(jīng)理項目經(jīng)理是項目組的核心，也是項目組的領(lǐng)導。2.運營經(jīng)理/策劃如果組織足夠大的話，項目經(jīng)理會有下屬運營經(jīng)理或者秘書之類，來負責打理產(chǎn)品日常運行維護的組織工作。包括負責有關(guān)網(wǎng)絡(luò)相關(guān)商業(yè)項目的研究、咨詢、策劃的工作，協(xié)助商業(yè)機構(gòu)借助網(wǎng)絡(luò)的優(yōu)勢降低成本，形成規(guī)模經(jīng)濟，獲得良好的商譽與商業(yè)上成功。2.運營經(jīng)理/策劃如果組織足夠大的話，項目經(jīng)理會有下屬運營經(jīng)3.前端開發(fā)工程師主要干活人員。以完成瀏覽器端最終呈現(xiàn)效果為目標。典型的工作成果是為用戶設(shè)計靜態(tài)網(wǎng)頁，以及將這些靜態(tài)網(wǎng)頁變成動態(tài)網(wǎng)頁。工作要求：熟練掌握目前互聯(lián)網(wǎng)流行的網(wǎng)頁制作方法HTML+CSS+javascript；對瀏覽器兼容性有很大的了解；對后端腳本語言，主要是php，java，.net等有所了解。3.前端開發(fā)工程師主要干活人員。以完成瀏覽器端最終呈現(xiàn)效果4.后端開發(fā)工程師以完成服務(wù)器功能為目標。典型的工作成果是設(shè)計數(shù)據(jù)庫，用后端腳本語言編寫接口，實現(xiàn)項目的各類功能。理論上任何互聯(lián)網(wǎng)項目都離不開web后端。哪怕是C/S架構(gòu)，也得有人編寫服務(wù)器端代碼。工作要求：熟練掌握至少一種后端腳本語言；熟練掌握后端腳本語言所對應(yīng)的的開發(fā)框架；熟練掌握設(shè)計和操作數(shù)據(jù)庫；4.后端開發(fā)工程師以完成服務(wù)器功能為目標。典型的工作成果是設(shè)5.運維工程師對于大公司/大項目組而言，必須要有運營維護人員的存在，以隨時處理網(wǎng)站運行中出現(xiàn)的各種問題。毫無疑問這是個累活，不過升職空間也很大。工作要求：非常熟悉服務(wù)器操作系統(tǒng)（通常是Linux）通宵計算機網(wǎng)絡(luò)相關(guān)內(nèi)容熟練掌握設(shè)計和操作數(shù)據(jù)庫5.運維工程師對于大公司/大項目組而言，必須要有運營維護人員6.美術(shù)/交互設(shè)計師美術(shù)/交互設(shè)計師負責網(wǎng)站的美術(shù)風格、界面設(shè)計、圖片制作，以及多媒體動畫等的制作。這是一個表面上特別光鮮的工作，但實際上noteasy，每次界面的改動，都要協(xié)調(diào)客戶、項目經(jīng)理、前端開發(fā)工程師等等成員。工作要求：強大的溝通協(xié)調(diào)能力強大的美術(shù)設(shè)計能力熟練掌握photoshop等設(shè)計工具6.美術(shù)/交互設(shè)計師美術(shù)/交互設(shè)計師負責網(wǎng)站的美術(shù)風格、界面7.其他人員營銷：負責推銷產(chǎn)品，或為網(wǎng)站吸引流量，如果站點有廣告業(yè)務(wù)，他也將負責站點的網(wǎng)絡(luò)廣告業(yè)務(wù)聯(lián)系、實施與監(jiān)測的工作。前臺/客服/需求分析：根據(jù)公司業(yè)務(wù)不同有很多稱呼。但總體是需要和很多人交流，尤其是用戶，其次是跟團隊的人溝通。7.其他人員營銷：負責推銷產(chǎn)品，或為網(wǎng)站吸引流量，如果站點有我們的小隊組成人員分工與項目組/公司的業(yè)務(wù)有關(guān)。不同的團隊，成員數(shù)量不同，職位也會不同，一個人也可能兼任多個職位。對于本課程，一個小隊要求三個人：1.隊長：相當于項目經(jīng)理，主要負責人，統(tǒng)籌小隊工作，答辯主講人。2.網(wǎng)頁開發(fā)工程師：兼任前端、后端、運維工程師，負責網(wǎng)站發(fā)布、內(nèi)容制作。3.交互設(shè)計師：負責網(wǎng)站美術(shù)設(shè)計，特效實現(xiàn)和內(nèi)容制作。我們的小隊組成人員分工與項目組/公司的業(yè)務(wù)有關(guān)。不同的團隊，35相關(guān)開發(fā)工具PART04相關(guān)開發(fā)工具PART04361.網(wǎng)站原型設(shè)計工具1.網(wǎng)站原型設(shè)計工具2.圖形圖像處理工具現(xiàn)代網(wǎng)頁開發(fā)不能沒有圖片。處理圖片的工作主要是photoshop，除此以外還有矢量圖制作工具illustrator等。前端工程師、美工\交互設(shè)計師要熟練掌握photoshop的使用。2.圖形圖像處理工具現(xiàn)代網(wǎng)頁開發(fā)不能沒有圖片。處理圖片的工作3.網(wǎng)頁代碼編輯工具網(wǎng)頁代碼編輯工具，必須能夠處理html,css,javascript等語言，提供代碼高亮，最好還要能提供常用類庫的代碼提示等功能。本人推薦內(nèi)存4G以上的同學使用webstorm編輯器。4G或4G以下的同學可以使用sublime。3.網(wǎng)頁代碼編輯工具網(wǎng)頁代碼編輯工具，必須能夠處理html,4.網(wǎng)頁調(diào)試工具寫好的網(wǎng)頁程序需要顯示和調(diào)試。這里我們就使用瀏覽器做這一點。本課要求使用webkit核心的瀏覽器。為了避免差異導致的問題，這里要求都是用360急速瀏覽器。

打開webkit核心的瀏覽器，按F12可以打開開發(fā)人員工具。我們以后會經(jīng)常使用它。4.網(wǎng)頁調(diào)試工具寫好的網(wǎng)頁程序需要顯示和調(diào)試。這里我5.代碼和進度管理工具在一個團隊中，協(xié)作編寫代碼經(jīng)常會出現(xiàn)版本不統(tǒng)一的問題。為此，Linux的創(chuàng)始人發(fā)明了分布式代碼版本控制工具git來解決這個問題，兵獲得了很大成功。

我們也要使用git。首先去git官網(wǎng)，根據(jù)你電腦的系統(tǒng)型號，下載對應(yīng)的git安裝包并安裝。/5.代碼和進度管理工具在一個團隊中，協(xié)作編寫代碼經(jīng)常5.代碼和進度管理工具Git是一個命令行工具，對于一般學生來說可能不太好用。所以我們再安裝一個git的圖形界面。叫tortoisegit。安裝好以后你就可以在右鍵菜單中使用git了，非常方便。/5.代碼和進度管理工具Git是一個命令行工具，對于一般學生來5.代碼和進度管理工具Git是一個分布式的版本管理工具。我們還要找一個托管網(wǎng)站，讓我們的代碼通過git存放在那里。世界最知名的git代碼托管網(wǎng)站是github。牛程序員都在上面有各種項目，而且都是開源的。讓我們試試在上面下載大牛項目看看吧！/5.代碼和進度管理工具Git是一個分布式的版本管理工具。我們5.代碼和進度管理工具5.代碼和進度管理工具6.其他以下工具非常有用，但是先在這里描述一下：代碼比對工具：winmerge，是一款運行于Windows系統(tǒng)下的免費開源的文件比較/合并工具，使用它可以非常方便地比較多個文檔內(nèi)容甚至是文件夾與文件夾之間的文件差異?？焖偎阉鞴ぞ撸篍verything，是速度最快的文件搜索軟件。其速度之快令人震驚,百G硬盤幾十萬個文件,可以在幾秒鐘之內(nèi)完成索引;文件名搜索瞬間呈現(xiàn)結(jié)果。筆記軟件，有道云筆記：有道云筆記是網(wǎng)易出品,獲得5000萬用戶青睞的筆記軟件。提供了PC端、移動端、網(wǎng)頁端等多端應(yīng)用,用戶可以隨時隨地對線上資料進行編輯、分享以及協(xié)同。6.其他以下工具非常有用，但是先在這里描述一下：蘭州理工大學計算機與通信學院感謝您的聆聽指正2018蘭州理工大學計算機與通信學院感謝您的聆聽指正201846講師：張迪網(wǎng)頁設(shè)計(專業(yè)必修課)2017講師：張迪網(wǎng)頁設(shè)計(專業(yè)必修課)201747網(wǎng)站開發(fā)基本流程和工具第二課網(wǎng)站開發(fā)基本流程和工具第二課48上節(jié)內(nèi)容回顧上節(jié)內(nèi)容回顧49上節(jié)課內(nèi)容回顧網(wǎng)站（Website）：在互聯(lián)網(wǎng)上提供網(wǎng)頁資源的通信工具。從計算機角度講，我們訪問的每個網(wǎng)站，都是駐留在服務(wù)器上24小時不間斷運行的服務(wù)程序。服務(wù)器（server）:在計算機網(wǎng)絡(luò)上提供服務(wù)的設(shè)備。需要響應(yīng)請求并進行處理。瀏覽器（brower）:是用于訪問萬維網(wǎng)的客戶端軟件。上節(jié)課內(nèi)容回顧網(wǎng)站（Website）：在互聯(lián)網(wǎng)上提供網(wǎng)頁資源上節(jié)課內(nèi)容回顧瀏覽器的組成：瀏覽器由排版引擎、外觀套件、開發(fā)人員工具等幾個部分組成。排版引擎：負責將HTML解釋為易讀的網(wǎng)頁，是瀏覽器的核心。常見的有webKit（chrome）、Gecko（firefox）、Trident（IE）上節(jié)課內(nèi)容回顧瀏覽器的組成：瀏覽器由排版引擎、外觀套件、開發(fā)網(wǎng)站的發(fā)展簡史與技術(shù)構(gòu)成PART01網(wǎng)站的發(fā)展簡史與技術(shù)構(gòu)成PART0152早期網(wǎng)站結(jié)構(gòu)最簡單的網(wǎng)站結(jié)構(gòu)：最早Web主要被一幫科學家們用來共享和傳遞信息，全世界的Web服務(wù)器也就幾十臺。網(wǎng)頁直接以靜態(tài)HTML文本的形式存儲在服務(wù)器上。阿里早先做的黃頁也就是把企業(yè)信息通過進行HTML展示的Web應(yīng)用。早期網(wǎng)站結(jié)構(gòu)最簡單的網(wǎng)站結(jié)構(gòu)：動態(tài)內(nèi)容的出現(xiàn)（CGI）隨著web應(yīng)用越來越廣，其內(nèi)容量呈指數(shù)增加。這時候，人們希望能在服務(wù)器端把數(shù)據(jù)動態(tài)地組成網(wǎng)頁，以滿足各種需求。故而1993年誕生了CGI（CommonGatewayInterface）技術(shù)以實現(xiàn)這一點。當時主流的技術(shù)是用perl、C、shell腳本等編寫CGI程序，HTML內(nèi)容通過printf輸出到web服務(wù)器，再由服務(wù)器發(fā)給瀏覽器。動態(tài)內(nèi)容的出現(xiàn)（CGI）隨著web應(yīng)用越來越廣，其內(nèi)容量呈指Web后端（服務(wù)器端）腳本語言PHP/ASP/JSPCGI已經(jīng)提供動態(tài)網(wǎng)頁了，但是CGI技術(shù)還很初級，例如其對每個請求都啟動一個進程來處理，這樣性能很差。于是一些專門的web服務(wù)器端腳本語言被開發(fā)出來，專門做動態(tài)網(wǎng)頁開發(fā)。1994年php語言誕生，1996年asp誕生，1997年jsp誕生。這些語言能較高性能地處理請求，搭配上數(shù)據(jù)庫技術(shù)，web這個時候開始大規(guī)模發(fā)展起來。Web后端（服務(wù)器端）腳本語言PHP/ASP/JSPCGI已后端（服務(wù)器端）框架橫飛的年代隨著web大發(fā)展，許多大公司開始構(gòu)建大規(guī)模web應(yīng)用，在分布式、安全性、事務(wù)性等方面提出了更高的要求。為此，各種輔助web開發(fā)的技術(shù)框架開始層出不窮。企業(yè)級web應(yīng)用編程框架：J2EE/java（1999）.Net/asp（2000）靈活的一站式web開發(fā)框架：Rails/ruby（2004）codeIgniter/php(2008)Django/python（2005）SSH/java(2004)

后端（服務(wù)器端）框架橫飛的年代隨著web大發(fā)展，許多大公司開Ajax和javascript的流行前文中提到的腳本語言都是運行在服務(wù)器端的。但瀏覽器端也需要腳本語言實現(xiàn)一些特殊效果。Javascript就是這樣一種語言，可以實現(xiàn)很酷的頁面效果。2005年谷歌的Gmail采用了ajax技術(shù)，可以在不刷新整個頁面的情況下更快速地響應(yīng)用戶操作。使得javascript應(yīng)用更為廣泛，單頁應(yīng)用這個時候也流行起來。Ajax和javascript的流行前文中提到的腳本語言都是前端（瀏覽器端）框架的流行在ajax流行起來以后，前后端的分工非常清晰，前后端的關(guān)鍵協(xié)作點是Ajax接口，規(guī)定好交互接口后，前后端工程師就可以根據(jù)約定，分頭開工，在特定時間點做集成測試。這種模式有效地提升了效率?，F(xiàn)在，對于一個前端功能、交互復雜的SPA，JavaScript代碼很容易膨脹（超過10萬行）。很自然地，前端開發(fā)也出現(xiàn)了大量的框架，比較典型的包括AngularJS(2010),VUEJS(2010)，reactJS(2012)等。前端（瀏覽器端）框架的流行在ajax流行起來以后，前后端的分Javascript在服務(wù)器端的逆襲：Nodejs由于各大瀏覽器的競爭，使引擎性能不斷提升。于是許多人希望直接使用javascript像java一樣直接寫桌面程序和服務(wù)器程序。于是誕生了Nodejs。它直接使用chrome瀏覽器中用于解釋處理javascript的V8引擎，效率極高?，F(xiàn)在做web開發(fā)，已經(jīng)可以使用javascript從前端寫到后端。Javascript在服務(wù)器端的逆襲：Nodejs由于各大瀏移動端網(wǎng)頁開發(fā)技術(shù)今天，移動互聯(lián)網(wǎng)的日益發(fā)達，傳統(tǒng)網(wǎng)站建設(shè)更加重視移動端。在移動互聯(lián)網(wǎng)的早期，由于手機等移動設(shè)備性能太差，很難像電腦一樣流暢地顯示網(wǎng)頁，因此手機APP開發(fā)的規(guī)模蓋過了網(wǎng)頁開發(fā)。但隨著HTML5及其相關(guān)技術(shù)的應(yīng)用，以及移動端的性能提升，讓我們可以直接用網(wǎng)頁開發(fā)技術(shù)制作APP（如cordova,reactnative）或者直接訪問web應(yīng)用（如微信程序）。移動端網(wǎng)頁開發(fā)技術(shù)今天，移動互聯(lián)網(wǎng)的日益發(fā)達，傳統(tǒng)網(wǎng)站建設(shè)更小結(jié)e7d195523061f1c0d6ea1dd7b36377c92c11ddca0a6448a16FA487BA5F61AF2253005085FBFF04C7A998087942C8938002675E51E54E0B85A142DCFA69BB348EA976E7F8A8B79E671A63D2CFEB204EEF874495E8B387862C9F2D31E360DB45D317C92143E25085ED591A30FCF812D67C3D6EAB7D3B2526668EF71AE8EC10A7719ACCFFFCC7F175D4但不論web開發(fā)技術(shù)如何演進，其核心內(nèi)容依然是基于Internat的信息的傳輸、包裝與展現(xiàn)。并且隨著技術(shù)的進步，在易用性、可靠性、功能性上不斷向前進化。小結(jié)e7d195523061f1c0d6ea1dd7b36361網(wǎng)站開發(fā)流程PART02網(wǎng)站開發(fā)流程PART0262現(xiàn)代web開發(fā)流程項目整合總體設(shè)計需求分析測試與維護用戶需求分析由項目經(jīng)理牽頭，以程序員為重心，共同討論，完成用戶需求分析總體設(shè)計根據(jù)功能需求，設(shè)計網(wǎng)站欄目規(guī)劃，約定數(shù)據(jù)庫、文件關(guān)聯(lián)關(guān)系，并進行界面設(shè)計項目整合將工作分配給各個職能員工，完成后及時整合測試與與維護由項目組共同聯(lián)調(diào)測試，發(fā)現(xiàn)bug，完善一些具體的細節(jié)。最后進行網(wǎng)站部署上線和維護。現(xiàn)代web開發(fā)流程項目整合總體設(shè)計需求分析測試與維護用戶需求631.甲方提出建站申請創(chuàng)建一個網(wǎng)站，或者web應(yīng)用，首先是由甲方（商業(yè)術(shù)語，指項目需求方）提出任務(wù)和要求給乙方（商業(yè)術(shù)語，指項目承接方）。甲方要提供網(wǎng)站制作要求、功能要求、基本素材等內(nèi)容。1.甲方提出建站申請創(chuàng)建一個網(wǎng)站，或者web應(yīng)用，首先是由甲2.用戶需求分析我們作為乙方，承接了項目以后，第一步是進行用戶需求分析。用戶提出的功能要求往往很籠統(tǒng)，甚至很多時候用戶自己并不太清楚自己的需要是什么。因此，乙方必須花足夠的精力，全面地理解客戶的各項要求，并且能夠準確、清晰地表達給參與項目開發(fā)的所有成員，保證開發(fā)過程按照客戶的需求去做，而不是為技術(shù)而遷就需求。2.用戶需求分析我們作為乙方，承接了項目以后，第一步是進行用3.設(shè)計建站方案經(jīng)過細致的需求捕獲活動后，就可以設(shè)計建站方案。通常我們需要設(shè)計一個靜態(tài)的網(wǎng)站demo，可以讓甲方直接感知，方便客戶與開發(fā)人員就網(wǎng)站系統(tǒng)的業(yè)務(wù)背景、設(shè)計風格、網(wǎng)站內(nèi)容達成共識。同時指定技術(shù)方案和工作日期安排，方便后期的制作和完善。3.設(shè)計建站方案經(jīng)過細致的需求捕獲活動后，就可以設(shè)計建站方案4.簽署合同，客戶支付預(yù)付款在甲乙雙方都覺得滿意的情況下，要簽署商業(yè)合同（以法律手段保護雙方利益）。接下來甲方要支付預(yù)付款。以前我承接項目時，預(yù)付款大約33%，項目中期檢查再要求甲方支付33%，項目完成則要求最后的33%。4.簽署合同，客戶支付預(yù)付款在甲乙雙方都覺得滿意的情況下，要5.網(wǎng)站制作接下來就是按照時間安排和設(shè)計方案，制作網(wǎng)站。需要開發(fā)人員熟練地部署服務(wù)器、制作頁面、定制各種功能、制作UI模板。其中，首頁制作是網(wǎng)站的重點。首頁是一個網(wǎng)站的門面，是一個網(wǎng)站的靈魂，因此，首頁制作的好壞是一個網(wǎng)站成功的關(guān)鍵所在。制作模板便于設(shè)計出具有統(tǒng)一風格的網(wǎng)站。5.網(wǎng)站制作接下來就是按照時間安排和設(shè)計方案，制作網(wǎng)站。6.網(wǎng)站內(nèi)部測試開發(fā)大致完成后，首先要進行測試，以保證用戶滿意度。測試大致包括如下內(nèi)容：是否按合同要求完成網(wǎng)頁各個連接是否可用瀏覽器兼容性如果是復雜的web應(yīng)用，則測試內(nèi)容還會更多。6.網(wǎng)站內(nèi)部測試開發(fā)大致完成后，首先要進行測試，以保證用戶滿7.站點發(fā)布網(wǎng)站開發(fā)好后，就要在公網(wǎng)服務(wù)器上發(fā)布?，F(xiàn)在有許多云服務(wù)器提供商可以讓我們部署站點。例如亞馬遜云計算、新浪云、百度云、阿里云、騰訊云、恒創(chuàng)主機等等。當然，大型公司有自己的公網(wǎng)web服務(wù)器，也可以直接自己部署。發(fā)布的網(wǎng)站要有獨立的IP，為了方便訪問還要有域名（DNS）。7.站點發(fā)布網(wǎng)站開發(fā)好后，就要在公網(wǎng)服務(wù)器上發(fā)布。8.站點的維護根據(jù)合同內(nèi)容，一般乙方要提供半年或更長時間的網(wǎng)站維護工作。包括但不限于：防止黑客入侵日常服務(wù)器維護流量監(jiān)控內(nèi)容控制處理bug8.站點的維護根據(jù)合同內(nèi)容，一般乙方要提供半年或更長時間的網(wǎng)網(wǎng)站開發(fā)項目組的人員分工PART03網(wǎng)站開發(fā)項目組的人員分工PART0372人員分工網(wǎng)站開發(fā)項目組（工作室或公司）的本職，是吸引更多的商戶（B）或用戶（C）來使用自己的產(chǎn)品（P），并使得他們愿意為其花錢買單。既然如此，我們就可以把它比作一家餐館，將其中的只能與餐館的職能對應(yīng)起來，從而方便大家理解。項目經(jīng)理：餐廳經(jīng)理運營經(jīng)理：大堂經(jīng)理前端開發(fā)工程師：炒菜大師傅后端開發(fā)工程師：切菜大師傅運維工程師：洗碗工/維修工美術(shù)/交互設(shè)計師：菜品外觀設(shè)計銷售：推銷員前臺/客服/需求分析：服務(wù)員數(shù)據(jù)分析師：顧客調(diào)查員…..人員分工網(wǎng)站開發(fā)項目組（工作室或公司）的本職，是吸引更多的商731.項目經(jīng)理項目經(jīng)理是項目組的核心，也是項目組的領(lǐng)導。他負責項目的管理和協(xié)調(diào)，合理分配和使用資源，保證項目按計劃順利進行。他不僅要有管理下屬的能力，還要有何客戶溝通的能力。通常需求確認、合同簽署都需要他出面。

1.項目經(jīng)理項目經(jīng)理是項目組的核心，也是項目組的領(lǐng)導。2.運營經(jīng)理/策劃如果組織足夠大的話，項目經(jīng)理會有下屬運營經(jīng)理或者秘書之類，來負責打理產(chǎn)品日常運行維護的組織工作。包括負責有關(guān)網(wǎng)絡(luò)相關(guān)商業(yè)項目的研究、咨詢、策劃的工作，協(xié)助商業(yè)機構(gòu)借助網(wǎng)絡(luò)的優(yōu)勢降低成本，形成規(guī)模經(jīng)濟，獲得良好的商譽與商業(yè)上成功。2.運營經(jīng)理/策劃如果組織足夠大的話，項目經(jīng)理會有下屬運營經(jīng)3.前端開發(fā)工程師主要干活人員。以完成瀏覽器端最終呈現(xiàn)效果為目標。典型的工作成果是為用戶設(shè)計靜態(tài)網(wǎng)頁，以及將這些靜態(tài)網(wǎng)頁變成動態(tài)網(wǎng)頁。工作要求：熟練掌握目前互聯(lián)網(wǎng)流行的網(wǎng)頁制作方法HTML+CSS+javascript；對瀏覽器兼容性有很大的了解；對后端腳本語言，主要是php，java，.net等有所了解。3.前端開發(fā)工程師主要干活人員。以完成瀏覽器端最終呈現(xiàn)效果4.后端開發(fā)工程師以完成服務(wù)器功能為目標。典型的工作成果是設(shè)計數(shù)據(jù)庫，用后端腳本語言編寫接口，實現(xiàn)項目的各類功能。理論上任何互聯(lián)網(wǎng)項目都離不開web后端。哪怕是C/S架構(gòu)，也得有人編寫服務(wù)器端代碼。工作要求：熟練掌握至少一種后端腳本語言；熟練掌握后端腳本語言所對應(yīng)的的開發(fā)框架；熟練掌握設(shè)計和操作數(shù)據(jù)庫；4.后端開發(fā)工程師以完成服務(wù)器功能為目標。典型的工作成果是設(shè)5.運維工程師對于大公司/大項目組而言，必須要有運營維護人員的存在，以隨時處理網(wǎng)站運行中出現(xiàn)的各種問題。毫無疑問這是個累活，不過升職空間也很大。工作要求：非常熟悉服務(wù)器操作系統(tǒng)（通常是Linux）通宵計算機網(wǎng)絡(luò)相關(guān)內(nèi)容熟練掌握設(shè)計和操作數(shù)據(jù)庫5.運維工程師對于大公司/大項目組而言，必須要有運營維護人員6.美術(shù)/交互設(shè)計師美術(shù)/交互設(shè)計師負責網(wǎng)站的美術(shù)風格、界面設(shè)計、圖片制作，以及多媒體動畫等的制作。這是一個表面上特別光鮮的工作，但實際上noteasy，每次界面的改動，都要協(xié)調(diào)客戶、項目經(jīng)理、前端開發(fā)工程師等等成員。工作要求：強大的溝通協(xié)調(diào)能力強大的美術(shù)設(shè)計能力熟練掌握photoshop等設(shè)計工具6.美術(shù)/交互設(shè)計師美術(shù)/交互設(shè)計師負責網(wǎng)站的美術(shù)風格、界面7.其他人員營銷：負責推銷產(chǎn)品，或為網(wǎng)站吸引流量，如果站點有廣告業(yè)務(wù)，他也將負責站點的網(wǎng)絡(luò)廣告業(yè)務(wù)聯(lián)系、實施與監(jiān)測的工作。前臺/客服/需求分析：根據(jù)公司業(yè)務(wù)不同有很多稱呼。但總體是需要和很多人交流，尤其是用戶，其次是跟團隊的人溝通。7.其他人員營銷：負責推銷產(chǎn)品，或為網(wǎng)站吸引流量，如果站點有我們的小隊組成人員分工與項目組/公司的業(yè)務(wù)有關(guān)。不同的團隊，成員數(shù)量不同，職位也會不同，一個人也可能兼任多個職位。對于本課程，一個小隊要求三個人：1.隊長：相當于項目經(jīng)理，主要負責人，統(tǒng)籌小隊工作，答辯主講人。2.網(wǎng)頁開發(fā)工程師：兼任前端、后端、運維工程師，負責網(wǎng)站發(fā)布、內(nèi)容制作。3.交互設(shè)計師：負責網(wǎng)站美術(shù)設(shè)計，特效實