网站开发流程和工具

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