1、,網(wǎng)頁設(shè)計(專業(yè)必修課),2017,網(wǎng)站開發(fā)基本流程和工具,第二課,上節(jié)內(nèi)容回顧,因特網(wǎng)（Internet）：連接全球信息資源的巨型計算機(jī)網(wǎng)絡(luò)的總稱 萬維網(wǎng)（web或www）：因特網(wǎng)上的一個服務(wù)，允許用戶通過瀏覽器訪問web服務(wù)器上的資源。 統(tǒng)一資源定位器（URL）：即網(wǎng)址。 超文本傳輸協(xié)議（HTTP）：傳輸超文本（網(wǎng)頁）的網(wǎng)絡(luò)協(xié)議。 超文本標(biāo)記語言（HTML）：編寫網(wǎng)頁的標(biāo)記語言,上節(jié)課內(nèi)容回顧,網(wǎng)站（Website）：在互聯(lián)網(wǎng)上提供網(wǎng)頁資源的通信工具。從計算機(jī)角度講，我們訪問的每個網(wǎng)站，都是駐留在服務(wù)器上24小時不間斷運(yùn)行的服務(wù)程序。 服務(wù)器（server）: 在計算機(jī)網(wǎng)絡(luò)上提供服務(wù)的設(shè)備

2、。需要響應(yīng)請求并進(jìn)行處理。 瀏覽器（brower）: 是用于訪問萬維網(wǎng)的客戶端軟件。,上節(jié)課內(nèi)容回顧,瀏覽器的組成：瀏覽器由排版引擎、外觀套件、開發(fā)人員工具等幾個部分組成。 排版引擎：負(fù)責(zé)將HTML解釋為易讀的網(wǎng)頁，是瀏覽器的核心。常見的有webKit（chrome）、Gecko（firefox）、Trident（IE）,網(wǎng)站的發(fā)展簡史與技術(shù)構(gòu)成,PART 01,早期網(wǎng)站結(jié)構(gòu),最簡單的網(wǎng)站結(jié)構(gòu)： 最早Web主要被一幫科學(xué)家們用來共享和傳遞信息，全世界的Web服務(wù)器也就幾十臺。網(wǎng)頁直接以靜態(tài)HTML文本的形式存儲在服務(wù)器上。 阿里早先做的黃頁也就是把企業(yè)信息通過進(jìn)行HTML展示的Web應(yīng)用。,動

3、態(tài)內(nèi)容的出現(xiàn)（CGI）,隨著web應(yīng)用越來越廣，其內(nèi)容量呈指數(shù)增加。這時候，人們希望能在服務(wù)器端把數(shù)據(jù)動態(tài)地組成網(wǎng)頁，以滿足各種需求。故而1993年誕生了CGI（Common Gateway Interface）技術(shù)以實現(xiàn)這一點(diǎn)。當(dāng)時主流的技術(shù)是用perl、C、shell腳本等編寫CGI程序，HTML內(nèi)容通過printf輸出到web服務(wù)器，再由服務(wù)器發(fā)給瀏覽器。,Web后端（服務(wù)器端）腳本語言PHP/ASP/JSP,CGI已經(jīng)提供動態(tài)網(wǎng)頁了，但是CGI技術(shù)還很初級，例如其對每個請求都啟動一個進(jìn)程來處理，這樣性能很差。 于是一些專門的web服務(wù)器端腳本語言被開發(fā)出來，專門做動態(tài)網(wǎng)頁開發(fā)。1994

4、年php語言誕生，1996年asp誕生，1997年jsp誕生。這些語言能較高性能地處理請求，搭配上數(shù)據(jù)庫技術(shù)，web這個時候開始大規(guī)模發(fā)展起來。,后端（服務(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 (200

5、4),Ajax和javascript的流行,前文中提到的腳本語言都是運(yùn)行在服務(wù)器端的。但瀏覽器端也需要腳本語言實現(xiàn)一些特殊效果。Javascript就是這樣一種語言，可以實現(xiàn)很酷的頁面效果。 2005年谷歌的Gmail采用了ajax技術(shù)，可以在不刷新整個頁面的情況下更快速地響應(yīng)用戶操作。使得javascript應(yīng)用更為廣泛，單頁應(yīng)用這個時候也流行起來。,前端（瀏覽器端）框架的流行,在ajax流行起來以后，前后端的分工非常清晰，前后端的關(guān)鍵協(xié)作點(diǎn)是 Ajax 接口，規(guī)定好交互接口后，前后端工程師就可以根據(jù)約定，分頭開工，在特定時間點(diǎn)做集成測試。這種模式有效地提升了效率?，F(xiàn)在，對于一個前端功能、交

6、互復(fù)雜的SPA，JavaScript代碼很容易膨脹（超過10萬行）。很自然地，前端開發(fā)也出現(xiàn)了大量的框架，比較典型的包括AngularJS(2010), VUEJS(2010)，reactJS(2012)等。,Javascript在服務(wù)器端的逆襲：Nodejs,由于各大瀏覽器的競爭，使引擎性能不斷提升。于是許多人希望直接使用javascript像java一樣直接寫桌面程序和服務(wù)器程序。于是誕生了Nodejs。它直接使用chrome瀏覽器中用于解釋處理javascript的V8引擎，效率極高?，F(xiàn)在做web開發(fā)，已經(jīng)可以使用javascript從前端寫到后端。,移動端網(wǎng)頁開發(fā)技術(shù),今天，移動互聯(lián)網(wǎng)

7、的日益發(fā)達(dá)，傳統(tǒng)網(wǎng)站建設(shè)更加重視移動端。 在移動互聯(lián)網(wǎng)的早期，由于手機(jī)等移動設(shè)備性能太差，很難像電腦一樣流暢地顯示網(wǎng)頁，因此手機(jī)APP開發(fā)的規(guī)模蓋過了網(wǎng)頁開發(fā)。 但隨著HTML5及其相關(guān)技術(shù)的應(yīng)用，以及移動端的性能提升，讓我們可以直接用網(wǎng)頁開發(fā)技術(shù)制作APP（如cordova, react native）或者直接訪問web應(yīng)用（如微信程序）。,小結(jié),e7d195523061f1c0d6ea1dd7b36377c92c11ddca0a6448a16FA487BA5F61AF2253005085FBFF04C7A998087942C8938002675E51E54E0B85A142DCFA69BB

8、348EA976E7F8A8B79E671A63D2CFEB204EEF874495E8B387862C9F2D31E360DB45D317C92143E25085ED591A30FCF812D67C3D6EAB7D3B2526668EF71AE8EC10A7719ACCFFFCC7F175D4,但不論web開發(fā)技術(shù)如何演進(jìn)，其核心內(nèi)容依然是基于Internat的信息的傳輸、包裝與展現(xiàn)。并且隨著技術(shù)的進(jìn)步，在易用性、可靠性、功能性上不斷向前進(jìn)化。,網(wǎng)站開發(fā)流程,PART 02,現(xiàn)代web開發(fā)流程,項目整合,總體設(shè)計,需求分析,測試與維護(hù),用戶需求分析 由項目經(jīng)理牽頭，以程序員為重心，共同討論，

9、完成用戶需求分析,總體設(shè)計 根據(jù)功能需求，設(shè)計網(wǎng)站欄目規(guī)劃，約定數(shù)據(jù)庫、文件關(guān)聯(lián)關(guān)系，并進(jìn)行界面設(shè)計,項目整合 將工作分配給各個職能員工，完成后及時整合,測試與與維護(hù) 由項目組共同聯(lián)調(diào)測試，發(fā)現(xiàn)bug，完善一些具體的細(xì)節(jié)。最后進(jìn)行網(wǎng)站部署上線和維護(hù)。,1.甲方提出建站申請,創(chuàng)建一個網(wǎng)站，或者web應(yīng)用，首先是由甲方（商業(yè)術(shù)語，指項目需求方）提出任務(wù)和要求給乙方（商業(yè)術(shù)語，指項目承接方）。 甲方要提供網(wǎng)站制作要求、功能要求、基本素材等內(nèi)容。,2.用戶需求分析,我們作為乙方，承接了項目以后，第一步是進(jìn)行用戶需求分析。 用戶提出的功能要求往往很籠統(tǒng)，甚至很多時候用戶自己并不太清楚自己的需要是什么。因

10、此，乙方必須花足夠的精力，全面地理解客戶的各項要求，并且能夠準(zhǔn)確、清晰地表達(dá)給參與項目開發(fā)的所有成員，保證開發(fā)過程按照客戶的需求去做，而不是為技術(shù)而遷就需求。,3.設(shè)計建站方案,經(jīng)過細(xì)致的需求捕獲活動后，就可以設(shè)計建站方案。通常我們需要設(shè)計一個靜態(tài)的網(wǎng)站demo，可以讓甲方直接感知，方便客戶與開發(fā)人員就網(wǎng)站系統(tǒng)的業(yè)務(wù)背景、設(shè)計風(fēng)格、網(wǎng)站內(nèi)容達(dá)成共識。同時指定技術(shù)方案和工作日期安排，方便后期的制作和完善。,4.簽署合同，客戶支付預(yù)付款,在甲乙雙方都覺得滿意的情況下，要簽署商業(yè)合同（以法律手段保護(hù)雙方利益）。接下來甲方要支付預(yù)付款。 以前我承接項目時，預(yù)付款大約33%，項目中期檢查再要求甲方支付3

11、3%，項目完成則要求最后的33%。,5.網(wǎng)站制作,接下來就是按照時間安排和設(shè)計方案，制作網(wǎng)站。 需要開發(fā)人員熟練地部署服務(wù)器、制作頁面、定制各種功能、制作UI模板。 其中，首頁制作是網(wǎng)站的重點(diǎn)。首頁是一個網(wǎng)站的門面，是一個網(wǎng)站的靈魂，因此，首頁制作的好壞是一個網(wǎng)站成功的關(guān)鍵所在。制作模板便于設(shè)計出具有統(tǒng)一風(fēng)格的網(wǎng)站。,6.網(wǎng)站內(nèi)部測試,開發(fā)大致完成后，首先要進(jìn)行測試，以保證用戶滿意度。測試大致包括如下內(nèi)容： 是否按合同要求完成 網(wǎng)頁各個連接是否可用 瀏覽器兼容性 如果是復(fù)雜的web應(yīng)用，則測試內(nèi)容還會更多。,7.站點(diǎn)發(fā)布,網(wǎng)站開發(fā)好后，就要在公網(wǎng)服務(wù)器上發(fā)布。 現(xiàn)在有許多云服務(wù)器提供商可以讓我

12、們部署站點(diǎn)。例如亞馬遜云計算、新浪云、百度云、阿里云、騰訊云、恒創(chuàng)主機(jī)等等。當(dāng)然，大型公司有自己的公網(wǎng)web服務(wù)器，也可以直接自己部署。 發(fā)布的網(wǎng)站要有獨(dú)立的IP，為了方便訪問還要有域名（DNS）。,8.站點(diǎn)的維護(hù),根據(jù)合同內(nèi)容，一般乙方要提供半年或更長時間的網(wǎng)站維護(hù)工作。包括但不限于： 防止黑客入侵 日常服務(wù)器維護(hù) 流量監(jiān)控 內(nèi)容控制 處理bug,網(wǎng)站開發(fā)項目組的人員分工,PART 03,人員分工,網(wǎng)站開發(fā)項目組（工作室或公司）的本職，是吸引更多的商戶（B）或用戶（C）來使用自己的產(chǎn)品（P），并使得他們愿意為其花錢買單。既然如此，我們就可以把它比作一家餐館，將其中的只能與餐館的職能對應(yīng)起來，

13、從而方便大家理解。,項目經(jīng)理：餐廳經(jīng)理 運(yùn)營經(jīng)理：大堂經(jīng)理 前端開發(fā)工程師：炒菜大師傅 后端開發(fā)工程師：切菜大師傅 運(yùn)維工程師：洗碗工/維修工 美術(shù)/交互設(shè)計師：菜品外觀設(shè)計 銷售：推銷員 前臺/客服/需求分析：服務(wù)員 數(shù)據(jù)分析師：顧客調(diào)查員 .,1.項目經(jīng)理,項目經(jīng)理是項目組的核心，也是項目組的領(lǐng)導(dǎo)。 他負(fù)責(zé)項目的管理和協(xié)調(diào)，合理分配和使用資源，保證項目按計劃順利進(jìn)行。 他不僅要有管理下屬的能力，還要有何客戶溝通的能力。通常需求確認(rèn)、合同簽署都需要他出面。,2.運(yùn)營經(jīng)理/策劃,如果組織足夠大的話，項目經(jīng)理會有下屬運(yùn)營經(jīng)理或者秘書之類，來負(fù)責(zé)打理產(chǎn)品日常運(yùn)行維護(hù)的組織工作。包括負(fù)責(zé)有關(guān)網(wǎng)絡(luò)相關(guān)

14、商業(yè)項目的研究、咨詢、策劃的工作，協(xié)助商業(yè)機(jī)構(gòu)借助網(wǎng)絡(luò)的優(yōu)勢降低成本，形成規(guī)模經(jīng)濟(jì)，獲得良好的商譽(yù)與商業(yè)上成功。,3. 前端開發(fā)工程師,主要干活人員。以完成瀏覽器端最終呈現(xiàn)效果為目標(biāo)。典型的工作成果是為用戶設(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等有所了解。,4.后端開發(fā)工程師,以完成服務(wù)器功能為目標(biāo)。典型的工作成果是設(shè)計數(shù)據(jù)庫，用后端腳本語言編寫接口，實現(xiàn)項目的各類功能。理論上任何互聯(lián)網(wǎng)項目都離不開web后端。哪怕是C

15、/S架構(gòu)，也得有人編寫服務(wù)器端代碼。 工作要求： 熟練掌握至少一種后端腳本語言； 熟練掌握后端腳本語言所對應(yīng)的的開發(fā)框架； 熟練掌握設(shè)計和操作數(shù)據(jù)庫；,5.運(yùn)維工程師,對于大公司/大項目組而言，必須要有運(yùn)營維護(hù)人員的存在，以隨時處理網(wǎng)站運(yùn)行中出現(xiàn)的各種問題。毫無疑問這是個累活，不過升職空間也很大。 工作要求： 非常熟悉服務(wù)器操作系統(tǒng)（通常是Linux） 通宵計算機(jī)網(wǎng)絡(luò)相關(guān)內(nèi)容 熟練掌握設(shè)計和操作數(shù)據(jù)庫,6.美術(shù)/交互設(shè)計師,美術(shù)/交互設(shè)計師負(fù)責(zé)網(wǎng)站的美術(shù)風(fēng)格、界面設(shè)計、圖片制作，以及多媒體動畫等的制作。這是一個表面上特別光鮮的工作，但實際上not easy，每次界面的改動，都要協(xié)調(diào)客戶、項目經(jīng)

16、理、前端開發(fā)工程師等等成員。 工作要求： 強(qiáng)大的溝通協(xié)調(diào)能力 強(qiáng)大的美術(shù)設(shè)計能力 熟練掌握photoshop等設(shè)計工具,7.其他人員,營銷：負(fù)責(zé)推銷產(chǎn)品，或為網(wǎng)站吸引流量，如果站點(diǎn)有廣告業(yè)務(wù)，他也將負(fù)責(zé)站點(diǎn)的網(wǎng)絡(luò)廣告業(yè)務(wù)聯(lián)系、實施與監(jiān)測的工作。 前臺/客服/需求分析：根據(jù)公司業(yè)務(wù)不同有很多稱呼。但總體是需要和很多人交流，尤其是用戶，其次是跟團(tuán)隊的人溝通。,我們的小隊組成,人員分工與項目組/公司的業(yè)務(wù)有關(guān)。不同的團(tuán)隊，成員數(shù)量不同，職位也會不同，一個人也可能兼任多個職位。 對于本課程，一個小隊要求三個人： 1.隊長：相當(dāng)于項目經(jīng)理，主要負(fù)責(zé)人，統(tǒng)籌小隊工作，答辯主講人。 2.網(wǎng)頁開發(fā)工程師：兼任

17、前端、后端、運(yùn)維工程師，負(fù)責(zé)網(wǎng)站發(fā)布、內(nèi)容制作。 3.交互設(shè)計師：負(fù)責(zé)網(wǎng)站美術(shù)設(shè)計，特效實現(xiàn)和內(nèi)容制作。,相關(guān)開發(fā)工具,PART 04,1.網(wǎng)站原型設(shè)計工具,網(wǎng)站原型設(shè)計工具，其功能是允許使用者采用比較低成本的手段快速建立靜態(tài)網(wǎng)頁原型，方便與客戶的溝通。 任何一個要走上項目/產(chǎn)品經(jīng)理崗位的人，都要多少掌握一些此類軟件的使用。 常用軟件： axure RP 墨刀 ,2.圖形圖像處理工具,現(xiàn)代網(wǎng)頁開發(fā)不能沒有圖片。處理圖片的工作主要是photoshop，除此以外還有矢量圖制作工具illustrator等。 前端工程師、美工交互設(shè)計師要熟練掌握photoshop的使用。,3.網(wǎng)頁代碼編輯工具,網(wǎng)頁代

18、碼編輯工具，必須能夠處理html, css, javascript等語言，提供代碼高亮，最好還要能提供常用類庫的代碼提示等功能。 本人推薦內(nèi)存4G以上的同學(xué)使用webstorm編輯器。4G或4G以下的同學(xué)可以使用sublime。,4.網(wǎng)頁調(diào)試工具,寫好的網(wǎng)頁程序需要顯示和調(diào)試。這里我們就使用瀏覽器做這一點(diǎn)。 本課要求使用webkit核心的瀏覽器。 為了避免差異導(dǎo)致的問題，這里要求都是用360急速瀏覽器。 打開webkit核心的瀏覽器，按F12可以打開開發(fā)人員工具。我們以后會經(jīng)常使用它。,5.代碼和進(jìn)度管理工具,在一個團(tuán)隊中，協(xié)作編寫代碼經(jīng)常會出現(xiàn)版本不統(tǒng)一的問題。為此，Linux的創(chuàng)始人發(fā)明了分布式代碼版本控制工具git來解決這個問題，兵獲得了很大成功。 我們也要使用git。首先去git官網(wǎng)，根據(jù)你電腦的系統(tǒng)型號，下載對應(yīng)的git安裝包并安裝。 https:/git-,5.代碼和進(jìn)度管理工具,Git是一個命令行工具，對于一般學(xué)生來說可能不太好用。所以我們再安裝一個git的圖形界面。叫tortoisegit。安裝好以后你就可以在右鍵菜單中使用git了，非常方便。