axuan

5key

中国 . 杭州

服务器风波

01月 7th, 2009 5key Posted in 博客技巧 Tags: 63 views 7 Comments »

mt

12月31日 16:00
博客和其他几个站点均无法访问,经查发现服务器已被下架…

12月31日 19:00
确定服务器暂时无法恢复,我赶紧的跑去MT买了个95美元的套餐…

12月31日 20:00
收到Email,我欣喜的开通了主机。nnd,我也用上MT了…
赶紧上传备份文件,可FTP始终连不上….
Ping IP,不通。难道…
访问赠送的域名,打不开。难道….
小心的翻墙,打开了!我傻了,难道IP被亲爱的GFW给闭了?赶紧查了一下IP下的其他域名。列表中出现了Livid的v2ex.com…
这个IP算是没救了。

12月31日20:30
赶紧Mail客服,3小时得到回复“请联系所在的ISP服务商解除对此IP的屏蔽”。让我去找GFW解决问题?搞笑!接下来的时间,跟客服Mail来Mail去,最后告诉我,“09年对中国用户改变政策,不保证网站在中国地区可见”。

经过多封邮件交涉,我只有选择退款。事情发展到现在,我已经经过了一系列的操作和邮件确认。客服的邮件已经已平均3小时回复变成了平均一天才回复。目前我还在等待客服将我的退款申请提交给更高一级的管理人员审核。通过后我需要再等待2~4周的时间拿到退款……

不多说了,现在总算是取回了部分数据,搞定了新的服务器。有些旧的文章被重新输出可能RSS打扰到大家。抱歉了!

Firefox博客评论插件 EasyComment

12月 22nd, 2008 5key Posted in wordpress Tags: , 22 views 发表评论 »

在lostintechnology上看到一个关于博客评论的FF插件。对于像我这种喜欢在各个博客上留言的同学来说是个不错的东东,特别是在一些新发现的博客上,省去了填写邮箱、网站等信息的麻烦。

安装地址:https://addons.mozilla.org/en-US/firefox/addon/9095
因为还在测试阶段,安装需要注册登陆。

EasyComment设置
设置很简单,填好用户名、邮箱、博客地址就OK了。

easycomment
OK,打开博客试试,点击浏览器下方黄色的easycomment。他会自动帮你将光标定位到评论的输入框。

PS. EasyComment还可以将评论的内容都设定好。这样的话spammer估计要偷乐了。打算用来做Spam的先b4一下。

香港印象-迪斯尼

12月 21st, 2008 5key Posted in 生活点滴 Tags: , 10 views 发表评论 »

首先拜一下俺LP。这次从在香港的酒店、迪斯尼门票到香港机场到深圳机场的巴士票、机票。全是在淘宝上搞定。不愧是淘宝的忠实员工加粉丝啊。而事实也证明,正是因为LP的英明,得以保证我们行程的顺利。

上周借着在深圳调研用户的机会,和LP去了一趟香港。星期五LP到深圳,星期六一大早就直奔迪斯尼了。虽然我们一直计划着去迪斯尼,但没想到就这么着最终成行了,真是计划赶不上变化啊。

可能去之前对迪斯尼抱有过高的期望,所以最后觉得并不是那么的好玩。最后为了去东涌shopping,两点多就闪人了。错过了迪斯尼卡通人物的集体 巡游和晚上的烟火晚会。网上人称非常好玩并玩了5次的小熊维尼的奇妙之旅我俩都觉得挺没意思的。唯独那个星际之旅还不错。虽然就是普通的过山车,但是再一 个完全封闭的黑暗空间里,前面会怎么你完全不知道。还是很刺激的。

香港的迪士尼建在大屿山,我们住旺角,到迪斯尼需要在太子乘荃湾线到荔景,转乘东涌线到欣澳,然后就有迪斯尼专列直达了。香港的地铁和上海的差不多,还是比较容易认的。

迪斯尼专列
迪斯尼专列,从东涌直达迪士尼

迪斯尼大门
迪斯尼大门

入门的城堡
入门的城堡

与松鼠合影
忘记是哪部动画片里的了,游客在排队与卡通形象合影

城堡
城堡

小熊维尼的奇妙之旅
小熊维尼的奇妙之旅

旋转木马
旋转木马估计每个女生都喜欢,不然也不会排这么多的人。

米老鼠与唐老鸭的音乐之旅
米老鼠与唐老鸭的音乐之旅,这个强烈建议。其实就是3D电影,但是配合着影片中的情景剧院会起风和滴雨,还是蛮有意思的。

纪念品商店
迪斯尼每个项目玩完以后的出口都是一个纪念品零售店,乘着刚才的兴致,购买的几率还是蛮高的。一个公仔60港币左右。不算太贵。

相框
米老鼠相框,挺漂亮,100港币吧,貌似。。。

相框
一样,也是100港币左右

午餐
说到这个,再次佩服一下LP。这个也是在淘宝上买的,比里面便宜很多。迪斯尼里水最贵,一瓶矿泉水20港币

美国小镇
美国小镇

各位同学,我突然想起来周报还没写。汗~先到这吧。

页面头部最后加载

11月 27th, 2008 5key Posted in web开发 Tags: 9 views 发表评论 »

昨天在回答水煮鱼的提升博客的用户体验的文章中提到关于将头部文件放到页面最后加载。今天就收到好几个朋友的Mail询问具体的做法。想想还是写一篇文章详细介绍一下。

为什么要将页面头部放到最后加载呢?

  1. 相信大家现在都已经知道,为了尽快的显示页面,我们提倡将页面上调用的JS放到页面最下方加载。但有些同学喜欢在头部里加入一些服务的JS。例如大家在浏览我的博客的时候就能感觉到,由于头部的那段Friendfeed的JS,其实页面加载还是挺慢的。
  2. 很多同学,特别是站长。都希望通过优化代码提高seo的效果。比如文章的详细页面,我们希望搜索引擎能最快的独到我的文章标题“页面头部最后加载 ”。可往往我们的头部文件就噼里啪啦的占去了好几十行的代码。而这个头部也并非当前读者最关注的东西。将头部文件放到页面最后加载既能提高页面显示速度, 还能保证seo的效果。

说了这么多,具体该如何操作呢?

  1. 首先,建议大家对html/Css有一定的了解,这样会利用在对自己的网站进行改造。
    先来看个例子
  2. 可以看到,我在头部加入了Google Reader的分享。通过Yslow,可以发现,这段JS加载平均需要2.3秒的样子。如果是将Header、Content、Footer顺着显示,代 码跑到Header这块就会卡个2秒的样子。而我们将头部放到底部加载后,基本上不会影响到对此文字的浏览。

再来看看代码:

  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
  2. <HTML>
  3. <HEAD>
  4. <TITLE>Load header</TITLE>
  5. <style>
  6. body{margin:10px;}
  7. .header{width:960px; height:100px; background:#eee; margin:10px 0 0 0; padding:10px; position:absolute; top:0;}
  8. .content{width:960px; height:500px; background:#ddd; margin:140px 0 10px 0; padding:10px;}
  9. .footer{width:960px; height:80px; background:#ccc; padding:10px;}
  10. </style>
  11. </HEAD>
  12. <BODY>
  13. <div class=”content”>Content</div>
  14. <div class=”footer”>Footer</div>
  15. <div class=”header”>
  16. <script type=”text/javascript” src=”https://www.google.com/reader/ui/publisher-zh_CN.js”></script>
  17. <script type=”text/javascript” src=”https://www.google.com/reader/public/javascript/user/17211588720371169080/state/com.google/broadcast?n=1&callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%225key%20%5Cu7684%5Cu5171%5Cu4EAB%5Cu9879%5Cu76EE%22%2Cs%3A%22false%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC”></script>
  18. </div>
  19. </BODY>
  20. </HTML>

明白了吧,将Header通过css绝对定位到顶部。其实是很简单的。可是我很懒,一直没给自己改改。-_-~~
OK,有问题给我留言:)

BlueTripCss

11月 17th, 2008 5key Posted in web开发 Tags: 4 views 发表评论 »

BlueTrip是一款类似960、Blueprint、YAML的950PX 24-column grid的Css Framework。比较特别的是BlueTrip对网站中Button、Link、Tips等做了一些比较2的定义。

预览地址:http://5key.net/down/bluetrip/examples/index.html

Features List:

  1. 24-column grid
  2. Sensible typography styles
  3. Clean form styles
  4. A print stylesheet
  5. An empty starter stylesheet
  6. Sexy buttons
  7. Status message styles

官方站点下载:
http://bluetrip.org/

WordPress官方站点主题

11月 5th, 2008 5key Posted in wordpress Tags: , 5 views 发表评论 »

【简介】
由于个人比较喜欢Wordpress官方站点的样式,前段时间花了点时间自己移植到了WP的主题。最近不少朋友问我要此套皮肤。于是稍微整理了一下放出来。

【主题说明】
一、此款主题是基于WP2.6版本上制作的,使用WP2.6的原生Tag系统。低于2.6版本的同学不建议使用此主题,以免出现报错;

二、现有主题中调用了一些插件,如安装主题后页面出现报错,请安装相应主题或删除插件调用代码;

  1. 中文 WordPress 工具箱
  2. WP-PostViews
  3. WordPress Related Posts

【使用主题】
一、下载主题包:
下载地址:http://5key.net/down/5key_v4.rar

二、安装主题:
解压缩主题包并复制到/wp-content/themes/目录下,然后到后台启用主题即可

三、文件修改:

  1. header.php
    主要一个就是对Friendfeed最近信息的调用,具体的js在Friendfeed设置中可以找到。其他的一些个人信息请自行修改替换。
  2. single.php
    删除了现有模板中的广告模块,需要可自行添加。

四、主题截图

好的注册流程应该要“低调”

10月 13th, 2008 5key Posted in 网站体验 Tags: , , 11 views 发表评论 »

这个季度开始,我的工作重心转到了Post线。如何让更多用户发布更多的产品则成为了我最关注的地方。和大多数网站一样,阿里巴巴需要先注册才能进行发布的操作。由于商业上的需求,用户在注册发布产品的时候需要填写两张表单,一大堆的字段。着实很麻烦。

“拜托,我只是一个普通的用户,我只想在阿里巴巴上发布一条供应信息。我不想填写又臭又长的表单。”我始终感觉到用户都在电脑前抱怨着。我们在网站很多地方都放置了发布产品的入口,用户刚刚有兴趣想发一个试试就给注册/登陆给打断。用户很不爽,后果很严重!

大多数网站都是先注册或登陆再发布产品,而恰恰是这个流程将一些意愿度并不是那么高的用户给挡在了门外。当然,还是有一些网站将注册流程做得很“低调”,尽量让用户忘记他的存在。例如ioffer.com,一家美国的C2C网站。点击页面上方的“sell”,用户直接来到产品的发布表单,完成产品发布预览的同时,提示用户注册或登陆来确认产品的发布。用户完成了来网站的主要目的-发布产品。注册流程也就不那么惹人讨厌了。

说到注册的流程,想起前两天同事Jerry分享的一个基于家族族谱的SNS网站,geni.com。这家网站的注册流程可谓是相当的“低调”,你几乎感觉不到他的存在。在完成创建自己族谱的同时,无形中已经注册成功。唯一有点不好的地方就是并没有提醒用户初始密码是发送到邮箱里的。

用户来使用一个网站,那一定是为其中的某个功能,而不是为了来注册。好的注册流程应该“低调”,不应该过于干扰到用户的使用。阿里巴巴需要改进的还很多。

十月 杭州 D4&UCDCN 设计师交流会

10月 7th, 2008 5key Posted in 网站体验 Tags: , 3 views 发表评论 »

D4设计论坛

D4是由阿里巴巴集团各子公司UED部门联合发起的视觉/交互设计论坛。D4面向所有交互、视觉设计师和对设计感兴趣的人,旨在促进行业内设计师们之间的学习和交流,提高水平、加深合作。
时间:2008年10月18日(周六) 下午13:45开始
地点:杭州市文二路391号西湖国际科技大厦
活动网站:http://www.d4forum.org
报名及查看更多内容,请前往D4设计论坛官方网站
AD:我将在下午第二会场分享关于《创新的交互设计师》的主题。

U客会.杭州交流会

U客会,是一个线下交流会。以“应用”为导向,交流在应用中的产品设计问题。
开始时间: 10月11日 周六 14:00
地点: 杭州,文二路285号枫华府第  4幢1单元1101
讨论主题: 音乐社区的产品设计
分享人: 虾米网 稻草
报名及查看更多内容,请前往UCDCN
BTW:关注Web2.0产品设计的朋友可以来这里沟通讨论。

调整浏览器窗口分辨率的三个小插件

09月 19th, 2008 5key Posted in web开发 Tags: , , 4 views 发表评论 »

目前我们阿里巴巴的用户使用最多的分辨率还是在1024*768。所以大部分的设计,我们需要考虑用户在第一频能看到什么。为了方便在不同分辨率间切换,浏览器的小插件必不可少。在这里与分享一下我正在使用的三个不同浏览器下的插件。

Firefox下的Window Resizer 1.0
因为我用firefox,所以这个插件用的比较多,支持640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200等分辨率
插件地址:点击安装
firefox

IE浏览器下的Internet Explorer Developer Toolbar
微软发布的IE调试工具,同时也可以调整浏览器窗口大小。支持800×600, 1024×768, 1280×800, 1280×1024,还支持用户自定义宽度和高度。
插件地址:点击下载
ie

Maxthon浏览器下的ResizeWindow v0.3.0
遨游下的插件,支持640×480,800×600,1024×768,1152×864,FullScreen
插件地址:点击安装
maxthon

wordpress主题推荐

07月 30th, 2008 5key Posted in wordpress Tags: 957 views 2 Comments »

来自chriscoyier的一款三栏主题。
personalhomepagetheme

预览地址:http://chriscoyier.net/
下载地址:http://css-tricks.com/examples/PersonalHomepageTheme.zip

 有兴趣的同学还可以看看制作教程:
Part One: Download, Install, “Reset” Theme
Video Page
Direct Video Download (.mov)
Article & Discussion

Part Two: Structure
Video Page
Direct Video Download (.mov)
Article & Discussion

Part 3: Finishing Touches, Extra Stuff
Video Page
Direct Video Download (.mov)
Article & Discussion