用上新版的Twitter已经有一段时间了，个人在使用的过程之中感觉较之旧版在体验方面有了较好的提升。只是感觉比之前的版本好用，但是具体体现在什么地方，体现在哪些细节之上，还一下子真的说不出来。

刚刚在看Mashable上面最新发布的一篇文章，名字叫做New Twitter Design Based on the Golden Ratio [IMAGE]，中文简译应该是“Twitter新版设计遵循黄金分割率(图)”。新版Twitter的设计是基于黄金分割率的！真的是太有才了！

由于之前看过基于黄金分割率进行网页布局设计的相关文章，并曾构想并尝试过按照这样的定律去进行网页栅格化布局，因而对这一文章非常感兴趣。索性溯本求源，查找源头信息，一探新版Twitter设计背后的奥秘。

从毕达哥拉斯到达伦·阿罗诺夫斯基，黄金比例，这样一个被发现存在于艺术和建筑学每个角落的非理性数学常数，已经很久远了。而最近，它竟然成为了新版Twitter的设计依据。

顺着Mashable文章，找到了Twitter的Flickr页面，发现这样的图片和说法来自于Twitter的创意总监道格·伯曼(Doug Bowman)，然后通过Doug Bowman的Twitter帐号@stop发现了他的Flickr，并在里面找到了有关于新版Twitter设计的四张图片。

有关新版Twitter设计的四张图片及相应描述如下：

新版Twitter的比例

对于所有对新版Twitter页面设计比例好奇的人，应该知道的是，我们不是随随便便选择这样一个比例的。当然，这一比例仅适用于最窄的UI版本。如果您的浏览器窗口比较宽，我们将摆脱这样的比例，扩大您的个人信息面板，以便于提供更大的效用。但宽度最窄的地方，我们已经在开始使用这一明智的比例。

新版Twitter的比例 (内部)

这张图用来回应那些说上一张比例图包含内边距(padding)的人。。。

新版Twitter栅格图 (窄)

给那些对我们所使用的栅格系统感兴趣的人，这是一种奇数的栅格(15列，窄版的宽度是880px)。我们的前端web客户端团队在工作中坚持规范并做得尽善尽美。尽管有几个元素没有对齐或者偏离网格，但已经非常接近原版设计了。

新版Twitter栅格图 (宽)

给那些对我们所使用的栅格系统感兴趣的人，这是一种奇数的栅格(17列，宽版的宽度是1000px)。 我们的前端web客户端团队在工作中坚持规范并做得尽善尽美。虽然信息面板的最右侧有了一丁点的偏移，但同样非常接近原版设计。

关于黄金分割率，如果您之前不是很了解，请移步Wikipedia的黄金分割词条。

PS.写完这篇文章的时候，发现标题为“Twitter新版页面比例遵从黄金分割定律(图)”的文章已经在各大网站疯狂转载了，而内容不用看也知道是千篇一律的，来源应该是Mashable的文章，而翻译，真的不敢苟同，明眼人一看就知道翻译此文的人根本不懂或者不用Twitter。国人的素质和浮躁啊，唉。。。

相关日志

• 继续说说新版Twitter设计方面的事儿

分类：Web前端, 交互体验, 用户体验 | 发布日期：2010-09-30 | 16 条评论 | 标签：@stop, Doug Bowman, Golden Ratio, twitter, 新版Twitter, 栅格化, 黄金分割, 黄金分割率

1. NicEdit

演示 | 下载

NicEdit小巧精悍，拥有你所需要的大部分功能，而且也很容易集成到你的网站之中。它完全可以做为那些体积大、功能繁杂的编辑器的替代者。

2. TinyMCE

演示 | 下载

TinyMCE是一个基于JavaScript的开源HTML所见即所得编辑器。它易于集成，并且拥有可高度定制的主题和插件。TinyMCE是功能非常齐全和强大的编辑器之一，它可以达到微软Word类似的编辑体验。

3. CKEditor

演示 | 下载

CKeditor是在FCkEditor基础上开发的新版本，而FCkEditor的市场地位之前已经得到了证明。建立在这个基础上的新版本，是为了修复FCkEditor的一些已知问题。而其结果肯定是造就一个可媲美微软Word和OpenOffice的完美功能、高性能的所见即所得编辑器。

4. YUI Rich Text Editor

演示 | 下载

YUI富文本编辑器是由Yahoo开发，用来控制UI界面，并把textarea文本域变成功能齐全区域的所见即所得编辑器。它虽然有几个具有不同功能特性的版本，但是仍然用不拥挤的按钮和功能界面达到了完美的用户体验。

5. MarkItUp!

演示 | 下载

Markitup!是一个基于jQuery的插件，它可以让你把任何一个textarea文本框变成变成一个标记语言编辑器。 Html, Textile, Wiki Syntax, Markdown, BBcode 或者任何一个你自己专属的标记语言都可以轻松地实施。 Markitup!不是你所期待的那种全功能编辑器，而是一款轻量级的，可高度定制的编辑器。Markitup!也不是所见即所得的编辑器，而且永远也不会那么去做。

6. FreeTextBox

演示 | 下载

FreeTextBox是一个特别为ASP.NET打造的HTML编辑器。它的外观和使用感觉，跟你在使用微软 Word时的感觉很类似。它的免费版本缺少一些附加的功能，但是免费版本已经足够用了。

7. MooEditable

演示 | 下载

所见即所得编辑器是一种比较流行的jQuery插件，但是作为Mootools插件的所见即所得编辑器就没那么常见了。而MooEditable填补了这一空白，它在Mootools这个优秀的JavaScript库的基础上，为用户提供了一个简单而又高效的体验。如果你是一个Mootools爱好者，你也会喜欢上这个编辑器的。

8. OpenWysiwyg

演示 | 下载

OpenWysiwyg是一个跨浏览器的富文本编辑器，它几乎拥有你所需要的各种功能。它还有一个包含下拉列表和按钮的时尚用户界面，其功能亮点是可以用来编辑具有不同边框和颜色的表格。遗憾的是，暂时还不支持Chrome。

9. Spaw Editor

演示 | 下载

Spaw是一款基于Web浏览器的所见即所得编辑器，它使网站开发者可以轻松地把标准的textarea文本区域替换为功能齐全、完全可定制、多语言、可换肤的基于Web的所见即所得HTML编辑器。

10. jHtmlArea

演示 |下载

jHtmlArea是一款以jQuery插件形式构建的所见即所得文本编辑器。它的目标是简单、重量，并且很好地达到了这个目标，里面仅保留了最基本的功能选项。它的外观、功能和语言都可以轻松地进行定制。

想进一步探讨吗？

如果你用过其中的一种，或者用了另外的一种基于Web的文本编辑器。或者，你对这个话题感兴趣，请在下面留言讨论。很乐意听到你的观点和声音！

PS:原文链接

相关日志

• Notepad++配合QuickText打造快速高效的文本编辑器

分类：Web前端, 内容分享 | 发布日期：2010-04-16 | 14 条评论 | 标签：texteditor, Web编辑器, WYSIWYG, 所见即所得, 文本编辑器

是否符合标准，谁说了算

既然想要了解Web标准的中国现状，那就要首先明白什么样的Web前端页面是符合Web标准的，什么样的是不符合标准的，到底谁能够说了算。说到这里，我们必须提一下W3C（W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。）的Markup Validation Service，也就是标记验证服务。这一服务是由国际万维网联盟推出的，用来校验一个Web页面的标记是否符合Web标准。

这一服务的在线地址是 http://validator.w3.org，页面截图如下图所示：

Web校验服务

知名网站的Web标准现状

一般来说，通过W3C的这一服务，就可以快速检验一个Web页面到底是否符合Web标准。而国内的知名站点的Web标准现状如何呢，我们不妨找一些网站拿出来校验一下。

我们选取写作当天Alexa网站（http://www.alexa.com 一个第三方的国际网站排名统计服务）排名中的中国网站排名（Top Sites in China）前五名的网站去进行相关的标记校验。具体选中的网站截图如下：

Alexa网站

下面我们把选中的网站去一一进行标记的校验。首先我们校验的是百度，百度是中国市场占有率最高的中文搜索引擎网站，其首页相当简单，但是其表象下的HTML代码是否也同样简单且清晰明了呢，我们一起来看一下：

百度首页HTML校验结果

可以看到，百度首页这种极其简单的页面还存在41个错误和22个警告，无法通过校验。

接下来，我们需要校验的网站是腾讯QQ网，QQ网通过QQ的广大用户群现在已经发展成国内目前整体流量和排名第一的门户类网站，我们来看看它的校验情况：

腾讯网HTML校验结果

上图是校验的提示信息，通过阅读下面的相关信息，我们发现，由于HTML方面的问题，QQ首页的Web文档没有办法被进行校验。

QQ的页面是这样的一种效果，那么接下来的新浪网会是什么样子呢？新浪是中国的传统门户网站，在门户里面一直排名前三，我们来看看它的Web页面有没有像它的综合实力一样好：

新浪首页HTML校验结果

意料之外，又是情理之中的事情，跟QQ一样，新浪的Web页面也是无法进行相关的校验，不知道这算不算是门户网站的通病。

下面这个，是广受好评的Google中文网站。Google在业界凭借不作恶的承诺和完美的技术一直保持着良好的口碑，不知道表象之下的Web代码校验起来会是什么样子的。猜测起来应该至少不会比百度的要差吧？我们一起拭目以待：

Google首页HTML校验结果

结果出来了，错误46个比百度的41个多5个，警告10个，远少于百度的22个。同时，鉴于Google的Web页面相比百度的不论结构和功能都要复杂很多，Google相比百度在Web标准方面把握的要好一些。

最后，我们一起来看一下淘宝网在Web标注方面的表现。写这一节的时候，查看Alexa，发现淘宝网难以置信地排在了第五位，很是惊讶。淘宝网最近发展的的确很快，而且他们一直在招聘Web前端开发工程师，有种欲招揽天下高手尽归我有的感觉。而且，淘宝UED在Web前端方面的确建树颇丰，也一直以国内前端的旗帜和领袖标杆来标榜。我们来看看他们的校验结果会不会让人有一种眼前一亮的感觉。

淘宝首页HTML校验结果

没错，您刚刚看到的就是淘宝网首页的Web页面校验结果。306个错误和6个警告。错误较多，但是警告相当少，看来在Web前端方面也算是没枉费心机。

为什么符合标准的网站这么少

上面我们看了国内Alexa前五名的网站的标记Web标准校验结果，我们已经预先做好了接受比较差的结果的心理准备，但是在现实面前却发现依然难以接受。

为什么，而这又是为什么呢？

究其原因，我感觉主要这样几个方面的原因：一是国人最技术和标准没有那么关注和重视；二是国内整体的Web环境的遗留问题和公司政策方面的问题；但是究其主要原因我感觉还是由于国内的Web前端从业人员缺少对行业和相关标准的准确认识和清晰定位，另外就是缺少对细节和技术的严格要求，当然，还有对自己的严格要求，浮躁。

当然，我也不能例外。写这些文章的目的，就在于能够使自己沉下来，细细总结、关注并重新学习认知Web标准和Web前端开发的方方面面，完善并改造自己的同时也能够给国内的同行一些自己的经验分享。

符合Web标准的Web前端开发之路，我们任重而且道远，但是，我们在路上，我们在不断地求索……

相关日志

• 精品阅读（8）20090901
• 前端开发需要遵循的Web标准
• 为什么要使用Web标准
• 什么是Web标准

分类：Web前端 | 发布日期：2009-08-21 | 15 条评论 | 标签：Web标准

是的，这就是我即将要讲到的，Web前端开发过程之中需要遵循的具体的Web标准。而在这之前，我们首先需要了解的一种理念就是，在Web前端的开发制作之中，会分为结构、表现和行为三方面，而依据标准的规范要求，这三个方面应该是相互分离的。

下面我们将按照结构、表现和行为三个层面对Web前端开发过程中需要遵循的Web标准进行一个较为细致的分析和描述。

结构化文本标记语言HTML

结构化标记，这是每个Web文档的基础所在。结构化文本标记语言英文简称HTML或者XHTML，是由一些列包含属性的元素组成的标记语言。这些元素用于标记文档中各种不同类型的内容，并规定每部分的内容在Web浏览器中如何被渲染。

HTML的元素用来定义内容类型，而属性用来定义这些元素的附加信息，例如识别元素的ID，或一个链接指向的位置。必须牢记的一点是，标记应该尽可能地语义化，即应该尽可能精确地去描述内容的功能。下图是一个典型的HTML元素的结构剖析图。

HTML元素结构剖析图

HTML是HyperText Mark-up Language的英文缩写，中文翻译为超文本标记语言。那么XHTML又是哪路大仙呢？XHTML是The Extensible HyperText Markup Language的英文缩写，可以翻译为可扩展超文本标识语言。

HTML是一种基本的Web标记语言，XHTML是一个基于XML的Web标记语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML。本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。

我是该用HTML呢，还是XHTML？两者之间到底有什么差别呢？其实它们的功能是大体一样的，两者最大的差别是在结构上。下面我们用一个表格的形式对比一下两者之间的具体差别。

结构化标记的HTML是Web标准之中的最为基础和核心的内容，它是用来描述Web文档的基本结构骨架的。HTML语法简单，但是用起来并把它用好却也不是一件容易的事情，你不但要深入了解每个结构标签的含义，更要去深入研究各个标签的结构语义和具体的应用语境和环境。同时，HTML是后续学习表现语言CSS和文档对象模型DOM和行为脚本语言JavaScript的基础，因而这一部分的内容需要深入、仔细得去进行学习和掌握。后续我们会按照语义分类的方式对HTML进行深入细致的讲解。

表现类语言CSS

CSS，Cascading Style Sheets的英文缩写，直译过来的汉语意思是层叠样式表，是用来描述Web文档的外观表现的。也就是在HTML搭建好的骨架上面去进行合理的布局和装修施工，以还原Web页面的设计原型。

一开始的时候，CSS主要用来定义一些字体的属性和外观，随着主流浏览器对CSS这一表现类语言的支持，现在CSS开始越来越多地应用到Web前端的设计还开发之中，用来描述Web文档的布局以及视觉外观。

使用CSS，你不但可以为HTML元素改变或添加颜色、背景、字体大小、样式，还可以在网页内不同的位置对元素进行定位。使用CSS来应用样式，主要有三种方式：一、 对元素的默认属性进行重新定义；二、针对一个ID应用一种样式；三、针对一个类（class）应用一种样式。下面我们用具体实例分别讲述一下这三种方式的实现方式和应用方法。

• 1、对元素的默认属性进行重新定义。通过向某一个HTML标签元素设定样式规则，可以改变这个元素标签的默认浏览器渲染规则。例如，通常Web文档中的段落文本默认是现实为黑色的，通过为p标签设置合适的属性就可以改变这一默认属性。
  

  p {color:red;}

  这样，所有在<p>跟</p>之间包含的段落文本的颜色就会变成红色了。

• 2、针对一个ID应用一种样式。定义一个ID，并将这个ID赋予某个HTML元素标签（在一个Web页面中，每一个ID只能使用一次），这样就可以更好地控制这个唯一ID的相关属性了。例如，上面的例子，你不想更改所有段落的文本颜色，而只想改变某一个段落的颜色，那么只需要在这个段落上添加一个唯一ID：
  

  <p id=”important”>这里是一个段落文本</p>

  然后对其添加如下的CSS规则：

  #important {color:red;}

  这样做，该CSS规则只会应用于Web页面中ID属性为important的段落（#是CSS中用于指明ID的符号）。

• 3、针对一个类应用一种样式。类与ID类似，它与ID的区别在于每个Web页面中你可以有多个相同的类。接着上面为段落改变文字颜色的例子讲，如果希望网页中的前两个段落的文字显示红色，你可以分别向这两个段落添加类：
  

  <p class=”important”>这里是第一个段落文本</p>

  <p class=”important”>这里是第二个段落文本</p>

  然后，添加如下的CSS规则：

  .important {color:red;}

  这样，添加了名为important的类的前两个段落文本的颜色就变成红色了。需要指出的是，在这个例子中，important是一个类，而不是一个ID（.是CSS中用于指明“类”的符号）。

这上面的几个例子之中我们可以看到，为了用CSS可以更加高效地去控制页面的细节展现，良好的HTML结构是必不可少的。后期在我们讲到用CSS来控制布局的时候你会发现结构化、语义化的HTML也是必不可少的。当然，良好的HTML和CSS也是DOM和JavaScript的基础，因而，前期HTML和CSS这两个方面的内容我们必须有一个良好的、扎实的基础。

文档对象及行为脚本语言

文档对象模型DOM是Document Object Model的英文缩写，是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而
DOM 被认为是基于树或基于对象的。

最后再来看行为脚本语言JavaScript，它是一种用于向网页中添加行为的脚本语言，可以用于检验你输入某一个表单里的数据的有效性，提供拖放功能，改变漂浮广告的样式，使页面元素如菜单等动起来，处理按钮功能等等。最新的JavaScript是这样工作的：找到一个目标HTML元素，然后对该元素进行一些处理。这和应用CSS差不多，不过两者的运行方式、语法等，则有相当大的差别。

JavaScript是比HTML和CSS更为复杂和庞大的主题，因此在这本书里，我们不去学习太复杂高深的主题，而是以把HTML和CSS的基础及高级应用学好为主。如有需要，我们可以后续再出一些关于文档对象模型DOM和行为脚本语言JavaScript的相应文章或者探析方面的书籍。

Web标准层面的主要构成要素HTML,
CSS和JavaScript其实并不神秘，它们都是Web演进的自然产物。如果你已具有一些HTML方面的知识，完全不用丢弃。你所具有的所有HTML知识，依然很有用，你所需要做的只是以一种与过去不同的方式来处理一些事情，并在写HTML标记时更加仔细和认真一些而已。

使用Web标准进行Web前端开发，除可以让你把Web前端开发工作做得更好以外，本身也是很有意义的。一些人不愿意使用Web标准进行Web前端开发，其理由是这样做很耗时，而且必须费很大力气进行跨浏览器显示的页面布局。但是，使用非基于Web标准的方法进行页面布局，对于Web页面的跨设备访问并在未来更高版本的浏览器中正常显示是几乎不可能的事情。

相关日志

• 精品阅读（8）20090901
• Web标准在中国的现状
• 为什么要使用Web标准
• 什么是Web标准

分类：Web前端 | 发布日期：2009-08-20 | 2 条评论 | 标签：Web标准

那么，到底是什么促使我们使用Web标准，为什么要使用Web标准呢，使用Web标准到底有什么好处呢？

• 提高代码的利用效率：当你深入学习和了解Web标准之后，你会发现Web标准使用的最佳习惯主要是关于代码重用的。通过重用代码，你可以将HTML内容和CSS样式信息及JavaScript行为信息相分离，减小网页体积，而且只需要写一次代码，在以后需要的地方重用即可。
• 更简易的开发与维护：如果你可以只写一次HTML代码，然后在需要应用样式和行为的地方，使用类和函数。而以后，在你需要做出改动的时候，你可以只在一个地方修改，然后此修改就会自动应用到整个Web站点，而不再需要一处一处地修改。
• 提高可访问性：Web上的一个大问题就是，让Web站点可以被每个人访问，而不论他们身处何种环境。这包括要能让残疾人，包括盲人、视觉受损的人、和运动功能有障碍的人也能访问网站。通过使用Web标准和最佳的习惯，你可以使你的Web站点能被尽可能多的人访问。
• 设备兼容性：兼容性，不仅要确保你的Web站点可以跨平台（如Windows、Mac、Linux），而且要能在其它的浏览设备上工作，比如现在用的手机、电视、游戏控制台等。这些装置在屏幕大小、处理能力、控制机制等方面都有一些局限性。不过你放心，通过使用Web标准和最佳的习惯，可以让你的Web站点能在绝大多数装置上显示。要知道全球手机的数量多于个人电脑的数量，而且很多手机都是可以上网的，你或你的客户怎能不去占领这个大市场呢。
• 更快的网页下载、读取速度：更少的 HTML 代码带来的将是更小的文件和更快的下载速度。如今的浏览器处于标准模式下将比它在向下兼容模式下拥有更快的网页读取速度。
• 更高的搜索引擎排名：在这里，我指的是所谓的“搜索引擎优化”，即让你的Web站点能尽可能多地被网络爬虫爬到，并且被索引，从而提高你的Web站点在百度、谷歌等搜索引擎上的排名。这是一项专门的学问。同样地，通过使用Web标准，你就可以让你的站点在百度、谷歌等搜索引擎上尽量靠前地显示，这必将大大地促进你的业务。
• 更好的适应性: 一个用语义化标记的文档可以很好的适应于打印和其他的显示设备（像掌上电脑和智能电话），这一切仅仅是通过链接不同的 CSS 文件就可以完成。你同样可以仅仅通过编辑单独的一个文件就完成跨站点般的表现上的转换。

正是因为具有了这样的一些优点和好处，Web标准才有了其独特的魅力和特色，而Web标准的这个优点也是我们去学习和追随Web标准的理由和意义所在。虽然有些人骨子里对Web标准方案和抵触，但不可否认的是，Web标准的的确确有益于Web的良性发展，也有利于公司利益、效益的最大化和工作效率、质量的提升。动起手来，是时候开始追随并应用Web标准到自己的日常工作和生活了。

相关日志

• 精品阅读（8）20090901
• Web标准在中国的现状
• 前端开发需要遵循的Web标准
• 什么是Web标准

分类：Web前端 | 发布日期：2009-08-19 | 1条评论 | 标签：Web标准

Web标准按照其行为和表现方式，一般可以分为四种类型，它们是：

结构化标记语言

结构化标记语言是用来描述Web页面的骨架和机构的一种描述性的计算机语言，按照规范公布的先后顺序，主流的结构化标记语言可以分为如下的几种：

• HTML（超文本标记语言） 4.01
• XHTML（可扩展超文本标记语言） 1.0
• XHTML 1.1
• XML（可扩展标记语言） 1.0
• HTML5 （正在草案制定中）

表现类语言

表现类语言的出现，主要是用来描述结构化标记语言的外观表现的，也就是说，用结构化标记来搭建Web页面的骨架，用表现类语言来给骨架进行设计和装修美化。变现类语言按照发展历程主要有下面几种：

• CSS （层叠样式表）1
• CSS 2
• CSS 3 （正在草案制定中）
• MathML （数学置标语言）
• SVG （可变矢量图形）

文档对象模型和行为脚本语言

文档对象模型简称DOM，是一种与浏览器，平台，语言无关的接口，是用以访问页面元素的标准组件。简单理解，DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。文档对象模型按照发展主要有下面几个过程：

• DOM （文档对象模型）1
• DOM 2
• DOM 3

行为脚本语言是用来控制页面的动作和交互行为的脚本语言，是在Netscape的Javascript和Microsoft的Jscript脚本语言的基础之上发展而来的。行为脚本语言主要有下面的种类：

• ECMAScript 262 （JavaScript的标准化版本）

当一个文档被认为离 Web 标准不远了的时候，那就意味着，除了具有上面所提到的技术，还应当：

• 由符合标准的 HTML 构建
• 用 CSS 来布局而不是表格
• 使用结构化、语义化的标记
• 能够在任何平台和浏览器中显示

能够在任何浏览器中显示并不代表在任何一个浏览器中显示的效果是完全相同的。使一个文档在不同的浏览器和平台上都有相同的显示效果是不可能的，即便只用图片也不可能，因为发布在网上的文档将被不同的操作系统上的不同的浏览器软件所显示，并显示在不同大小与质量的显示器上（或者显示在非显示器上），浏览者也可能改变了浏览器的默认字体或者其他喜好。接受这样的一个现实，能使你在Web标准之路上减少一些挫折感。每一个做网页的人都应该了解，一些技术上的先决条件我们不得不考虑，就像那些出书、拍电影、拍电视的人一样，他们也有一些其他方面的前提必须要考虑。

在后续的文章里，我将主要去写一些如何去基于Web标准层面的结构化标记语言HTML和表现类语言CSS去构建简单、灵活、方便、高效和高性能的Web前端页面。而对于文档对象模型和行为脚本层面的内容，由于内容的循序渐进提升和篇幅的限制，我将会在之后陆续去写。

相关日志

• 精品阅读（8）20090901
• Web标准在中国的现状
• 前端开发需要遵循的Web标准
• 为什么要使用Web标准

分类：Web前端 | 发布日期：2009-08-18 | 2 条评论 | 标签：Web标准

公司初创期，Web前端可能都没有专门的人员来做，而是由美工兼任，而其职责主要是完成Web前端页面的HTML和CSS。而对于Web页面的实现方式，则没人去关心。

之后，随着Web标准概念的普及，稍具规模的公司一般单独分出一两个人来做Web的前端制作。这个时候的前端人员主要是用重构的理论和思想完成Web前端页面的制作，但是对于复杂绚烂的的交互效果则只能叹息。

随着Web前端制作的渐入佳境和自我的技术追求以及公司对个人的更高要求，我们开始逐步实现页面的基本交互效果，并制定出自己初步的基本前端架构方案。这个时期所能实现的功能和效果都是极其简单的，而架构规划也是不够清晰且问题多多。

更进一步，人员可能有所增加，也就三五个人而已，但是却要负责整站的Web前端页面了。这个时候，基本的控件都有了，内部也有相应的规范了，各种文档也逐步建立起来了，算是一个逐渐成熟的上升期，看起来已经像是前端开发了。但是这个事情也有很多问题显现，由于我们已经逐步按照Web标准来实施了，但是编辑同学们却还停留在远古的table时代，因而你在做好工作的同时还要抽出相应的时间去进行孜孜不倦的布道和不厌其烦的讲解。而且，由于承接全站的Web前端，还要兼顾培训，所以这个时期的工作压力也是非常大的。

接下来，当你的Web前端团队达到10个人左右的时候，就是另外的一番景象了。这个阶段差不多也是Web前端现有的较高级阶段了，这个时期你需要制定详细的规范，还要去控制项目的整体流程，当然，文档也是必不可少的。你不但要做好Web前端本身，还要做好内部的规范，控制好流程，做好团队的协调配合以及项目文档的撰写和跟踪。

达到这样一个阶段，你也就差不多从Web前端的游兵散勇成长为Web前端正规军的正式一员了，而这个时期也就完全有能力为用户体验的提升提供能量了。但是有时候却要感慨，用高射炮打蚊子到底值不值，而我们制定的规范到底提高了多少效率，而又限制了多少的创新呢？

那到底怎样才算是终极阶段呢？我们正在继续追求！正规军是不是还要继续修炼呢？是的，这就是我们的终极目标，做一名合格的Web前端正规军。

相关日志

• PPT分享：CSS继承之详解
• 20个免费的高品质XHTML/CSS模板下载
• 对立统一视角下的设计与前端
• Notepad++配合QuickText打造快速高效的文本编辑器
• PPT分享：高效、可维护、组件化的CSS
• Web前端开发的一般项目流程
• Web前端开发的职责是什么？
• Web前端都有些什么职位？

分类：Web前端 | 发布日期：2009-08-17 | 1条评论 | 标签：Web前端

项目开始之前，我们需要参加项目的需求评审，并深入了解项目，评估项目的相关技术实现方式和细节。同时，我们还要参加交互设计师设计的原型评审，深入了解需求，评估和制定前端实现的时间周期。

项目实施过程之中，我们要和视觉设计师配合，把视觉设计师的最终设计稿用HTML和CSS转化为Web前端页面。此过程中还要与后台的开发人员讨论确定细节的实现方式和方法，并将完成的Web前端页面交由开发人员进行功能、数据等方面的开发。此外，还要和测试人员约定测试环境的部署，并参与测试并修复测试阶段相应的前端BUG。

而在项目开发测试完成并成功上线以后，还应该继续跟踪一段时间，并对实际运行中发现的前端细节和性能方面的问题进行相应的优化和完善。

写代码 –> 执行代码 –> 发布上线，这是一个传统的前端开发流程，但是这样的一个流程对于注重细节和体验现实而言是一个比较落后和不够完善的流程，而现如今的比较规范和被广泛采用的项目流程应该是如下图这个样子的。

Web前端开发的一般项目流程

相关日志

• PPT分享：CSS继承之详解
• 20个免费的高品质XHTML/CSS模板下载
• 对立统一视角下的设计与前端
• Notepad++配合QuickText打造快速高效的文本编辑器
• PPT分享：高效、可维护、组件化的CSS
• Web前端开发在企业中的发展
• Web前端开发的职责是什么？
• Web前端都有些什么职位？

分类：Web前端 | 发布日期：2009-08-17 | 没有评论 | 标签：Web前端

前端开发工程师（或者说“网页制作”、“网页制作工程师”、“前端制作工程师”、“网站重构工程师”），这样的一个职位的主要职责是与交互设计师、视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。

资深前端开发工程师，从称谓上就可以看出，其相比较“前端开发工程师”而言，更加资深一些，当然其工作的职责也会相应的更加大一些。一般而言，资深前端开发工程师需要使用JavaScript或者ActionScript来编写和封装具有良好性能的前端交互组件，同时还要对Web项目的前端实现方案提供专业指导和监督并在日常工作之中对新人及相关开发人员进行前端技能的培训和指导。另外，还要跟踪研究前端技术，设计并实施全网前端优化。

资深前端开发工程师都有这样高的职责要求了，前端架构师跟其相比肯定有更高的职责要求，那么前端架构师的职责是什么呢？前端架构师更多意义上说像是一个管理的岗位，但是其职责要求却不仅只是管理。前端架构师需要带领组员实现全网的前端框架和优化，还要创建前端的相应标准和规范，并通过孜孜不倦的布道来完善并推广和应用自己的标准和框架。同时，还要站在全局的角色为整个网站的信息架构和技术选型提供专业意见和方案。

相关日志

• PPT分享：CSS继承之详解
• 20个免费的高品质XHTML/CSS模板下载
• 对立统一视角下的设计与前端
• Notepad++配合QuickText打造快速高效的文本编辑器
• PPT分享：高效、可维护、组件化的CSS
• Web前端开发在企业中的发展
• Web前端开发的一般项目流程
• Web前端都有些什么职位？

分类：Web前端 | 发布日期：2009-08-16 | 1条评论 | 标签：Web前端

我们先从几个人的小作坊说起，这种小作坊里面，基本上有一个人负责页面的设计，然后把页面“切”出来，然后有一个专门的人负责套程序。在这样的公司里面，Web前端其实是由网页设计人员来兼作的，而这个职位一般叫做网页设计师或者叫做网站美工。

随着公司规模的扩大，在达到十人以上到三十人左右的时候，网站一般会设置一个设计组，而这个组里面一般要分出一个人来专职做Web前端的页面制作，而不再是由美工兼任。而这样的职位一般叫做网页制作，说好听一些可以叫做“网页制作工程师”。不过在公司的一般泛称则是诸如“制作”、“切页面的”、“页面仔”等。

公司继续壮大，发展到上百人的时候，网站一般来说也会越来越重视用户体验等细节，这个时候，大公司的一般做法是成立一个由设计人员和Web前端人员组成的用户体验部门，这个部门一般来说应该叫做UED（腾讯的叫ISD），而Web前端也在这个部门之中。规模较小的UED中的Web前端团队一般叫做网页制作组或者Web前端组，这个组主要是负责Web页面的制作的，也就是Web页面中的HTML和CSS的相关工作，相应的职位则叫做“网页制作工程师”或者“Web前端制作工程师”。腾讯的Web前端设置比较特殊，他们的规模较大，不叫UED，而是叫做ISD，他们的分工一般来说也是只负责Web页面的HTML和CSS部分，可能也包含少部分的JavaScript代码，而他们的这个职位叫做“Web重构工程师”。

而类似淘宝UED这种比较大的UED团队，其Web前端人员的职责范围也更大一些，他们的Web前端人员不仅要做HTML和CSS，还要做全部的JavaScript或者ActionScript，并且进一步扩展到Ajax甚至PHP等脚本语言的范围，而其相关的职位则主要分为“前端开发工程师”、“资深前端开发工程师”以及“前端架构师”。

概括来说，Web前端的相关职位名称主要有：“网页制作”、“网页制作工程师”、“前端制作工程师”、“网站重构工程师”、“前端开发工程师”、“资深前端开发工程师”以及“前端架构师”。

相关日志

• PPT分享：CSS继承之详解
• 20个免费的高品质XHTML/CSS模板下载
• 对立统一视角下的设计与前端
• Notepad++配合QuickText打造快速高效的文本编辑器
• PPT分享：高效、可维护、组件化的CSS
• Web前端开发在企业中的发展
• Web前端开发的一般项目流程
• Web前端开发的职责是什么？

分类：Web前端 | 发布日期：2009-08-15 | 2 条评论 | 标签：Web前端