四月, 2009 的文章

根据Google Analysis数据改进网页 - 智取华容道自定义分类

youxi_hrd_list

发芽网装上Google Analytics好几个月了,也得到了一些有价值的数据

其中有一条然我忍了好久,今天终于忍不住终于采取行动了

那就是:最常见退出页

前十个最常见退出页里面,华容道第1关排第3,华容道第2关排第9!

这个问题其实艾恩黄志华kk華英雄等网友都提出过,那就是智取华容道前几关太难了!难到让人望而却步,试验几分钟搞不定多数都失去了兴趣。

以前首页上默认放的是横刀立马,之所以这么做是因为这一局太有名了,甚至有人不知道华容道游戏还有其他开局。

解决的方法很简单,把华容道开局按照由易到难建立一个分类,然后把这个分类放到主页就行了

但是,对于发芽网来说,却不是很好改,分类建起来很简单,但是要建立一个机制,对于数独华容道、或者其他还没有写好的游戏统一处理,就比较麻烦。

今天正好有一大票时间,所以进行了一番清理,终于搞定。

现在首页上的链接是:开始玩《从菜鸟到高手》分类之曹13,从13步到138步,一点点加大难度。

其他分类有:经典开局数字系列伏羲八卦定式

等再找到空闲,就把提交华容道布局的用户名称都加上去

更新:2009-04-27 00:37
已经为华容道布局加上了创建者属性
部分布局提供者:kk, ythqy, 艾恩, 黄志华, 崋英雄, admin

  • Share/Bookmark

游戏发芽网的随机关卡链接 - 数独、华容道统一实现

=====================================
插播一则广告:几个网友反馈,说不知道发芽网的Roadmap(大致是开发计划的意思吧)
 我想做个子站的,专门为小网站提供Roadmap服务,呵呵,不过想想还不太现实
 那就简单点儿,先放在这儿了:发芽网的Roadmap
=====================================
一直以来都想加这个功能:随机来一关华容道或者数独

总感觉功能太小,加起来没意义

今天翻旧账找到了,就写了一段代码加上来了,可以试试:
随机来一关华容道
随机来一关数独

Django的url mapping做得很棒,所以处理起来很方便:

Python语言: 游戏发芽网的随机关卡链接
#in youxi.urls.py
#…
    #random gate
    (r'^(?P<gameabbr>[a-z]+)/rand/$',
        'fayaa.youxi.views.index.random_gate'),
#…

#in youxi.views.index.py
def random_gate(request, gameabbr):
    game = Game.objects.get(abbr=gameabbr)
    import sys
    gatename = game.abbr[0].upper() + game.abbr[1:] + "Gate"
    mods = sys.modules['fayaa.youxi.models']
    gates = getattr(mods, gatename).objects
    gate_count = gates.count()
    import random
    chance = 10
    while chance:
        chance -= 1
        #NOTICE: we will lose some record if some are empty
        # because that time gate_count != max_id
        gate_id = random.randint(0, gate_count - 1)
        if gates.filter(id=gate_id).count():
            return HttpResponseRedirect("/youxi/" + gameabbr + "/" + str(gate_id) + "/")
    return HttpResponseRedirect(".")

  • Share/Bookmark

Google搜索结果里的链接打开有点儿慢?用YesScript扩展吧

Google搜索结果里面的每个链接看上去都是直接链接到网站
原来我就怀疑:这样的话Google怎么统计用户点击数据呢?

后来有个事情促使我去探索到底是什么原因:
在家里用Google太慢了,而且因为GFW的原因,有时候会挂,一挂了以后短时间内哪个Google结果链接都打不开

实际上,每个搜索的结构链接<a>里面都有一段脚本:

<a onmousedown=
"return rwt(this,'',”,’res’,'5′,’AFQjCNG1aS0e_ZXWJweG5uZk8bMmDIov3g’,'&amp;sig2=ZybsjNXV2WabD4U0uu8XDA’)" />

当你点击链接的时候,这段脚本就会更新这个链接

你可以在Firefox下试试搜索Test
然后:
1. 把鼠标移动到一个链接上,看看Firefox左下角的状态栏,里面的链接是啥
2. 然后按住鼠标左键(注意是“按住”,先不要松开),再看看状态栏的连接

知道这个,解决起来就简单了 - 给Firefox安装NoScript或者YesScript扩展就行了
NoScript默认不允许Javascript、然后用白名单来控制。YesScript默认允许、然后用黑名单控制。

我喜欢第二个,因为阮一峰的blog“关于网页设计的一些统计数字”里面说到:84.8%的网页使用Javascript
而且,发芽网本身就离不开Javascript,我更不喜欢用NoScript啦

于是安装了YesScript,然后Google搜索以后在打开右下角BlackListed图标点一下,以后Google搜索打开就不会经过Google服务器绕一次啦。

  • Share/Bookmark

发芽网界面更新 - 圆角、阴影、聊天窗口、HTML标准

在线数独游戏上线以后,搜索了一下信箱里面关于发芽网界面的抱怨,居然快有一屏了 - 里面有一半是我自己提的
:D

呵呵终于有时间清理一下,心里很是爽啊。
列一下最近做的界面更新:HTML标准化、聊天窗口更清楚、给整站加上了阴影、给某些框框加上了圆角

首先是HTML标准化
以前一直觉得好几个页面有问题,不是firefox下怪异,就是IE下异怪,总之,不正常
问题在于,刷新一下可能就好了,或者浏览器换个版本,也会消失不见,但是有时候又会跳出来,烦!
直到有位朋友反馈说代码发芽网生成的html代码通不过W3C的验证,我才意识到可能是这个问题
于是乎安装了Firefox的HTML Validator扩展,一个个的检查页面,发现了一坨坨的html tag混乱的问题。
修正这些问题以后,现在大多数页面都能通过W3C的验证了,那些诡异的问题也就消失不见了。

然后是圆角
很多网站都是搞的圆角矩形,看起来比较可爱+顺眼,不知道跟iPhone流行有没有关系
我在网上搜索了好多个圆角矩形的实现方案,发现都不是非常好
直到后来看到Stackoverflow上面的几篇讨论,才豁然开朗:
css div rounded corner
how to make a cross browser w3c valid semantic non javascript round corner
里面有个家伙的观点深得我心:

我不是一个疯狂的display-hack爱好者,所以我用css3
IE7以下的那些浏览器不是圆角,那就不是圆角吧,只要看起来还行,我不在乎

然后我就采用了这个页面上提供的方法:

* -moz-border-radius-topleft / -webkit-border-top-left-radius
* -moz-border-radius-topright / -webkit-border-top-right-radius
* -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
* -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
* -moz-border-radius: 5px;
* -webkit-border-radius: 5px;

然后无视IE7以下的存在 - IE8下显示是没有问题的。

然后我稍微配置了一下颜色,用在了聊天窗口上:(左边是以前的,右边是更改之后的)
聊天窗口 => talk_new

然后是阴影
嗯,这个简单,我加了两个div就搞定了,这样页面边缘和底端就有了3D阴影,不多说,上图
3D阴影

顺便说一下导航
游戏发芽网的顶端实现了一个导航条“您的位置”,尝试一下看看有没有帮助
top_navi_bar

发芽网的首页我也改了
依然保持以前的风格 - 你猜对了,就是土
fayaa_home

BTW:
有很多网友在各个反馈页面提出了很不错的建议,但是多数都没有完成,主要是因为时间的原因
业余时间写网站,虽然自己很有兴趣,也够累的,网页上没有编程模式,都是细节,无比琐碎的细节

BTW#2:
另外就是加上了友情链接页面

BTW#3:
把jQuery UI删了,自己手写了两句用来做Tab,居然超简单。
另外,jQuery在Stackoverflow上更受推崇,下面两个链接里面有详细的讨论:
为什么那么少人用prototype?
哪个javascript库最好?

OK啦,那么,下一步想做什么
o. OpenID支持
o. 代码底端显示Trackback/Pingback/Referrer
o. Feedback提供回复通知功能,注册用户不显IP
o. 写一坨blog,草稿箱里快攒了30多篇了

  • Share/Bookmark

游戏发芽网在线聊天 - XSS攻击 与 javascript标题栏闪烁

游戏发芽网的聊天功能用的人相对较少,但是我至少看到了10次以上有价值的讨论
当时怕聊天窗口太复杂,实现都用的很简单的方法,但是最近发现了两个问题。

第一个是:最近发现有位同学在玩华容道峰回路转搞不定的情况下,伪造了系统消息

>> 搞定 峰回路转 用了1步

呵呵这个本身并没有什么,开个玩笑,无伤大雅
而且聊天记录刷新很快,一个小时以后这条记录就会消失

但是,这解释了一个很严重的问题,那就是著名的XSS攻击

具体的说,在用ajax的方式收到消息以后,我用直接追加html的方式进行添加,没有进行escape。

严重的后果可能是用户密码丢失、页面混乱等等等等

关于详细的XSS攻击参见:
1. Google搜索跨站脚本攻击, 2. 也谈跨站脚本攻击与防御, 3. 詳解XSS攻擊

最常用的方法就是escapeHTML,不过这个常用的函数javascript居然没有自带,那就写一个吧:

JavaScript语言: Javascript string escapeHTML
//一个应该常用的javascript string函数,不知为何没有直接提供
String.prototype.escapeHTML = function () {                                       
  return this.replace(/&/g,'&amp;').replace(/>/g,'&gt;').replace(/</g,'&lt;').replace(/"/g,'&quot;');
};


第二个问题:聊天窗口不在最前的时候,来消息用户就看不见了
搜了一下,简单的解决方案就是标题栏闪烁
一开始想的方法是:当窗口blur的时候设置一个标记,focus的恢复标记,当收到消息又有标记的时候闪烁
但是没找到合适的方法
继续搜,发现StackOverfow有一篇文章专门说这个
使用的方法独辟蹊径:不管窗口有没有在最前,来消息都闪烁标题栏
不过当鼠标在窗口中移动的时候就停止闪烁,这样如果窗口在最前,闪烁就很快消失,否则只有切换过来才停止

呵呵,真是条条大路通罗马。

不过StackOverflow上面那份代码有问题:当有多个消息的时候,即便鼠标移动也不行了,因为创建了多个inteval。
我改进了一下,贴在下面:

JavaScript语言: Javascript - 后台窗口来消息时标题栏闪烁
//from: http://stackoverflow.com/questions/37122/make-browser-window-blink-in-task-bar
/*
this won't make the taskbar button flash in changing colours, but the title will blink on and off until they move the mouse. This should work cross platform, and even if they just have it in a different tab.
*/
function clear_blink(oldTitle) {
  clearInterval(g_timeout_id);
  g_timeout_id = null;
  document.title = oldTitle;
  document.onmousemove = null;
  document.onkeydown = null;
}
function blink_info(msg) {
  var oldTitle = document.title;
  if (typeof(g_timeout_id) != "undefined" && g_timeout_id) {
    clearInterval(g_timeout_id);
  }
  g_timeout_id = setInterval(function() {
      document.title = document.title == msg ? ' ' : msg;
    }, 500);
  document.onmousemove = function() { clear_blink(oldTitle); };
  document.onkeydown = function() { clear_blink(oldTitle); };
}

PS:心里惴惴,感觉还没有搞定的样子…
PS2: StackOverfow上面有很多好文章,以后有空转几篇

  • Share/Bookmark

下一页 »