网站开发流程和工具.ppt

讲师 张迪 网页设计 专业必修课 2017 网站开发基本流程和工具 第二课 上节内容回顾 因特网 Internet 连接全球信息资源的巨型计算机网络的总称万维网 web或www 因特网上的一个服务 允许用户通过浏览器访问web服务器上的资源 统一资源定位器 URL 即网址 超文本传输协议 HTTP 传输超文本 网页 的网络协议 超文本标记语言 HTML 编写网页的标记语言 上节课内容回顾 网站 Website 在互联网上提供网页资源的通信工具 从计算机角度讲 我们访问的每个网站 都是驻留在服务器上24小时不间断运行的服务程序 服务器 server 在计算机网络上提供服务的设备 需要响应请求并进行处理 浏览器 brower 是用于访问万维网的客户端软件 上节课内容回顾 浏览器的组成 浏览器由排版引擎 外观套件 开发人员工具等几个部分组成 排版引擎 负责将HTML解释为易读的网页 是浏览器的核心 常见的有webKit chrome Gecko firefox Trident IE 网站的发展简史与技术构成 PART01 早期网站结构 最简单的网站结构 最早Web主要被一帮科学家们用来共享和传递信息 全世界的Web服务器也就几十台 网页直接以静态HTML文本的形式存储在服务器上 阿里早先做的黄页也就是把企业信息通过进行HTML展示的Web应用 动态内容的出现 CGI 随着web应用越来越广 其内容量呈指数增加 这时候 人们希望能在服务器端把数据动态地组成网页 以满足各种需求 故而1993年诞生了CGI CommonGatewayInterface 技术以实现这一点 当时主流的技术是用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 reactnative 或者直接访问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 并使得他们愿意为其花钱买单 既然如此 我们就可以把它比作一家餐馆 将其中的只能与餐馆的职能对应起来 从而方便大家理解 项目经理 餐厅经理运营经理 大堂经理前端开发工程师 炒菜大师傅后端开发工程师 切菜大师傅运维工程师 洗碗工 维修工美术 交互设计师 菜品外观设计销售 推销员前台 客服 需求分析 服务员数据分析师 顾客调查员 1 项目经理 项目经理是项目组的核心 也是项目组的领导 他负责项目的管理和协调 合理分配和使用资源 保证项目按计划顺利进行 他不仅要有管理下属的能力 还要有何客户沟通的能力 通常需求确认 合同签署都需要他出面 2 运营经理 策划 如果组织足够大的话 项目经理会有下属运营经理或者秘书之类 来负责打理产品日常运行维护的组织工作 包括负责有关网络相关商业项目的研究 咨询 策划的工作 协助商业机构借助网络的优势降低成本 形成规模经济 获得良好的商誉与商业上成功 3 前端开发工程师 主要干活人员 以完成浏览器端最终呈现效果为目标 典型的工作成果是为用户设计静态网页 以及将这些静态网页变成动态网页 工作要求 熟练掌握目前互联网流行的网页制作方法HTML CSS javascript 对浏览器兼容性有很大的了解 对后端脚本语言 主要是php java net等有所了解 4 后端开发工程师 以完成服务器功能为目标 典型的工作成果是设计数据库 用后端脚本语言编写接口 实现项目的各类功能 理论上任何互联网项目都离不开web后端 哪怕是C S架构 也得有人编写服务器端代码 工作要求 熟练掌握至少一种后端脚本语言 熟练掌握后端脚本语言所对应的的开发框架 熟练掌握设计和操作数据库 5 运维工程师 对于大公司 大项目组而言 必须要有运营维护人员的存在 以随时处理网站运行中出现的各种问题 毫无疑问这是个累活 不过升职空间也很大 工作要求 非常熟悉服务器操作系统 通常是Linux 通宵计算机网络相关内容熟练掌握设计和操作数据库 6 美术 交互设计师 美术 交互设计师负责网站的美术风格 界面设计 图片制作 以及多媒体动画等的制作 这是一个表面上特别光鲜的工作 但实际上noteasy 每次界面的改动 都要协调客户 项目经理 前端开发工程师等等成员 工作要求 强大的沟通协调能力强大的美术设计能力熟练掌握photoshop等设计工具 7 其他人员 营销 负责推销产品 或为网站吸引流量 如果站点有广告业务 他也将负责站点的网络广告业务联系 实施与监测的工作 前台 客服 需求分析 根据公司业务不同有很多称呼 但总体是需要和很多人交流 尤其是用户 其次是跟团队的人沟通 我们的小队组成 人员分工与项目组 公司的业务有关 不同的团队 成员数量不同 职位也会不同 一个人也可能兼任多个职位 对于本课程 一个小队要求三个人 1 队长 相当于项目经理 主要负责人 统筹小队工作 答辩主讲人 2 网页开发工程师 兼任前端 后端 运维工程师 负责网站发布 内容制作 3 交互设计师 负责网站美术设计 特效实现和内容制作 相关开发工具 PART04 1 网站原型设计工具 网站原型设计工具 其功能是允许使用者采用比较低成本的手段快速建立静态网页原型 方便与客户的沟通 任何一个要走上项目 产品经理岗位的人 都要多少掌握一些此类软件的使用 常用软件 axureRP墨刀 2 图形图像处理工具 现代网页开发不能没有图片 处理图片的工作主要是photoshop 除此以外还有矢量图制作工具illustrator等 前端工程师 美工 交互设计师要熟练掌握photoshop的使用 3 网页代码编辑工具 网页代码编辑工具 必须能够处理html css javascript等语言 提供代码高亮 最好还要能提供常用类库的代码提示等功能 本人推荐内存4G以上的同学使用webstorm编辑器 4G或4G以下的同学可以使用sublime 4 网页调试工具 写好的网页程序需要显示和调试 这里我们就使用浏览器做这一点 本课要求使用webkit核心的浏览器 为了避免差异导致的问题 这里要求都是用360急速浏览器 打开webkit核心的浏览器 按F12可以打开开发人员工具 我们以后会经常使用它 5 代码和进度管理工具 在一个团队中 协作编写代码经常会出现版本不统一的问题 为此 Linux的创始人发明了分布式代码版本控制工具git来解决这个问题 兵获得了很大成功 我们也要使用git 首先去git官网 根据你电脑的系统型号 下载对应的git安装包并安装 https git 5 代码和进度管理工具 Git是一个命令行工具 对于一般学生来说可能不太好用 所以我们再安装一个git的图形界面 叫tortoisegit 安装好以后你就可以在右键菜单中使用git了