论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{WEB标准}WebDeveloper要做的事情真的很多!

文章类别:div+css布局 | 发表日期:2008-9-26 11:53:15

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

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

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<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定义它。同样,做一个搜索结果页时,只要生成这样一个结果就好了:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<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。雅虎中国的产品目前在用户体验和易用性上,正做着不断的改善和提高。
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058