@ZEAL Blog·厉
WWW Zeal Blog
We stand alone,
TOGETHER.

11点建议:让你的Web开发更专业

Posted by zeal on 2005-11-25 15:56 , 4530 characters , Via |  + 0 - 0   English
转载请保留本行原始出处声明信息 : http://www.zeali.net/entry/244 MaDe1nZEAL
标签 ( 开发/理论 ):  , 
Web开发相关的各种标准和规范也许会让不少被IE给宠坏了的程序员及美工们抓狂。学习这些条条框框的过程总是伴随着枯燥和阵痛,但是当你把知识汲取成为一种潜意识的习惯之后,你会发现事情变得更简单了 -- 至少不用担心哪天冒出个Firefox来就会让你的页面变得面目全非!正如红灯停绿灯行才是保障道路通畅的好方法,而不是大家一起乱穿马路。Muffin Research Labs提出了一些值得在Web开发中作为习惯去养成的建议。

你会下围棋么?学会它很简单。

但如果你不去掌握更为系统和深入的战术套路,就永远也成不了个中高手。

内容优先

可能大多数Web程序员都抱怨过从美工手里拿到的XHTML/CSS静态页面充斥着一堆排列整齐却毫无意义的文字和图片,有时候这些内容和最终实际被显示的信息完全不同 -- 比如文字的长度根本不像美工理想化排列的那样而导致页面变形。但实际上问题的根源并不在于美工,而在于项目策划者在提需求的时候就没有很好的去考虑最终将在页面上去呈现哪些具体的内容。美工得到的讯息只是“这一块需要这么宽,我要放些文字”。于是美工在用Dreamweaver或Photoshop去设计整体页面的时候就只会考虑一件事情:美观。为了美观他们会用恰好的文字/图片数量来填充每一块地方。在这种指导思想下切割出来的页面交到程序员手里去套代码,对程序员是一种折磨:当他们从数据库里面把实际的内容查询出来并显示在指定的区域之后,往往会使原来漂亮的布局变得一团糟。程序员们于是不得不担当起美工的角色对这些内容布局进行一些调整 -- 显然大部分时候程序员的审美观还是满足不了编辑的需求的。最终的结果,就是编辑怪美工设计的东西不行,美工怪程序员乱改代码,程序员呢,只好天天被美工和编辑跟在屁股后面一点一点的去调整页面的显示效果。

所以,我们应该在决定开始设计页面之前,先决定好页面的每一个角落最终将呈现的实际内容是什么,会有多少变化的可能性。只有拥有这些信息,美工才可能依此去设计具有弹性的框架。

内容优先的另外一个好处(正如Andy Clarke在 @media 2005 所提到的)在于:只有很好的把握了网站的内容定位并有针对性的整理出相关的内容素材之后,你才能去做后续的工作。内容优先使你可以更慎重的考虑项目是否对用户有吸引力。

正确的使用标记

语义标记很重要. 在使用标记(XHTML)来组织页面的时候应该让这些标记发挥其对内容本身进行补充说明的作用,而不只是保证外观显示的正确。比如说应该避免使用<b> <br/> <i> <sub> <sup>这些仅仅为了显示效果而使用的标记元素。使用这些标记固然可以达到相同的显示效果,但却对源文档本身没有任何意义。尤其是CSS已经完全从html中独立出来的今天,HHTML/XHTML文档设计的重点应该从最初的“看上去怎样”变成“内容是什么”。使用正确的标记也将有助于内容的索引,方便今后的查询和数据挖掘。如果你对某些标记的用法还没有很清晰的概念,那么就去找到正确使用它们的方法

用纯文本编辑器来编写代码

使用文本编辑器来写XHTML以及CSS源代码能够帮助你更快的掌握html元素,因为你必须了解自己写下的每一段代码的确切含义。可视化编辑器很酷,但却完全束缚了你学习的动力。另一方面,当你完全手写的代码达不到预期效果的时候,也不会再有借口去责怪编辑器有问题了。

可访问性至上

应该在一开始就坚持这个原则。等到你的站点已经产生出一大堆不规范兼容性差的页面之后再要对它们进行改进,难度就远比一开始做要大得多。就像我自己的这个Blog,一开始的时候并没有去考虑trackback、bookmark这些服务对于字符编码的要求,整站使用了GB2312的字符编码。等到后来发现应该使用UTF-8的时候,已经贴了一百多篇的日志在上面。想要对整站进行GB2312->UTF-8的编码转化就多出很多需要考虑的问题,以至于这项工作一直拖到现在也没有去做它。

因此对于你所要采用的技术,包括语法、标记、函数等等,都应该有很明确的概念。哪些是通用的,哪些是受限制的,哪些是过时的。在不了解的前提下,最好先把它记录下来,尝试在后面的项目中根据测试的结果决定是否采用。

避免使用特定浏览器支持的特定语法

每种浏览器的每个版本中都会存在这样那样的问题,这些问题有的导致页面显示的错误,有的则可以被利用来实现本不允许被实现的效果。或者,你可以利用其中的一个漏洞来绕过另一个漏洞所造成的影响。利用这些特殊的语法虽然能够很快的解决眼下的问题,却可能在以后由于官方标准的改进而造成意想不到的麻烦。到时候你将不得不对所有以前用到的地方进行修改 -- 巨大工作量可想而知。关于这些只在/不在特定的浏览器中有效的语法的使用问题可以阅读这篇文章了解更多。

对于IE浏览器来说,最好的办法是使用conditional comments。IE的这项功能允许你指定特定的语句只在IE特定版本下有效进行,防止由于版本变更造成语法冲突等各种无法预料的问题。

在每一种浏览器中都会有一些缺省的样式属性存在,而这些缺省的属性却各不相同。为了解决这些各异的缺省值造成的页面显示差异我们可以通过特殊的样式表(比如Tantek Celik的undohtml.css)来重置所有这些属性,使之在所有浏览器下面显示效果一致。

不要使用内嵌样式

另一个坏习惯是直接在你的HTML代码里面使用内嵌的样式定义。内嵌的css样式定义拥有最高级别的优先级(1,0,0,1),因此内嵌样式将会覆盖所有定义在外部样式表中的相同元素的属性。从根本上来,我们之所以使用CSS就是为了实现页面的表现和内容分离,内嵌样式恰恰违反了这一原则。

使你的页面不受字体大小的影响

如果你已经正确的使用XHTMLCSS,那么你所创建的页面应该不会因为文字大小的改变而变得支离破碎。比如Doug Bowmans's sliding doors technique告诉你如何让元素中的背景图片根据字体的大小而缩放。Dan Cederholm的新书BulletProof web design里面包含了大量如何让你们页面不变形的内容。

不要过分依赖Javascript

Javascript作为客户端脚本语言,并不一定能对所有的客户端产生影响。比如所有的浏览器都允许用户关闭Javascript脚本的执行功能。所以Javascript应该被用来提供基本页面显示之外的功能增强而不至于影响用户的浏览。避免使用内部事件比如onclick、onfocus,而应该学习如何通过外部脚本注册事件句柄以及利用DOM接口来实现功能表现与网页标记之间的分离。

寻求帮助

当碰到任何你所不理解的东西,尽量花时间去完全地领会它。如果你通过Google搜到了自己想要的资源,不要仅仅把代码copy/paste过来,只有充分消化吸收它才能让自己的知识更上一层楼。

不要羞于求教(同事、朋友、类似sitepoint这样的论坛)。在你从别人身上学到东西的同时,别人也会在指导你的过程中提升/巩固自己的知识。当然在提问的时候千万不要简单的把整个问题扔给对方,至少描述清楚你在这之前做过了哪些尝试,有哪些问题点是弄不明白的。经常看到论坛上有的人喜欢把一大段代码贴上去,然后说:“为什么有问题?”这样的提问方式显然会让别人认为你是个不懂得思考和调试的懒汉。愿意帮助你解决疑难的热心人很多,但没人愿意代替你去做工作。

自我挑战

在熟练掌握了现有的技能之后,尝试在下一个项目中采用其他的实现方式。Web的开发设计经验只有在不断的尝试中得到提升。如果整个过程当中没有任何让你皱眉的地方,那就只是简单的重复劳动而已。

参加各种大会/培训

各种开发者大会或者培训不仅仅是你学习的地方,你还可以通过这些机会去认识其他的Web开发设计者,与他们成为朋友或者交流想法。

----------------------------------------------------------------------------------

相关资源: 关于Web开发设计规范和标准的非完整版资源链接。

Mark-up/XHTML

CSS and general Web Standards

Accessibility

Javascript

Browser Bugs / CSS Hacks

Events and training

Last Modified on 2007-05-28 10:50
没有评论.
日志存档
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
本 Blog 原创内容
遵循以下授权:

Creative Commons
(创作共用) CC

署名-非商业性
-相同方式分享
ZEAL Blog 基于
Powered byPivot - 1.24.1: 'Arcee'
Pivot1.24.1
开发
系统部署于
Linode.com
Launched @
2005-04-27
Since 2005.04.27  梦想 就像鸡蛋 要么孵化 要么臭掉RSS Feed (Entries) | About me | Back To Home | @ZEAL | zbird.com | 沪ICP备05024379号