SoberMa

用上新版的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。国人的素质和浮躁啊，唉。。。

点击查看全文 »

让不懂代码的人也能方便地去格式化编辑文本，一直是开发者比较关注的事情。现在，我们很容易就能提供类似的功能。下面所列的10个所见即所得Web编辑器是非常常见的，也是值得你去关注的。说不定你的下个项目中就会有它们的身影。

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:原文链接

点击查看全文 »

既然好多人不愿意使用Web标准进行Web前端开发，那么基于Web标准的Web前端开发在中国又是一种怎样的现状呢？Web标准方式的Web前端开发在中国的市场前景又如何呢？下面，我们一起去了解和分析一下。

是否符合标准，谁说了算

既然想要了解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前端开发之路，我们任重而且道远，但是，我们在路上，我们在不断地求索……

点击查看全文 »