aw's blog 姿态永恒 » 关于tes的文章 http://www.awflasher.com/blog 分享互联网, 分享人生 Sun, 29 Jan 2012 11:57:03 +0000 en hourly 1 http://wordpress.org/?v=3.3 一行代码给你的Blog添加下雪效果 http://www.awflasher.com/blog/archives/1616 http://www.awflasher.com/blog/archives/1616#comments Sat, 13 Dec 2008 23:45:00 +0000 aw http://www.awflasher.com/blog/archives/1616 前段时间冷空气突袭的时候，据说郊区密云的雪积得挺厚，但北京城内除了飘了一点小雪粒，毫无动静。应该是气温过高所致，我在慈云寺桥附近拍下的照片可以很好的解释这一点。

不过最近WordPress.com倒是提供了一种让你在Blog下雪的方法（原作者是Scott Schiller），只需要将这行代码加在你Blog的任何位置即可，不需要额外的负担：不用自己维护图片和JavaScript文件（WP.com会帮你出带宽费用，哈哈~）

注意：如果你的Blog不支持JavaScript，则无法使用这一效果，抱歉。

引用代码如下：

<script src="http://s1.wordpress.com/wp-content/plugins/snow/snowstorm.js"
type="text/javascript"></script>

如果希望拥有像我的Blog这样的效果，即让雪停留在某一固定高度，例如我现在将雪停留在导航栏上，只需要引用我修改后的js即可。为了不影响加载速度，放到</body>前面即可。

所有TES主题用户都可以直接使用这个代码：

<script type="text/javascript" >
var aw_snow_jssrc = '%3Cscript type="text/javascript"';
aw_snow_jssrc += 'src="http://vosforever.app';
aw_snow_jssrc += 'spot.com/static/snow.js"%3E%3C/script%3E';
document.write(unescape(aw_snow_jssrc));
</script>

其它主题用户，如果希望改变雪落下的位置，可以使用这个代码：

<script type="text/javascript" >
var customizedHeight = 0;
var aw_snow_jssrc = '%3Cscript type="text/javascript"';
aw_snow_jssrc += 'src="http://vosforever.app';
aw_snow_jssrc += 'spot.com/static/snow.js"%3E%3C/script%3E';
document.write(unescape(aw_snow_jssrc));
</script>

同时，你可以根据你的页面导航情况自己定义customizedHeight的值，单位为像素，代表雪停留的位置与页面头部的距离。如果设为0，则落下的雪花会停留在页面最底部。

61条评论, 立即发言 | 本文关键词: , , , , ,

©aw's blog 姿态永恒 1984-2008 | 链接地址 - http://www.awflasher.com/blog/archives/1616

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo

]]> http://www.awflasher.com/blog/archives/1616/feed 61 给页面加上Loading效果最简单实用的办法 http://www.awflasher.com/blog/archives/1589 http://www.awflasher.com/blog/archives/1589#comments Thu, 20 Nov 2008 09:24:00 +0000 aw http://www.awflasher.com/blog/archives/1589 虽然现在的GMail已经看不到这个效果，但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress主题TES中：

其实我的方法非常简单，也可以说没什么技术含量，甚至还不支持IE6，但据我长期的观察，确实非常实用的。Analytics的统计数据表明，加入了这一效果之后，用户的“平均停留时间”的确有所提高。可见，一个“正在加载”让许多用户都有更多的耐心等待，而不会因为屏幕空白太久而不耐烦地离开。

最近，又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下：

首先，在页面的最上部输出一个Loading文字，比如“正在加载”，用div标签包含，并给它一个id，比如loading：

<body>
  <div id='loading'>正在加载</div>

你可以直接放到页面的<body>标签后面，亦可以用script.write输出（如果你有SEO洁癖的话）

然后，在你的样式表中，对这个loading设定一个简单的样式：

#loading{z-index:1;padding:5px 0 5px 9px;
background:#c44;left:0;top:0;width:90px;
color:#fff;position:fixed}

接下来，在你<body>标签闭合之前，将这个loading隐藏掉就可以了。最简单的方法是输出一段<style>标记：

  <script>document.write('<style>#loading{display:none}<\/style>');</script>
</body>

如果你有jQuery之类的JavaScript库，就更方便了，例如jQuery可以使用：

  <script>$('#loading').hide()</script></body>

这样，当页面完全加载完毕之后，loading就隐掉了。

对于WordPress博客，如果你对页面代码没有太苛刻的洁癖，我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端，你的“Loading”会飞快地出现，用户会觉得你的服务器响应非常迅速。然而，如果你从各种不同的域名下先加载几百kb的JavaScript库，估计用户在你的“Loading”出现之前就已经关闭页面了。

最后，希望这个老土的技巧能帮到你：）

84条评论, 立即发言 | 本文关键词: , , , ,

©aw's blog 姿态永恒 1984-2008 | 链接地址 - http://www.awflasher.com/blog/archives/1589

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo

]]> http://www.awflasher.com/blog/archives/1589/feed 84 原创WordPress主题TES 1.5发布 http://www.awflasher.com/blog/archives/1061 http://www.awflasher.com/blog/archives/1061#comments Mon, 13 Oct 2008 08:22:00 +0000 aw http://www.awflasher.com/blog/archives/1061 【通知 – 11月15日更新】

这次更新更改了中文版TES在IE下评论可能出现空白区域的bug，并且取消了BTC插件的依赖（目前只需要安装这款主题就可以了，您不需要再安装任何其他插件，当然，如果您激活了BTC插件，请将它去掉并删除）赶紧去下载地址下载最新的发布版吧：）

这么做的好处主要是为了让TES更加独立（不依赖其他插件），为大家日后的更新提供便利。

【简介】

TES是一款WordPress皮肤，以突出优雅内容呈现和改善阅读、评论、互动体验为初衷而设计。最新版为1.5，发布于2008年10月13日。下载地址（Intro in English）。

TES不兼容严格的W3C XHTML标准（未来会考虑）、TES不适合用于构建以SEO为主要需求的站点。

TES官方站点：中文 | English

【使用说明】

点击进入上述的下载地址之后，将tes-cn-release.zip这个文件放到/wp-content/themes/目录下直接解压；再将briansthreadedcomments.zip放到/wp-content/plugins/下直接解压。进入管理界面，激活这款“Brian’s Threaded Comments for TES”插件：这是一个TES必备的插件，它可以让你的评论系统支持针对性回复，提高评论系统的互动性。之后，激活这款主题即可。

【特色】

结合我一年多在Google Analytics上观察到的用户行为分析，以及读者、圈内朋友们的热心帮助，TES发展到了1.5版。现简单说一下TES的一些基本特色：

  1. 引入导航栏
    一直一来我都把更多的精力放在了评论系统的改进和JavaScript代码的精简，对于导航栏我并没有给予足够的重视。直到9月开始用Analytics进行用户行为的详细调研时，才发现导航的重要性。通过我自己Blog的统计数据证明，使用导航栏提高了30%的平均PV
     
  2. 增加“正在加载”（loading）效果
    这个效果之前仅用在我自己的博客。经过在Analytics的统计分析，发现将笨重的jQuery库移动到这个loading效果之后能极大地降低用户弹出率，改善博客的“页面平均停留时间”。于是在1.5版，也为TES皮肤引入了这个功能
     
  3. 改善配色和背景图片
    感谢HelloWiki同学的帮助。以“侧边栏标题”和“评论模块标题”为例，截图如下：
     
  4. 支持Gravatar和Widget两款插件
    Gravatar和Widget作为WordPress官方推崇的插件，在改进博客体验方面有着极其重要的作用。TES对这两样功能都良好支持。

【未来发展】

TES未来的重点仍然在评论系统的改造，目前在我自己的博客上有一个简单的AJAX评论提交演示和滑动效果。但由于WordPress2.7会引入嵌套式评论，因此会放在下一个版本（TES 2.0）发布。同时也会将我对WordPress PageNavi的样式修改整合进来。

相对地，TES更适合于那些评论量大、忠实读者群丰富的博客。也欢迎有相应需求的非盈利博客加入到TES这个项目中来。我会选择2到3个高质量博客无偿提供优化，因为这样我也能从更多的渠道得到用户体验、用户行为的反馈，来进一步完善细节。

在Automattic的项目中，我意识到团队协作的重大意义。如果有WordPress爱好者愿意加入TES的开发，我十分欢迎。目前TES也已经hosting在Google Code，支持SVN：）

【问题求助】

如果有任何问题，请及时联络我：

【发布历史】

以下为TES发布历史存档（未整理）

1.41发布 – 2008年7月25日

修正了多处Bug，增加了Gravatar支持。

1.3发布 – 2008年6月14日

到这个地址下载中文版、英文版和一条必备的评论插件。详细的更新内容我稍后公布。目前，中文版在SVN的trunk中已经基本完成了翻译，可以在刚才那个地址的trunk中找到。非常抱歉，没有时间发布好的zip包。此外，需要安装那个BTC的评论插件才可以，注意，有一些用户安装之后出现问题，一定要在设置面板中设置一下这个插件才可以。（自己找一找不是很困难）

1.2发布 – 2008年6月12日

 

在WordPress的讨论组、QQ群，甚至网志年会上，都有朋友问到我何时才能发布中文版的TES主题；同时，我也看到越来越多的朋友在使用这款主题，甚至有一些来自中东、南美的国家的朋友在使用，这让我兴奋之余，颇感惊奇。

请放心，我是一个非常讨厌食言的人。我会在将来发布这款TES，但也请原谅我的确无法保证发布时间。我能保证的并非三下五除二搞顶一个版本然后拼命的推广，这样做也许会骤然显得很有人气，但久而久之，一些“将就应付”的问题就会逐渐暴露，到时候肯定会给广大用户带来麻烦。

至于具体原因，仍然是DOM和CSS，由于我自己的DOM和CSS经过多次反复修改，肯定是不合适发布的，因为一个非常混乱的代码你拿到之后是完全无法维护的。现在下面发布的这个版本是纯英文的，主要是为了IfGoGo.com计划，我精简了几乎所有的代码。而中文版，我为了能升级到2.3，会改出全新的发布版，拥有良好的DOM和CSS，并附上自定义修改手册（这也是我和其他主题相比的优势）。

补充一下，TES是完全免费的，这个发行版下面有加三个非盈利网站（我的blog、IfGoGo英文Blog和AS3技术Blog）的链接，希望您支持这三个网站。谢谢：）恩，请相信以上的承诺，只要我还活着。

1.0发布 – 2007年9月

The Enhancing Spring，这个名字其实只是随便想到的。只是比较喜欢“Enhance”一词，没有任何意义。而Spring，则是因为我在春天制作这个“皮肤”。当然，很遗憾，到秋天才发布出来。因为从春至秋，我就几乎没有闲过。这半年来，领教了央视的严谨和湖南卫视的高节奏，我想对公司来说也是非常好的历练。

其特点是：

  1. 支持Widgets （对于WordPress2.2之后的版本尤为重要）
  2. 自适应双栏布局 （不同的分辨率都能优雅地显示）
  3. 等高布局
  4. 搜索引擎友好
  5. 轻量简洁

272条评论, 立即发言 | 本文关键词: , , , ,

©aw's blog 姿态永恒 1984-2008 | 链接地址 - http://www.awflasher.com/blog/archives/1061

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo

]]> http://www.awflasher.com/blog/archives/1061/feed 272