Web Developer可以做得更多

  美国雅虎前端工程师Hedger Wang。这位原雅虎奇摩的第一位Web Developer,非常慷慨的与我们分享了他丰富的经验。现身说法,比空洞的理论更有感染力,我们发现现在遇到的很多问题也都是他曾经遇到过的。美国雅虎里面Web Developer是一个更帖近用户的前端工程师角色,他们负责把UI和产品功能逻辑整合起来,并增强产品易用性和交互体验。

  在他的信息架构(Information Architecture)培训中讲到,像雅虎几百人在一起做产品,内部更需要速度和效率,更需要团队的协同和专业化。以往的开发流程是单线程的,产品经理向设计师提出设计需求,设计师开始设计然后和产品经理反复讨论并定稿,再交给Web Developer转成HTML模板,之后,将模板发给前端工程师开发,前端工程师需要后端提供数据,再将需求提给后端工程师。这时候,Web Developer只能祈祷别把本来写得挺标准的模板破坏。于是,每启动一个项目,哪怕是功能很类似的项目,都要走一遍这样的流程。显然,做法不是高效的,而且在每个环节上都很容易出问题,就像玩多米诺骨牌,任何一个小牌倒了就都白费了。

  “Bottom Up Approach”,对!Web开发由下而上实现才是合理的。产品经理在现有系统和现有技术的基础上,策划产品,细化产品流程,最终确定产品都具有哪些功能。这些做好之后,前端工程师就可以开工了。比如,所有页面都有一个登录模块,直接写成这样就可以了:

<div id="login_mod">
<h2>登录</h2>
<form method="GET" action="">
<ul>
<li><label>用户名:</label><input type="text" name="name" /></li>
<li><label>密码:</label><input type="password" name="pwd" /></li>
<li><button type="submit">登录</button></li>
</ul>
</form>
</div>

  至于在页面上是什么样子,前端工程师完全不用考虑,自有Web Developer后期通过CSS定义它。同样,做一个搜索结果页时,只要生成这样一个结果就好了:

<ul>
<li><a href="URL">标题1</a><p>描述...</p></li>
<li><a href="URL">标题2</a><p>描述...</p></li>
<li><a href="URL">标题3</a><p>描述...</p></li>
...
</ul>

  像这样,前端工程师只需要和Web Developer用XHTML描述一下数据的结构就可以了,但是这时候开发出来的东西就会很难看:

  没关系,Web Developer后期拿到设计效果图后,会根据实际的效果用CSS定义它,最后得到的是这样的:

  这就是前端采用表现分离(Presentation Tier)的好处,不同的专业Team,可以专注在自己专长的领域开发,以实现并行开发,高效而且不易出现问题。用一个现实生活中的例子类比一下就更清楚了,就像要盖一幢房子,首先要有详细的工程图纸,准确标出厅多大,有几间房,几个门...之后,图纸交给设计师来设计装修的3D效果图,同时工人开始盖房。房子盖完后,3D效果图也出来了,再找来装修队按照效果图,哪儿刷什么涂料,哪儿贴什么磁砖...但如果颠倒顺序,先让设计师设计3D效果图,完成后再由工人们照着效果图盖房,最后这房子即使盖出来也不会合格。对照上面的例子,在产品开发过程中,Web Developer就是一个装修工人的角色。

  产品的前端开发可以分为三层:

  结构层就是前端工程师开发出来的产品原型。通过CSS叠上一层表现效果。在这个基础上,再利用JavaScript/DOM加强产品的交互体验。这种分层带来的另一个好处是,如果客户端环境不支持JavaScript仍然可以使用产品,如果客户端环境不支持CSS(像手持设备)内容呈线性排列,仍然是便于阅读的。

  为什么说Web Developer是一个更帖近用户的前端工程师呢?传统工程师是以完成产品功能,优化服务端执行性能为目的的,而Web Developer要考虑产品在用户机器上的性能、用户的操作体验等等这些细节。尤其是现在,用户端的浏览环境是非常复杂的,显示器有16:9的,也有10寸的小笔记本,还有用更小的PDA屏幕...网站的页面应该定多宽才能适应不同的用户,这就要求Web Developer开发的网站页面采用弹性布局。同时浏览器也是多种多样的,PC上用Firefox、IE,苹果上用Safari,手机上用Opera...通过基于标准的Web开发完全可以达到一致性。如果哪天用户的鼠标坏了,他不得不使用键盘访问我们的网站...虽然现在上网快了,但是要知道对于用户期待看到的内容,哪怕等半秒用户都会抱怨。

  看来Web Developer要干的事情真的是很多。还好,雅虎有很多高人像Hedger Wang。雅虎中国的产品目前在用户体验和易用性上,正做着不断的改善和提高。

时间: 2024-10-02 03:18:12

Web Developer可以做得更多的相关文章

Web Developer教程

现在我们介绍一种网页调试的辅助工具:Web Developer! 它是运行在FF(指Firefox浏览器下同)环境中的插件,是目前公认为最为优秀的网页调试工具. Web Developer作为FF的插件存在,主要功能表现在几个重要的方面: 对页面中的文本.图像.媒体文件进行控制,对网页所应用的CSS文件的id与class辅助查看,表格辅助查看,可以实现修改CSS文件实时显示出得到的页面效果等等. Web Developer插件能够帮助我们对CSS网站进行分析,我们使用FF对网页进行浏览,运用We

Web Developer Chrome插件图文介绍

增加了一个工具栏按钮与各种web开发工具.在Web developer 插件说明开发扩展Firefox的官方端口. 的Web开发扩展添加了一个工具栏按钮与各种Web开发工具的浏览器.这是Web开发扩展为Firefox的官方端口. -------------------- 为什么并扩展需要访问我所有的浏览历史记录和私人数据? 这是Chrome浏览器插件显示一个标准的消息(http://productforums.google.com/forum/#!category-topic/chrome/gi

Microsoft Visual Studio 2008 未能正确加载包“Visual Web Developer HTML Source Editor Package” | “Visual Studio HTM Editor Package”

在安装Microsoft Visual Studio 2008 后,如果Visual Studio 2008的语言版本与系统不一致时,比如:在Windows 7 English System 安装Visual Studio 2008 简体中文时,启动Visual Studio 2008就会报错. 报错信息: ---------------------------Microsoft Visual Studio---------------------------包加载失败 未能正确加载包“Visu

什么是Web前端,Web前端是做什么的?

什么是Web前端 Web前端,顾名思义是来做Web的前端的.而Web前端开发应该就是来开发基于Web前端的相关应用的或者说是来开发前端的.那么,前端又是什么呢?我们这里所说的前端泛指Web前端,也就是在Web应用中用户可以看得见碰得着的东西. 前端开发,顾名思义就是来开发Web中用户能够直接接触到东西的.那前端开发主要做哪些细节内容,其相关的职责以及职位又有哪些呢,又或者现在的前端在企业中是一种怎样的地位呢,下面我们将一起研究和分析这些问题. Web前端是做什么的 Web前端,主要是用来开发用户

eclipse中jsp文档无语法着色,安装Eclipse Java Web Developer Tools插件

一.安装Eclipse Java Web Developer Tools插件 1.eclipse菜单:help/install New Software,打开Available Software窗体: 2.Available Software窗体:Work with下拉框中选择mars - http://download.eclipse.org/releases/mars项,mars是eclipse版本,可能有所不同: 3.待Pending...完成后,会显示可选装的插件列表,如果不勾选Cont

HTTP: The Protocol Every Web Developer Must Know

HTTP: The Protocol Every Web Developer Must Know - Part 1 HTTP: The Protocol Every Web Developer Must Know - Part 2

拯救在线音乐?Apple Watch还要做的更多

Apple Watch的发布最终尘埃落定,不管是对天价的吐槽,还是对续航的无奈,抑或是看到时尚单品的欣喜,都只是个人的感受.而对于整个互联网.智能硬件市场乃至相关行业来说,Apple Watch带来的震动才刚刚开始.其中,对于在线音乐行业来说,或将是一个华丽的转折点. 不过实事求是地说,我们也应该看到Apple Watch本身的定位--时尚和科技真正的融合产品.而时尚只是小部分人才享有的--价格在那里放着,Apple Watch要想真正拯救在线音乐行业,或许还要做出更多努力. Apple Wat

生产环境中nginx既做web服务又做反向代理

一.写对于初入博客园的感想 众所周知,nginx是一个高性能的HTTP和反向代理服务器,在以前工作中要么实现http要么做反向代理或者负载均衡.尚未在同一台nginx或者集群上同时既实现HTTP又实现反向代理. 那么到底nginx能否既实现HTTP又实现反向代理呢? 答案是肯定的 刚好前段时间在实际项目中有一个类似的情况出现,由此与大伙分享,由于以前没有写博文的习惯,只习惯于自己记录操作实现步骤及稳定,在以前常遇见问题都是百度.谷歌,众位网友的博文帮助自己见解决了很多问题. 由此可见技术分享的重

Web测试要点 做移动端的测试,也做web端的测试,甚至后面桌面端的测试和后台的测试也做了,基本上把我们产品各个端都玩了一轮

Web测试要点 一.功能测试 1.链接测试 (1).测试所有链接是否按指示的那样确实链接到了该链接的页面:  (2).测试所链接的页面是否存在:  (3).保证Web应用系统上没有孤立的页面(所谓孤立页面是指没有链接指向该页面,只有知道正确的URL地址才能访问). 2.表单测试(1).注册.登陆.信息提交等,必须测试提交操作的完整性,以校验提交给服务器的信息的正确性:(2).用户填写的出生日期与职业是否恰当,填写的所属省份与所在城市是否匹配等:  (3).检验默认值的正确性:(4).如表单只能接