好久没翻译解馋了，来一篇吧，《10 Tips for Budding Web Programmers and Designers》。感谢Eric同学指点迷津。

给网站开发和设计者的10点建议

作者：Chrys Bader
翻译：htmlor

1. 使用Firefox

Firefox是你触手可及的最重要的平台，网站开发时必不可少。并不是说你非得把它作为默认浏览器——平时上网时，你想用哪个都行。

自Firefox问世，就有一些居家旅行必备扩展随之产生。如果你想事半功倍立竿见影，快用它们。

必备扩展

Web Developer （Chris Pederick）

这个扩展有很多功能，虽然多数已被FireBug（下文会谈到）涵盖，还是有一些颇为好用的。其中包括：

  • 缩放浏览器窗口
    简单迅速的缩放窗口，800×600、1024×768… 任何指定的尺寸。使用此功能，可以查看各种分辨率下网站的表现。到你的Google Analytics帐户里看看哪种分辨率的访问者最多吧，然后重点为它设计。（FireBug没这个功能）
    My Visitors' Resolutions
  • 编辑CSS/HTML无需刷新
    使用此功能，不必刷新页面即可修改CSS，并将结果实时呈现于页面。太节省时间了。（Firebug里有类似功能，但没这么方便）
    （htmlor注：靠，用了这么久居然都没发现这个好东西，真是太逊了~）
  • 查看页面加载的所有Javascript
    使用此功能，可以在一个页面内查看所有已加载的JS。查看自己或别人的JS代码，方便的很。（Firebug能显示出所有JS名称，但代码没有摆在一起，不方便查询）
  • 查看生成的源代码
    如果你有用AJAX或者Javascript改变页面内容，此功能绝对实用。因为通常的“查看源文件”模式下，是看不到动态生成的HTML代码的。（Firebug也有此功能）

Firebug （Joe Hewitt）

在办公室里，我们常常会问：“还记得没有Firebug时怎么过么？”它确实改变了我的生活。其主要好处如下：

  • 检阅DOM
    点击“Inspect”，然后鼠标放到页面元件上，就能看到此元件的HTML和CSS代码。
  • 显示样式继承的实时CSS编辑
    简直就是钱啊——这大大节省了布局设计的时间。例如，在Firebug里可以选择一个DIV标记，点击margin属性后手工调整，上下键为加减1个像素，上下翻页键为加减10个像素。（htmlor注：任何数值属性都可以这样调整） 还可以在当前样式添加新属性。效果满意之后，再把修改的CSS代码贴到实际文件中去。
  • 详尽的Javascript调试
    这里的JS控制台比Firefox自带的稍好。它更详尽，是默认控制台不错的替代品。
  • 查看页面加载的所有文件及总字节数
    对于优化站点加载时间来说，这很关键。你可以测试单个文件会加载多久，图片，JS文件，AJAX调用等。在“Net”部分的最后一行，可以看到页面加载文件的总字节数。

2. 保持兼容性

保持跨浏览器的兼容性很重要。对我来说，这是不怎么好玩的一件事。我之前说过最好在Firefox下开发，但也别忘了检查一下页面在IE6、IE7、Safari（或者还有Opera）中的表现。还有，到Google Analytics里看看你的访问者都用什么浏览器。他们用哪些，你就得重点照顾哪些。

My Visitors' Browsers

在自己网站的Google Analytics帐户里，我亲眼目睹了IE6占浏览器比例的下滑，持续下滑。等到哪天它跌破5%时，我会开个party庆祝一下——因为再也用不着支持它了。

想要不那么费事的实现兼容，那就简单一点。比如你为了某种效果在一个浏览器里百般调试、费尽周折，它却很可能在另外的浏览器里不好好表现。这就要说到下个建议：少即多。

3. 少即多

把握好分寸。图形设计，编程，页面布局，任何事情都需如此。简单一点。

  • 图形设计
    现在有一种滥用渐变、斜角和阴影的态势。有时候事情如果没搞好，很可能是东西太多了。简简单单、大方得体就好。
  • 花哨的Javascript
    用一些很酷的JS效果增强用户界面很好，不过另一方面，它会造成用户的负担，尤其是那些没有像你一样拥有超级电脑的用户。此外，还有跨浏览器不兼容的麻烦。再强调一次，不要对JS倚重太过，什么事都靠它。如果实在想用JS，我强烈推荐jQuery。

4. Javascript？就用jQuery

Javascript用来显示/隐藏信息很棒，它让页面空间开阔，不会挤成一堆。想以一种更新更酷更简单的方式操控JS？一定要试试jQuery。

jQuery

jQuery的主要优点之一：兼容性已广受各大浏览器的考验。也就是说，其所有方法都能保证正常运行。优点之二：极其易用。

jQuery使用CSS的选择器方式操作对象，让你随心所欲的控制它们，一切尽在掌握。例如：

隐藏id为myDiv的DIV里所有的段落

$('#myDiv p').hide();
$('#myDiv p').hide('slow'); // 动画效果隐藏
$('#myDiv p').toggle(); // 点击显示，再点击隐藏

从这里了解更多jQuery。

其他类似的Javascript库也不少，像mootools、prototype和script.aculo.us。

5. AJAX要因地制宜

Web 2.0大潮中，AJAX炙手可热。很多人都问我“你懂AJAX吗？”，好像它是种独立的编程语言似的。说白了，AJAX只是一种手段而已，它通过与服务器端交互，无需刷新页面就能获取和更新数据。

我注意到最近有一种趋势：无论干什么都用AJAX。这并不总是明智的选择。原因？

  • 访问量。全盘应用AJAX，会损失掉宝贵的PV。
  • 可用性。这一点会有争议，但我认为大多数用户（可能不包括你）仍旧有个习惯：他们依然把页面刷新当作某些事件（如表单提交、页面跳转等）发生的迹象。

AJAX绝对有用武之地，而且某些情况下非它不可。不过重申一遍，少即多。把握分寸，适度使用Javascript和AJAX就好。

6. 搜索引擎喜欢结构化代码

现在有种风潮，人们想尽办法让自己的关键字在搜索结果中名列前茅。作为开发者，你有责任因势利导，用结构化代码尽可能优化网站以适应搜索引擎。

以下是一些重要的结构化标记：

  • H1 - 最重要的标题，搜索引擎最重视它。
  • H2，H3，H4，H5 - 重要性依次递减的标题。用它们恰当的传递信息，搜索引擎会根据字号给予相应的关照。
  • A - 链接。通常给它个TITLE属性比较好。 
    <a href="http://blog.htmlor.com/" title="htmlor's blog">htmlor's blog</a>
  • IMG - 古老的图像标记。给它个ALT属性比较好，搜索引擎会把其属性值当作关键字。另外，当图像无法显示时，访问者会看到替代文字。 
    <img src="http://blog.htmlor.com/myimages/htmlor_gmail.gif" alt="htmlor's email" />

还有一些重要的标记：

  • TITLE - 此标记会作为搜索引擎查询结果的标题显示，应该认真对待。
  • META - 最好完善一下keywords和description，搜索引擎还是会读取这两项老掉牙的信息的。 
    <meta name="keywords" content="编程,设计,武侠,小说,足球" />
<meta name="description" content="关注新技术，趣文章，足坛风云；偶尔抒抒情，搞搞笑，装装深沉。" />

7. 布局用DIV 别用TABLE

其实这条我们都已习惯了，现在还用TABLE布局是会被人极度鄙视的。在列举表式数据时用用还差不多。

搞定DIV布局需要很多实践，不过一旦你掌握诀窍，它将变得俯首帖耳。由此获得的灵活性，比你能想到的还要多。

其实它非常简单，就好像 float 和 width 一样。

我在Virb写了个很简单的两栏布局教程，有兴趣就看看吧。

8. 少用行内样式

写代码时，通常会直接在元件标记上加几句样式，这比往CSS文件里加个Class或属性简单顺手一点。不过，最好别这么做，因为代码需要可维护性。

某些时候，你将不得不面对自己以前写的代码。自己的床自己得睡，自己犯懒自己遭罪。10年来，我认识到一个道理：现在额外花时间，将来特别省时间。这就说到了下个建议：代码要考虑将来。

不好的

<p style="font-size:14px;margin-bottom:0;">第一个标题</p>
<p>正文内容</p>
<p style="font-size:14px;margin-bottom:0;">第二个标题</p>

好的

<style type="text/css" media="screen">
p.header{
  font-size:14px;
  margin-bottom:0;
}
</style>

<p class="header">第一个标题</p>
<p>正文内容</p>
<p class="header">第二个标题</p>

9. 代码要考虑将来

要给代码写注释。整洁，有序，别偷懒。如果觉得匆匆忙忙没心思，休息一会儿再回来写。

某些情况下（比如你的网站将来成功了），别人会来拜读的代码。有时候，这个人会是你。

几年之后，看到自己当年没有注释、乱做一团的代码，你肯定悔不当初。为了避免将来的自怨自艾，现在就把复杂的代码注释一下吧。

注释也不要太多。那些简单到一目了然的代码根本没必要说明，否则泥沙俱下，真正有用的注释会淹没在重重文字之中。

10. 了解标准，但不必束手束脚

别再用SMALL、CENTER、FONT等不被推荐的标记了，这样给人感觉不好。

听说SMALL标记还没被弃用——不过抱歉，我肯定它没几天了。

网站上的有效XHTML和CSS标志告诉人们，你遵守了某些规则。也许这让你感觉与众不同，但是，网站质量与此无关。去看看哪个成功的大网站能完全通过HTML标准验证？ 所谓标准，其实跟不上新方法新技术的发展。

开发网站时，要尽量遵循HTML标准。不过有时候，可能需要跳出标准去实现某个功能，这样才能兼容所有浏览器。对此不必耿耿于怀，说到底，功能才是网站的根本。

如果实在想的话，可以用W3的HTML验证器检查你的代码。

讲完了

考虑一下上述建议吧，我推荐的工具可以开始上手了。Good Good Develop, Day Day Up!

（完）