02網(wǎng)站開發(fā)流程和工具.ppt

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

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

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

4、年php語言誕生，1996年asp誕生，1997年jsp誕生。這些語言能較高性能地處理請(qǐng)求，搭配上數(shù)據(jù)庫(kù)技術(shù)，web這個(gè)時(shí)候開始大規(guī)模發(fā)展起來。,后端（服務(wù)器端）框架橫飛的年代,隨著web大發(fā)展，許多大公司開始構(gòu)建大規(guī)模web應(yīng)用，在分布式、安全性、事務(wù)性等方面提出了更高的要求。為此，各種輔助web開發(fā)的技術(shù)框架開始層出不窮。,企業(yè)級(jí)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ù)器端的。但瀏覽器端也需要腳本語言實(shí)現(xiàn)一些特殊效果。Javascript就是這樣一種語言，可以實(shí)現(xiàn)很酷的頁(yè)面效果。 2005年谷歌的Gmail采用了ajax技術(shù)，可以在不刷新整個(gè)頁(yè)面的情況下更快速地響應(yīng)用戶操作。使得javascript應(yīng)用更為廣泛，單頁(yè)應(yīng)用這個(gè)時(shí)候也流行起來。,前端（瀏覽器端）框架的流行,在ajax流行起來以后，前后端的分工非常清晰，前后端的關(guān)鍵協(xié)作點(diǎn)是 Ajax 接口，規(guī)定好交互接口后，前后端工程師就可以根據(jù)約定，分頭開工，在特定時(shí)間點(diǎn)做集成測(cè)試。這種模式有效地提升了效率。現(xiàn)在，對(duì)于一個(gè)前端功能、交

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

7、的日益發(fā)達(dá)，傳統(tǒng)網(wǎng)站建設(shè)更加重視移動(dòng)端。 在移動(dòng)互聯(lián)網(wǎng)的早期，由于手機(jī)等移動(dòng)設(shè)備性能太差，很難像電腦一樣流暢地顯示網(wǎng)頁(yè)，因此手機(jī)APP開發(fā)的規(guī)模蓋過了網(wǎng)頁(yè)開發(fā)。 但隨著HTML5及其相關(guān)技術(shù)的應(yīng)用，以及移動(dòng)端的性能提升，讓我們可以直接用網(wǎng)頁(yè)開發(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ā)流程,項(xiàng)目整合,總體設(shè)計(jì),需求分析,測(cè)試與維護(hù),用戶需求分析 由項(xiàng)目經(jīng)理牽頭，以程序員為重心，共同討論，

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

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

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

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

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

14、商業(yè)項(xiàng)目的研究、咨詢、策劃的工作，協(xié)助商業(yè)機(jī)構(gòu)借助網(wǎng)絡(luò)的優(yōu)勢(shì)降低成本，形成規(guī)模經(jīng)濟(jì)，獲得良好的商譽(yù)與商業(yè)上成功。,3. 前端開發(fā)工程師,主要干活人員。以完成瀏覽器端最終呈現(xiàn)效果為目標(biāo)。典型的工作成果是為用戶設(shè)計(jì)靜態(tài)網(wǎng)頁(yè)，以及將這些靜態(tài)網(wǎng)頁(yè)變成動(dòng)態(tài)網(wǎng)頁(yè)。 工作要求： 熟練掌握目前互聯(lián)網(wǎng)流行的網(wǎng)頁(yè)制作方法HTML+CSS+javascript； 對(duì)瀏覽器兼容性有很大的了解； 對(duì)后端腳本語言，主要是php，java，.net等有所了解。,4.后端開發(fā)工程師,以完成服務(wù)器功能為目標(biāo)。典型的工作成果是設(shè)計(jì)數(shù)據(jù)庫(kù)，用后端腳本語言編寫接口，實(shí)現(xiàn)項(xiàng)目的各類功能。理論上任何互聯(lián)網(wǎng)項(xiàng)目都離不開web后端。哪怕是C

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

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

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

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