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展示的Web应用。动态内容的出现（CGI）随着web应用越来越
3、广，其内容量呈指数增加。这时候，人们希望能在服务器端把数据动态地组成网页，以满足各种需求。故而1993年诞生了CGI（Common Gateway Interface）技术以实现这一点。当时主流的技术是用perl、C、shell脚本等编写CGI程序，HTML内容通过printf输出到web服务器，再由服务器发给浏览器。Web后端（服务器端）脚本语言PHP/ASP/JSPCGI已经提供动态网页了，但是CGI技术还很初级，例如其对每个请求都启动一个进程来处理，这样性能很差。于是一些专门的web服务器端脚本语言被开发出来，专门做动态网页开发。1994年php语言诞生，1996年asp诞生，1997年
4、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的流行前文中提到的脚本语言都是运行在服务器端
5、的。但浏览器端也需要脚本语言实现一些特殊效果。Javascript就是这样一种语言，可以实现很酷的页面效果。2005年谷歌的Gmail采用了ajax技术，可以在不刷新整个页面的情况下更快速地响应用户操作。使得javascript应用更为广泛，单页应用这个时候也流行起来。前端（浏览器端）框架的流行在ajax流行起来以后，前后端的分工非常清晰，前后端的关键协作点是 Ajax 接口，规定好交互接口后，前后端工程师就可以根据约定，分头开工，在特定时间点做集成测试。这种模式有效地提升了效率。现在，对于一个前端功能、交互复杂的SPA，JavaScript代码很容易膨胀（超过10万行）。很自然地，前端开发也
6、出现了大量的框架，比较典型的包括AngularJS(2010),VUEJS(2010)，reactJS(2012)等。Javascript在服务器端的逆袭：Nodejs由于各大浏览器的竞争，使引擎性能不断提升。于是许多人希望直接使用javascript像java一样直接写桌面程序和服务器程序。于是诞生了Nodejs。它直接使用chrome浏览器中用于解释处理javascript的V8引擎，效率极高。现在做web开发，已经可以使用javascript从前端写到后端。移动端网页开发技术今天，移动互联网的日益发达，传统网站建设更加重视移动端。在移动互联网的早期，由于手机等移动设备性能太差，很难像电脑
7、一样流畅地显示网页，因此手机APP开发的规模盖过了网页开发。但随着HTML5及其相关技术的应用，以及移动端的性能提升，让我们可以直接用网页开发技术制作APP（如cordova,react native）或者直接访问web应用（如微信程序）。小结但不论web开发技术如何演进，其核心内容依然是基于Internat的信息的传输、包装与展现。并且随着技术的进步，在易用性、可靠性、功能性上不断向前进化。网站开发流程PART 02现代web开发流程项目整合总体设计需求分析测试与维护用户需求分析由项目经理牵头，以程序员为重心，共同讨论，完成用户需求分析总体设计根据功能需求，设计网站栏目规划，约定数据库、文件
8、关联关系，并进行界面设计项目整合将工作分配给各个职能员工，完成后及时整合测试与与维护由项目组共同联调测试，发现bug，完善一些具体的细节。最后进行网站部署上线和维护。1.甲方提出建站申请创建一个网站，或者web应用，首先是由甲方（商业术语，指项目需求方）提出任务和要求给乙方（商业术语，指项目承接方）。甲方要提供网站制作要求、功能要求、基本素材等内容。2.用户需求分析我们作为乙方，承接了项目以后，第一步是进行用户需求分析。用户提出的功能要求往往很笼统，甚至很多时候用户自己并不太清楚自己的需要是什么。因此，乙方必须花足够的精力，全面地理解客户的各项要求，并且能够准确、清晰地表达给参与项目开发的所有
9、成员，保证开发过程按照客户的需求去做，而不是为技术而迁就需求。3.设计建站方案经过细致的需求捕获活动后，就可以设计建站方案。通常我们需要设计一个静态的网站demo，可以让甲方直接感知，方便客户与开发人员就网站系统的业务背景、设计风格、网站内容达成共识。同时指定技术方案和工作日期安排，方便后期的制作和完善。4.签署合同，客户支付预付款在甲乙双方都觉得满意的情况下，要签署商业合同（以法律手段保护双方利益）。接下来甲方要支付预付款。以前我承接项目时，预付款大约33%，项目中期检查再要求甲方支付33%，项目完成则要求最后的33%。5.网站制作接下来就是按照时间安排和设计方案，制作网站。需要开发人员熟练
10、地部署服务器、制作页面、定制各种功能、制作UI模板。其中，首页制作是网站的重点。首页是一个网站的门面，是一个网站的灵魂，因此，首页制作的好坏是一个网站成功的关键所在。制作模板便于设计出具有统一风格的网站。6.网站内部测试开发大致完成后，首先要进行测试，以保证用户满意度。测试大致包括如下内容：1.是否按合同要求完成2.网页各个连接是否可用3.浏览器兼容性如果是复杂的web应用，则测试内容还会更多。7.站点发布网站开发好后，就要在公网服务器上发布。现在有许多云服务器提供商可以让我们部署站点。例如亚马逊云计算、新浪云、百度云、阿里云、腾讯云、恒创主机等等。当然，大型公司有自己的公网web服务器，也可
11、以直接自己部署。发布的网站要有独立的IP，为了方便访问还要有域名（DNS）。8.站点的维护根据合同内容，一般乙方要提供半年或更长时间的网站维护工作。包括但不限于：防止黑客入侵日常服务器维护流量监控内容控制处理bug网站开发项目组的人员分工PART 03人员分工网站开发项目组（工作室或公司）的本职，是吸引更多的商户（B）或用户（C）来使用自己的产品（P），并使得他们愿意为其花钱买单。既然如此，我们就可以把它比作一家餐馆，将其中的只能与餐馆的职能对应起来，从而方便大家理解。项目经理：餐厅经理 运营经理：大堂经理 前端开发工程师：炒菜大师傅 后端开发工程师：切菜大师傅 运维工程师：洗碗工/维修工 美
12、术/交互设计师：菜品外观设计 销售：推销员 前台/客服/需求分析：服务员 数据分析师：顾客调查员.1.项目经理项目经理是项目组的核心，也是项目组的领导。他负责项目的管理和协调，合理分配和使用资源，保证项目按计划顺利进行。他不仅要有管理下属的能力，还要有何客户沟通的能力。通常需求确认、合同签署都需要他出面。2.运营经理/策划如果组织足够大的话，项目经理会有下属运营经理或者秘书之类，来负责打理产品日常运行维护的组织工作。包括负责有关网络相关商业项目的研究、咨询、策划的工作，协助商业机构借助网络的优势降低成本，形成规模经济，获得良好的商誉与商业上成功。3.前端开发工程师主要干活人员。以完成浏览器端最
13、终呈现效果为目标。典型的工作成果是为用户设计静态网页，以及将这些静态网页变成动态网页。工作要求：熟练掌握目前互联网流行的网页制作方法HTML+CSS+javascript；对浏览器兼容性有很大的了解；对后端脚本语言，主要是php，java，.net等有所了解。4.后端开发工程师以完成服务器功能为目标。典型的工作成果是设计数据库，用后端脚本语言编写接口，实现项目的各类功能。理论上任何互联网项目都离不开web后端。哪怕是C/S架构，也得有人编写服务器端代码。工作要求：熟练掌握至少一种后端脚本语言；熟练掌握后端脚本语言所对应的的开发框架；熟练掌握设计和操作数据库；5.运维工程师对于大公司/大项目组而
14、言，必须要有运营维护人员的存在，以随时处理网站运行中出现的各种问题。毫无疑问这是个累活，不过升职空间也很大。工作要求：非常熟悉服务器操作系统（通常是Linux）通宵计算机网络相关内容熟练掌握设计和操作数据库6.美术/交互设计师美术/交互设计师负责网站的美术风格、界面设计、图片制作，以及多媒体动画等的制作。这是一个表面上特别光鲜的工作，但实际上not easy，每次界面的改动，都要协调客户、项目经理、前端开发工程师等等成员。工作要求：强大的沟通协调能力强大的美术设计能力熟练掌握photoshop等设计工具7.其他人员营销：负责推销产品，或为网站吸引流量，如果站点有广告业务，他也将负责站点的网络广
15、告业务联系、实施与监测的工作。前台/客服/需求分析：根据公司业务不同有很多称呼。但总体是需要和很多人交流，尤其是用户，其次是跟团队的人沟通。我们的小队组成人员分工与项目组/公司的业务有关。不同的团队，成员数量不同，职位也会不同，一个人也可能兼任多个职位。对于本课程，一个小队要求三个人：1.队长：相当于项目经理，主要负责人，统筹小队工作，答辩主讲人。2.网页开发工程师：兼任前端、后端、运维工程师，负责网站发布、内容制作。3.交互设计师：负责网站美术设计，特效实现和内容制作。相关开发工具PART 041.网站原型设计工具网站原型设计工具，其功能是允许使用者采用比较低成本的手段快速建立静态网页原型，
16、方便与客户的沟通。任何一个要走上项目/产品经理岗位的人，都要多少掌握一些此类软件的使用。常用软件：axure RP墨刀http:/ 写好的网页程序需要显示和调试。这里我们就使用浏览器做这一点。本课要求使用webkit核心的浏览器。为了避免差异导致的问题，这里要求都是用360急速浏览器。打开webkit核心的浏览器，按F12可以打开开发人员工具。我们以后会经常使用它。5.代码和进度管理工具 在一个团队中，协作编写代码经常会出现版本不统一的问题。为此，Linux的创始人发明了分布式代码版本控制工具git来解决这个问题，兵获得了很大成功。我们也要使用git。首先去git官网，根据你电脑的系统型号，下
17、载对应的git安装包并安装。https:/git- 6.其他以下工具非常有用，但是先在这里描述一下：代码比对工具：winmerge，是一款运行于Windows系统下的免费开源的文件比较/合并工具，使用它可以非常方便地比较多个文档内容甚至是文件夹与文件夹之间的文件差异。快速搜索工具：Everything，是速度最快的文件搜索软件。其速度之快令人震惊,百G硬盘几十万个文件,可以在几秒钟之内完成索引;文件名搜索瞬间呈现结果。笔记软件，有道云笔记：有道云笔记是网易出品,获得5000万用户青睐的笔记软件。提供了PC端、移动端、网页端等多端应用,用户可以随时随地对线上资料进行编辑、分享以及协同。兰州理工大学计算机与通信学院感谢您的聆听指正2018
