Web开发流程
知乎上关于Web开发流程豪情给予的回答
老板或甲方是一个需求的真正发起者,也是一个基础idea的梦想师,产品是需求专业化梳理或进行有效评估细化需求负责的,
而设计是前端的上游,前端是设计的下游。设计的工作目的是把产品宏观的思维结果进行专业的处理,因为按一般的习惯,产品最终的结果是原型图,而原型图可以理解为设计的草图。
对真正的用户来说,这个草图过于简单或不符合使用的操作习惯,所以需要设计师进行专业的处理,比如颜色搭配,布局分隔,有时候还兼交互的一部分工作,设置用户与页面发生交互的预订流程。
那有人问,不需要设计不行吗?直接让前端写页面不就得了,还需要麻烦设计师来做个图出来。
因为这里边有一个成本风险控制的一个理念,因为在前期,尤其是设计,主观感受大于理性的思考,所以每天的结果都不一样,所以需要设计师去消化掉这部分主观感受带来的误区。而且从成本上来讲,有些场景设计师改图比改代码要容易控制一些。
设计师的结果是psd文件,他是很多个图层叠加在一起的结果,而前端的工作结果html页面,是把很多图层上的效果,有机的用html组织起来的过程。
前端是把转化后html交给下游服务端开发工程师,或叫后台开发,这个html里边包括一些交互的js文件等。总的来说前端是一个承前启后的岗位。
也有的公司把前端的责任放大,负责整个前台view层页面的开发,这样的好与坏在前面的文章中已经探讨过就不一一细表了。
我们以前基本的流程是,领导或甲方提出需求,然后产品分析需求,并且根据需求画出原型图,然后根据原型图出设计稿。
出完设计稿团队评审,过后交与前端制作静态页面,然后静态页面,交与设计审核,过后交给开发人员,进行动态数据的添加。
添加完之后,发布测试环境,产品测试领导审核,成功后,直接发布产品环境。或进行版本迭代。
这是整个的一个设计,开发,部署的流程。
根据前面的,在补充一下,前面的所有流程中的灵魂是原始需求提出者,但人随着客观条件的变化,思维认识会有所不一致,所以产生了文档,文档是贯穿整个流程的一个灵魂。
而产品是整个流程中文档的编写者,因为产品最能接触最原始的需求,对需求的理解更深刻或专业,所以他会有一个文档出来。
这个文档是需要交付给设计,让设计在设计过程中进行参考。
前端看的另外一个文档。交互设计师出交互文档,一般的公司没有交互设计师那就是由产品来出的交互文档。
有的交互不过于复杂,就没有文档,只是邮件。
有时候说,不要这个邮件行不行,那怕是最简单的原始东西,没有文件或邮件是不能做一个后期测试回溯的依据。
产品文档表示页面的流转或数据的走向,交互文档描述页面复杂的交互或各个用户表单与用户发生的各种互动。
另外2个是,要架构师或项目经理出的需求文档,需求文档是对整个项目的历史背景,系统开发软硬件要求,或版本信息,等等。
另外一个是由服务端工程师提供的接口文档,这里边包括一些请求类型,传参的数目与键名,还有服务端返回的参数名约定等等的,这些文档是开发中的灵魂,也是以后测试回溯的标准或依据。
参考:创立一个网站的前前后后(起因,域名,云平台,备案,CDN等等)(1)
2. 进行操作会用到哪些便捷的小工具?
参考:web前端开发分享-css,js工具篇
最主要是开发工具,还有上游是ps要求略会。其它就是不同语言的开发环境的搭建,如果是开端就求助后端,如果是后端自己折腾了。
其它的,都不难,难的是可能是windows,mac,linux平台切换后的思路断片,需要有一个过程熟悉,熟悉之后,基本都不是问题,开发的核心是语言,平台,需求,真正的工具没有难度。
剩下的就是三个利器:vim,git,五笔,有空的学学,没空就慢慢看了。
3.是先用模板做好,然后在基础上改吗??
一般新项目都是手动要写的,写好的有可能也不是模板。
4. 正常大家说的改框架是不是指的用模板做的网站原文件?
框架,有几层意思,frameset也是框架,现在mvvm也是框架,有的java,strusts,php的laravel也叫框架,大部分是不改原文件,而是配置文件,像strusts的xml配置文件,像laravel是直接是后生成的新的php文件。
5. 前端开发做的文件一般是哪些?放在主机什么文件夹里啊
一般是html,css,js三个文件,放在服务器的,有可能是这三个,也有可能是.php,.jsp,.aspx等等的。
可能目录啥的,可以参考一下这个:
参考:豪情-CSS解构系列之一
参考:豪情-CSS解构系列之二
Web开发流程的更多相关文章
- 分享一篇 Git Web 开发流程
分享一篇 Git Web 开发流程 web 项目如何进行 git 多人协作开发 https://segmentfault.com/a/1190000018165757
- web开发流程(传智播客-方立勋老师)
1.搭建开发环境 1.1 导入项目所需的开发包 dom4j-1.6.1.jar jaxen-1.1-beta-6.jar commons-beanutils-1.8.0.jar commons-log ...
- (转)web开发流程
a.项目经理与公司决策层的沟通,以确定这个需求有没有足够的人手和可行性去实现,以及与现有产品的依存关系. b.公司决策层与市场/策划部门的交流,这个过程将进行的相当充分,并且是反复.长期的,它致力于从 ...
- web 开发流程
shopWeb登录 开发步骤 1 数据库 2 创建 Module 3 复制页面 4 创建目录包 添加需要的jar包(引入依赖) 配置文件 5 功能: 编写服务器程序
- Java程序员的日常——SpringMVC+Mybatis开发流程、推荐系统
今天大部分时间都在写业务代码,然后算是从无到有的配置了下spring与mybatis的集成. SpringMVC+Mybatis Web开发流程 配置数据源 在applicationContext.x ...
- 快速使用node.js进行web开发
首先关于node.js的学习,这里推荐一本比较好的教程,nodejs web开发指南,该书通俗易懂地将node.js语言特性讲解完之后,又从一个项目角度带领读者使用node.js学习web开发.相信这 ...
- 2021年Web开发的7大趋势
技术发展日新月异,所以 Web 开发人员也需要及时了解行业最新的发展趋势. 全球有超过 17.4 亿个网站.在每一个细分领域都有无数企业争夺搜索引擎的排名前列位置.开发人员应该了解和发现更多创新的 W ...
- Web服务器具体开发流程
下面是我个人对Web服务器开发流程的一点理解,下面做出了大概的模型,实现了基本的功能,下面也有所有的代码可以提供参考: 一开始学的时候不要把网站想的太复杂了,把网站的流程和大概的原理框架搞清楚,在通过 ...
- 【转】Yeoman:Web 应用开发流程与工具
原文转自:http://blog.jobbole.com/62098/ 随着 Web 2.0 和 HTML 5 的流行,现在的 Web 应用所能提供的功能和交互能力比之前传统的 Web 应用要强大很多 ...
随机推荐
- sql 获取一批指定范围且不重复的随机数
declare @M int,@N int set @m=10 set @n=1 select top 10 cast(rand(checksum(newid()))*(@M-@N)+@n as in ...
- screen 常用命令
screen -r <id | name> # 进入 screen C-a c # ctrl+a + c , 新建screen窗口 C-a A # ctrl+a + A, 命名scree ...
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 代码如下: <div style=" position:absolute; widt ...
- .NET LINQ 元素操作
元素操作 元素操作从一个序列返回单个特定元素. 方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表达式语法 更多信息 ElementAt 返回集合中指定索引处的元素. ...
- HTML中图像代替提交按钮
1. 用图像代替提交按钮 当只有一个提交按钮的时候 ,可以简单的实现,不用添加事件函数,代码是: <input type = "image"' name = ".. ...
- October 18th, Week 43rd Tuesday, 2016
Live as if you were to die tomorrow. 将每一天都当作人生的最后一天来活. If I were to die tomorrow, I may choose to en ...
- Java Web技术之JSP与EL表达式
1,jsp是用来干嘛的? JSP技术是用来解决在Servlet中需要书写大量的拼接html标签.以及框架的代码 2,jsp的三种脚本元素 a.JSP的脚本声明(定义) 格式: <%! 书写Jav ...
- 51nod1088(最长回文子串)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1088 题意: 中文题目诶~ 思路: 这道题字符串长度限定为1 ...
- unity3d编辑器——检视面板部分(一)
最近在学习unity编辑器,so,记录总结一下. 以下介绍了一些简单的unity3d检视面板部分的使用技巧. using UnityEngine; using System.Collections; ...
- C# 显示问题