网站开发流程和工具概述

《网站开发流程和工具概述》由会员分享，可在线阅读，更多相关《网站开发流程和工具概述（46页珍藏版）》请在金锄头文库上搜索。

1、,讲师：张迪,网页设计(专业必修课),2017,网站开发基本流程和工具,第二课,上节内容回顾,因特网（Internet）：连接全球信息资源的巨型计算机网络的总称 万维网（web或www）：因特网上的一个服务，允许用户通过浏览器访问web服务器上的资源。 统一资源定位器（URL）：即网址。 超文本传输协议（HTTP）：传输超文本（网页）的网络协议。 超文本标记语言（HTML）：编写网页的标记语言,上节课内容回顾,网站（Website）：在互联网上提供网页资源的通信工具。从计算机角度讲，我们访问的每个网站，都是驻留在服务器上24小时不间断运行的服务程序。 服务器（server）: 在计算机网络上提

2、供服务的设备。需要响应请求并进行处理。 浏览器（brower）: 是用于访问万维网的客户端软件。,上节课内容回顾,浏览器的组成：浏览器由排版引擎、外观套件、开发人员工具等几个部分组成。 排版引擎：负责将HTML解释为易读的网页，是浏览器的核心。常见的有webKit（chrome）、Gecko（firefox）、Trident（IE）,网站的发展简史与技术构成,PART 01,早期网站结构,最简单的网站结构： 最早Web主要被一帮科学家们用来共享和传递信息，全世界的Web服务器也就几十台。网页直接以静态HTML文本的形式存储在服务器上。 阿里早先做的黄页也就是把企业信息通过进行HTML展示的We

3、b应用。,动态内容的出现（CGI）,随着web应用越来越广，其内容量呈指数增加。这时候，人们希望能在服务器端把数据动态地组成网页，以满足各种需求。故而1993年诞生了CGI（Common Gateway Interface）技术以实现这一点。当时主流的技术是用perl、C、shell脚本等编写CGI程序，HTML内容通过printf输出到web服务器，再由服务器发给浏览器。,Web后端（服务器端）脚本语言PHP/ASP/JSP,CGI已经提供动态网页了，但是CGI技术还很初级，例如其对每个请求都启动一个进程来处理，这样性能很差。 于是一些专门的web服务器端脚本语言被开发出来，专门做动态网页开

4、发。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/jav

5、a (2004),Ajax和javascript的流行,前文中提到的脚本语言都是运行在服务器端的。但浏览器端也需要脚本语言实现一些特殊效果。Javascript就是这样一种语言，可以实现很酷的页面效果。 2005年谷歌的Gmail采用了ajax技术，可以在不刷新整个页面的情况下更快速地响应用户操作。使得javascript应用更为广泛，单页应用这个时候也流行起来。,前端（浏览器端）框架的流行,在ajax流行起来以后，前后端的分工非常清晰，前后端的关键协作点是 Ajax 接口，规定好交互接口后，前后端工程师就可以根据约定，分头开工，在特定时间点做集成测试。这种模式有效地提升了效率。现在，对于一个

6、前端功能、交互复杂的SPA，JavaScript代码很容易膨胀（超过10万行）。很自然地，前端开发也出现了大量的框架，比较典型的包括AngularJS(2010), VUEJS(2010)，reactJS(2012)等。,Javascript在服务器端的逆袭：Nodejs,由于各大浏览器的竞争，使引擎性能不断提升。于是许多人希望直接使用javascript像java一样直接写桌面程序和服务器程序。于是诞生了Nodejs。它直接使用chrome浏览器中用于解释处理javascript的V8引擎，效率极高。现在做web开发，已经可以使用javascript从前端写到后端。,移动端网页开发技术,今天

7、，移动互联网的日益发达，传统网站建设更加重视移动端。 在移动互联网的早期，由于手机等移动设备性能太差，很难像电脑一样流畅地显示网页，因此手机APP开发的规模盖过了网页开发。 但随着HTML5及其相关技术的应用，以及移动端的性能提升，让我们可以直接用网页开发技术制作APP（如cordova, react native）或者直接访问web应用（如微信程序）。,小结,e7d195523061f1c0d6ea1dd7b36377c92c11ddca0a6448a16FA487BA5F61AF2253005085FBFF04C7A998087942C8938002675E51E54E0B85A142DC

8、FA69BB348EA976E7F8A8B79E671A63D2CFEB204EEF874495E8B387862C9F2D31E360DB45D317C92143E25085ED591A30FCF812D67C3D6EAB7D3B2526668EF71AE8EC10A7719ACCFFFCC7F175D4,但不论web开发技术如何演进，其核心内容依然是基于Internat的信息的传输、包装与展现。并且随着技术的进步，在易用性、可靠性、功能性上不断向前进化。,网站开发流程,PART 02,现代web开发流程,项目整合,总体设计,需求分析,测试与维护,用户需求分析 由项目经理牵头，以程序员为重心

9、，共同讨论，完成用户需求分析,总体设计 根据功能需求，设计网站栏目规划，约定数据库、文件关联关系，并进行界面设计,项目整合 将工作分配给各个职能员工，完成后及时整合,测试与与维护 由项目组共同联调测试，发现bug，完善一些具体的细节。最后进行网站部署上线和维护。,1.甲方提出建站申请,创建一个网站，或者web应用，首先是由甲方（商业术语，指项目需求方）提出任务和要求给乙方（商业术语，指项目承接方）。 甲方要提供网站制作要求、功能要求、基本素材等内容。,2.用户需求分析,我们作为乙方，承接了项目以后，第一步是进行用户需求分析。 用户提出的功能要求往往很笼统，甚至很多时候用户自己并不太清楚自己的需

10、要是什么。因此，乙方必须花足够的精力，全面地理解客户的各项要求，并且能够准确、清晰地表达给参与项目开发的所有成员，保证开发过程按照客户的需求去做，而不是为技术而迁就需求。,3.设计建站方案,经过细致的需求捕获活动后，就可以设计建站方案。通常我们需要设计一个静态的网站demo，可以让甲方直接感知，方便客户与开发人员就网站系统的业务背景、设计风格、网站内容达成共识。同时指定技术方案和工作日期安排，方便后期的制作和完善。,4.签署合同，客户支付预付款,在甲乙双方都觉得满意的情况下，要签署商业合同（以法律手段保护双方利益）。接下来甲方要支付预付款。 以前我承接项目时，预付款大约33%，项目中期检查再要

11、求甲方支付33%，项目完成则要求最后的33%。,5.网站制作,接下来就是按照时间安排和设计方案，制作网站。 需要开发人员熟练地部署服务器、制作页面、定制各种功能、制作UI模板。 其中，首页制作是网站的重点。首页是一个网站的门面，是一个网站的灵魂，因此，首页制作的好坏是一个网站成功的关键所在。制作模板便于设计出具有统一风格的网站。,6.网站内部测试,开发大致完成后，首先要进行测试，以保证用户满意度。测试大致包括如下内容： 是否按合同要求完成 网页各个连接是否可用 浏览器兼容性 如果是复杂的web应用，则测试内容还会更多。,7.站点发布,网站开发好后，就要在公网服务器上发布。 现在有许多云服务器提

12、供商可以让我们部署站点。例如亚马逊云计算、新浪云、百度云、阿里云、腾讯云、恒创主机等等。当然，大型公司有自己的公网web服务器，也可以直接自己部署。 发布的网站要有独立的IP，为了方便访问还要有域名（DNS）。,8.站点的维护,根据合同内容，一般乙方要提供半年或更长时间的网站维护工作。包括但不限于： 防止黑客入侵 日常服务器维护 流量监控 内容控制 处理bug,网站开发项目组的人员分工,PART 03,人员分工,网站开发项目组（工作室或公司）的本职，是吸引更多的商户（B）或用户（C）来使用自己的产品（P），并使得他们愿意为其花钱买单。既然如此，我们就可以把它比作一家餐馆，将其中的只能与餐馆的职

13、能对应起来，从而方便大家理解。,项目经理：餐厅经理 运营经理：大堂经理 前端开发工程师：炒菜大师傅 后端开发工程师：切菜大师傅 运维工程师：洗碗工/维修工 美术/交互设计师：菜品外观设计 销售：推销员 前台/客服/需求分析：服务员 数据分析师：顾客调查员 ,1.项目经理,项目经理是项目组的核心，也是项目组的领导。 他负责项目的管理和协调，合理分配和使用资源，保证项目按计划顺利进行。 他不仅要有管理下属的能力，还要有何客户沟通的能力。通常需求确认、合同签署都需要他出面。,2.运营经理/策划,如果组织足够大的话，项目经理会有下属运营经理或者秘书之类，来负责打理产品日常运行维护的组织工作。包括负责有

14、关网络相关商业项目的研究、咨询、策划的工作，协助商业机构借助网络的优势降低成本，形成规模经济，获得良好的商誉与商业上成功。,3. 前端开发工程师,主要干活人员。以完成浏览器端最终呈现效果为目标。典型的工作成果是为用户设计静态网页，以及将这些静态网页变成动态网页。 工作要求： 熟练掌握目前互联网流行的网页制作方法HTML+CSS+javascript； 对浏览器兼容性有很大的了解； 对后端脚本语言，主要是php，java，.net等有所了解。,4.后端开发工程师,以完成服务器功能为目标。典型的工作成果是设计数据库，用后端脚本语言编写接口，实现项目的各类功能。理论上任何互联网项目都离不开web后端

15、。哪怕是C/S架构，也得有人编写服务器端代码。 工作要求： 熟练掌握至少一种后端脚本语言； 熟练掌握后端脚本语言所对应的的开发框架； 熟练掌握设计和操作数据库；,5.运维工程师,对于大公司/大项目组而言，必须要有运营维护人员的存在，以随时处理网站运行中出现的各种问题。毫无疑问这是个累活，不过升职空间也很大。 工作要求： 非常熟悉服务器操作系统（通常是Linux） 通宵计算机网络相关内容 熟练掌握设计和操作数据库,6.美术/交互设计师,美术/交互设计师负责网站的美术风格、界面设计、图片制作，以及多媒体动画等的制作。这是一个表面上特别光鲜的工作，但实际上not easy，每次界面的改动，都要协调客

16、户、项目经理、前端开发工程师等等成员。 工作要求： 强大的沟通协调能力 强大的美术设计能力 熟练掌握photoshop等设计工具,7.其他人员,营销：负责推销产品，或为网站吸引流量，如果站点有广告业务，他也将负责站点的网络广告业务联系、实施与监测的工作。 前台/客服/需求分析：根据公司业务不同有很多称呼。但总体是需要和很多人交流，尤其是用户，其次是跟团队的人沟通。,我们的小队组成,人员分工与项目组/公司的业务有关。不同的团队，成员数量不同，职位也会不同，一个人也可能兼任多个职位。 对于本课程，一个小队要求三个人： 1.队长：相当于项目经理，主要负责人，统筹小队工作，答辩主讲人。 2.网页开发工程师：兼任前端、后端、运维工程师，负责网站发布、内容制作。 3.交互设计师：负责网站美术设计，特效实现和内容制作。,相关开发工具,PART 04,1.网站原型设计工具,网站原型设计工具，其功能是允许使用者采用比较低成本的手段快速建立静态网页原型，方便与客户的沟通。 任何一个要走