02网站开发流程和工具

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2017/9/1,#,讲师：张迪,网页设计,(,专业必修课,),2017,网站开发基本,流,流程和工具,第二课,上节内容回顾,上节课内容回,顾,顾,网站（,Website,）：在互联网上提供网页资源,的,的通信工具。,从,从计算机角度,讲,讲，我们访问,的,的每个网站，,都,都是驻留在服,务,务器上,24,小时不间断运,行,行的服务程序,。,。,服务器（,server,）,:,在计算机网络,上,上提供服务的,设,设备。需要响,应,应请求并进行,处,处理。,浏览器（,brower,）,:,是用于访问万,维,维网的客户端,软,软件。,上节课内容回,顾,顾,浏览器的组成：浏览器由排,版,版引擎、外观,套,套件、开发人,员,员工具等几个,部,部分组成。,排版引擎：负责将,HTML,解释为易读的,网,网页，是浏览,器,器的核心。常,见,见的有,webKit,（,chrome,）、,Gecko,（,firefox,）、,Trident,（,IE,）,网站的发展简,史,史与技术构成,PART01,早期网站结构,最简单的网站,结,结构：,最早,Web,主要被一帮科,学,学家们用来共,享,享和传递信息,，,，全世界的,Web,服务器也就几,十,十台。,网页直接以静态,HTML,文本的形式存,储,储在服务器上,。,。,阿里早先做的,黄,黄页也就是把,企,企业信息通过,进,进行,HTML,展示的,Web,应用。,动态内容的出,现,现（,CGI,）,随着,web,应用越来越广,，,，其内容量呈,指,指数增加。这,时,时候，人们希,望,望能在服务器,端,端把数据动态地组成网页，,以,以满足各种需,求,求。故而,1993,年诞生了,CGI,（,CommonGateway Interface,）,技术以实现这,一,一点。当时主,流,流的技术是用,perl,、,C,、,shell,脚本等编写,CGI,程序，,HTML,内容通过,printf,输出到,web,服务器，再由,服,服务器发给浏,览,览器。,Web,后端（服务器,端,端）脚本语言,PHP/ASP/JSP,CGI,已经提供动态,网,网页了，但是,CGI,技术还很初级,，,，例如其对每,个,个请求都启动,一,一个进程来处,理,理，这样性能,很,很差。,于是一些专门,的,的,web,服务器端脚本,语,语言被开发出,来,来，专门做动,态,态网页开发。,1994,年,php,语言诞生，,1996,年,asp,诞生，,1997,年,jsp,诞生。这些语,言,言能较高性能,地,地处理请求，,搭,搭配上数据库,技,技术，,web,这个时候开始大规,模,模发展起来。,后端（服务器,端,端）框架横飞,的,的年代,随着,web,大发展，许多,大,大公司开始构,建,建大规模,web,应用，在分布,式,式、安全性、,事,事务性等方面,提,提出了更高的,要,要求。为此，,各,各种辅助,web,开发的技术框,架,架开始层出不,穷,穷。,企业级,web,应用编程框架：,J2EE/java,（,1999,）,.Net/asp,（,2000,）,灵活的一站式,web,开发框架：,Rails/ruby,（,2004,）,codeIgniter/php(2008),Django/python,（,2005,）,SSH/java(2004),Ajax,和,javascript,的流行,前文中提到的脚,本,本语言都是运,行,行在服务器端,的,的。但浏览器,端,端也需要脚本,语,语言实现一些,特,特殊效果。,Javascript,就是这样一种,语,语言，可以实,现,现很酷的页面,效,效果。,2005,年谷歌的,Gmail,采用了,ajax,技术，可以在,不,不刷新整个页,面,面的情况下更,快,快速地响应用,户,户操作。使得,javascript,应用更为广泛,，,，单页应用这,个,个时候也流行,起,起来。,前端（浏览器,端,端）框架的流,行,行,在,ajax,流行起来以后，,前后端的分工,非,非常清晰，前,后,后端的关键协,作,作点是,Ajax,接口，规定好,交,交互接口后，,前,前后端工程师,就,就可以根据约,定,定，分头开工,，在特定时间,点,点做集成测试,。,。这种模式有,效,效地提升了效,率,率。,现在，对于一,个,个前端功能、,交,交互复杂的,SPA,，,JavaScript,代码很容易膨,胀,胀（超过,10,万行）。很自,然,然地，前端开发也出现了,大,大量的框架，比较典型的包括,AngularJS(2010),VUEJS(2010),，,reactJS(2012),等,。,Javascript,在服务器端的,逆,逆袭：,Nodejs,由于各大浏览,器,器的竞争，使,引,引擎性能不断,提,提升。于是许,多,多人希望直接,使,使用,javascript,像,java,一样直接写桌,面,面程序和服务,器,器程序。于是,诞,诞生了,Nodejs,。它直接使用,chrome,浏览器中用于,解,解释处理,javascript,的,V8,引擎，效率极,高,高。现在做,web,开发，已经可,以,以使用,javascript,从前端写到后,端,端。,移动端网页开发技,术,术,今天，移动互,联,联网的日益发,达,达，传统网站,建,建设更加重视,移,移动端。,在移动互联网,的,的早期，由于,手,手机等移动设,备,备性能太差，,很,很难像电脑一,样,样流畅地显示,网,网页，因此手,机,机,APP,开发的规模盖,过,过了网页开发,。,。,但随着,HTML5,及其相关技术,的,的应用，以及,移,移动端的性能,提,提升，让我们,可,可以直接用网,页,页开发技术制,作,作,APP,（如,cordova,react native,）或者直接访,问,问,web,应用（如微信,程,程序）。,小结,e7d195523061f1c0d6ea1dd7b36377c92c11ddca0a6448a16FA487BA5F61AF2253005085FBFF04C7A998087942C8938002675E51E54E0B85A142DCFA69BB348EA976E7F8A8B79E671A63D2CFEB204EEF874495E8B387862C9F2D31E360DB45D317C92143E25085ED591A30FCF812D67C3D6EAB7D3B2526668EF71AE8EC10A7719ACCFFFCC7F175D4,但不,论,论,web,开发,技,技术,如,如何,演,演进,，,，其,核,核心,内,内容,依,依然,是,是基,于,于,Internat,的信,息,息的,传,传输,、,、包,装,装与,展,展现,。,。并,且,且随,着,着技,术,术的,进,进步,，,，在,易,易用,性,性、,可,可靠,性,性、,功,功能,性,性上,不,不断,向,向前,进,进化,。,。,网站,开,开发,流,流程,PART02,现代,web,开发,流,流程,项目,整,整合,总体,设,设计,需求,分,分析,测试,与,与维,护,护,用户需求,分,分析,由项目经,理,理牵头，,以,以程序员,为,为重心，,共,共同讨论,，,，完成用,户,户需求分,析,析,总体设计,根据功能,需,需求，设,计,计网站栏,目,目规划，,约,约定数据,库,库、文件,关,关联关系,，,，并进行,界,界面设计,项目整合,将工作分,配,配给各个,职,职能员工,，,，完成后,及,及时整合,测试与与,维,维护,由项目组,共,共同联调,测,测试，发,现,现,bug,，完善一,些,些具体的,细,细节。最,后,后进行网,站,站部署上线,和,和维护。,1.,甲方提出建站,申,申请,创建一个网站,，或者,web,应用，首先是由,甲,甲方（商,业,业术语，,指,指项目需,求,求方）提,出,出任务和,要,要求给乙,方,方（商业,术,术语，指,项,项目承接,方,方）。,甲方要提,供,供网站制,作,作要求、,功,功能要求,、,、基本素,材,材等内容,。,。,2.,用户需求,分,分析,我们作为,乙,乙方，承,接,接了项目,以,以后，第,一,一步是进,行,行用户需,求,求分析。,用户提出,的,的功能要,求,求往往很,笼,笼统，甚,至,至很多时,候,候用户自,己,己并不太,清,清楚自己,的,的需要是,什,什么。因,此,此，乙方必须花足,够,够的精力,，,，,全面地理,解,解客户的,各,各项要求,，,，并且能,够,够准确、,清,清晰地表,达,达给参与,项,项目开发,的,的所有成,员,员，保证,开,开发过程,按,按照客户,的,的需求去,做,做，而不,是,是为技术,而,而迁就需,求,求。,3.,设计建站,方,方案,经过细致,的,的需求捕,获,获活动后,，,，就可以,设,设计建站,方,方案。通,常,常我们需要设计,一,一个静态的网,站,站,demo,，,可以,让甲方,直接感知,，,方便客户,与,与开发人,员,员就网站,系,系统的业,务,务背景、,设,设计风格,、,、网站内,容,容达成共识,。同时指,定,定技术方案和工作日期,安,安排，方便后,期,期的制作,和,和完善。,4.,签署合同,，,，客户支,付,付预付款,在甲乙双,方,方都觉得,满,满意的情,况,况下，要,签,签署商业,合,合同（以,法,法律手段,保,保护双方,利,利益）。,接,接下来甲,方,方要支付,预,预付款。,以前我承,接,接项目时,，,，预付款,大,大约,33%,，项目中,期,期检查再,要,要求甲方,支,支付,33%,，项目完,成,成则要求,最,最后的,33%,。,5.,网站制作,接下来就,是,是按照时,间,间安排和,设,设计方案,，,，制作网,站,站。,需要开发,人,人员熟练,地,地部署服,务,务器、制,作,作页面、,定,定制各种,功,功能、制,作,作,UI,模板。,其中，首,页,页制作是网站的,重,重点。,首页是一,个,个网站的,门,门面，是,一,一个网站,的,的灵魂，,因,因此，首,页,页制作的,好,好坏是一,个,个网站成,功,功的关键,所,所在。制,作,作模板便,于,于设计出,具,具有统一,风,风格的网,站,站,。,6.,网站内部,测,测试,开发大致,完,完成后，,首,首先要进,行,行测试，,以,以保证用,户,户满意度,。,。测试大,致,致包括如,下,下内容：,是否按合,同,同要求完成,网页各个,连,连接是否,可,可用,浏览器兼,容,容性,如果是复,杂,杂的,web,应用，则,测,测试内容,还,还会更多,。,。,7.,站点发布,网站开发,好,好后，就,要,要在公网,服,服务器上,发,发布。,现在有许,多,多云服务,器,器提供商,可,可以让我,们,们部署站,点,点。例如,亚,亚马逊云,计,计算、新,浪,浪云、百,度,度云、阿,里,里云、腾,讯,讯云、恒,创,创主机等,等,等。当然,，,，大型公,司,司有自己,的,的公网,web,服务器，,也,也可以直,接,接自己部,署,署。,发布的网,站,站要有独,立,立的,IP,，为了方,便,便访问还,要,要有域名,（,（,DNS,）。,8.,站点的维,护,护,根据合同,内,内容，一,般,般乙方要,提,提供半年,或,或更长时,间,间的网站,维,维护工作,。,。包括但,不,不限于：,防止黑客,入,入侵,日常服务,器,器维护,流量监控,内容控制,处理,bug,网站开发,项,项目组的,人,人员分工,PART03,人员分工,网站开发,项,项目组（,工,工作室或,公,公司）的,本,本职，是,吸,吸引更多,的,的商户（,B,）或用户,（,（,C,）来使用,自,自己的产,品,品（,P,），并使,得,得他们愿,意,意为其花,钱,钱买单。,既,既然如此,，,，我们就,可,可以把它,比,比作一家,餐,餐馆，将,其,其中的只,能,能与餐馆,的,的职能对,应,应起来，,从,从而方便,大,大家理解,。,。,项目经,理,理：餐,厅,厅经理,运营经,理,理：大堂,经,经理,前端