关于本博客UI方面的一些思考

2010年12月26日 17:33

首先,很高兴Ubuntu新字体进入Google Font Directory(详细),Ubuntu这字体真的很漂亮,可以说是Ubuntu 10.10的最大亮点了。而这个字体进入Google Font Directory意味着我可以用云字体的方法使每一个进入本博客的观众都看到这个字体(还意味着可以从本博客中下载该字体),不管客户端本身是否真的装有这个字体。额..这字体在XP下好像有点糟糕,特别是没开ClearType的XP,全是锯齿。唉,这只能说XP本身的字体渲染太烂,我以前一度以为XP字体全是点阵字体呢,怎么看都感觉不像是TrueType!

我自认为本博客在非XP的PC上看起来还是不错的,符合我自己的审美观吧,但是在手机上却不是这么回事,我的手机是多普达S900,Windows Mobile 6.1操作系统,安装浏览器Opera Mini 5.1。

手机浏览本博客时存在两个严重的问题,第一,打开博客率先看到的是搜索框,分类等一点不重要的内容,而真正的主体部分却被挤到了下面(代码功能也有同样的问题,代码被行号挤到了下面)。这个问题不仅仅存在于手机,把PC的浏览器的宽度缩小到一定尺寸,也一样如此,有时候看上去右边一大块空白,还以为没有正常显示呢。事实上,很多博客都是这样,本博客并非特例,究其原因,是在写HTML的时候,边栏的DOM安排在前面并使用了float:left;导致。解决的方法很简单,把文章的DOM安排在前面,使用float:right;即可,或是干脆把边栏安排到右边去,这样浏览器宽度缩小时被挤下去的就是边栏了。很可惜,虽然知道解决方法却不能做这种修改,因为博客系统的HTML是定死的,不能改。当然,也可以考虑换个主题,有些主题的边栏是在右边的,不过我蛮喜欢现在这个主题,不想改。也可以考虑用Javascript来更换DOM的位置,但是我的Opera Mini几乎不支持Javascript,改了也没用。所以我干脆做了些小动作,上传了一个smallscreen.css的文件,记下他的路径,在博客的header里增加一个标签,这个标签能使得博客宽度在小于900px的时候使用smallscreen.css,反之则不使用(具体实现可见本博客HTML源码)。这个技巧是在看今年的Google IO大会时一个人在讲Dreamweaver对HTML5支持的时候学的,很有用,而且大部分浏览器支持,要想让网页对非PC平台做特别支持,用这招会非常imba。至于smallscreen.css的内容,其实就是把边栏隐藏了。额,我认为不太会有人在用手机浏览本博客的时候对搜索框和分类感兴趣吧。

另外一个严重的问题是,本博客的部分文章实在是太长了,比方说《HTML5设计原理》,用鼠标滚轮滚也可以滚好长时间,《从jQuery中剥离出$.ajax函数》,整整700行代码啊。在手机上,特别是在Opera Mini(没有滚动条)上看本博客的主页,简直是受罪,就为了瞥一眼下一篇文章的标题,不断的滚啊滚,茫茫多的字,根本看不到个尽头,嗯,用户确实可以考虑下是否该取消今天的晚餐了。把整篇文章不加限制的放在主页上,有方便之处,无需用户点击就能看完全文,但是如果文章实在太长,还是来点部分摘要吧。不过我看遍了博客系统的设置,也没能找到类似的设置。想通过smallscreen.css来解决吧,也想不到个好些的策略,没有CSS3,没有Javascript,没有滚动条,怎么才能缩减文章的长度呢,我也想不到了。

好久没更新博客了,不是偷懒,而是考试前期太忙了,什么作业都要开始交,上周末就完成了三门课的实验报告,还有一部分课要提前考试。比方说最无聊的文献检索。没办法进行新的学习。等考试结束后,大概就要全面攻RHCE了。

今天验收Windows大作业,这个程序让我花费了很多力气,但是验收时并不怎么顺利。虽然结构和类封装让老师对我的C++水平印象深刻,但是在一段动画上却出了问题,动画不够流畅。

这段动画是一个辅助型的效果,一个Google的Logo的移动动画,要有透明效果。这段动画我完全没有采用过去常用的动画在时间类回调函数里做法,而是把动画做在WM_PAINT里,时间类回调函数仅仅只是更新Logo的位置,并请求刷新界面。问题就出在这里,刷新信息是放在消息队列里的,程序必须接收到重绘消息才会绘图,如果重绘消息过多就不会多次重绘,而是只重绘一次就草草结束(有点掏浆糊)。显然13帧的重绘消息程序是不可能一一处理(虽然我的电脑性能较好,程序处理了大部分信息,如果没有经验,是断然看不出他的不流畅),因此跳帧就出现了。解决方法还是按照老路子走,直接在时间类回调函数内取得HDC,让他动,流畅性将大大提高。

另外,之所以有时界面会闪烁,根本原因是重绘前的一瞬间,界面这块区域被涂白了(通常是因为发送了EraseBackground消息或是BitBlt最后一个参数是WHITENESS),涂白后又立刻在上面绘图,Windows的图形速度并不是很快,这一瞬间还是能被人眼捕捉到,这样就看上去在闪烁。对此的解决方案是,如果是因为EraseBackground的话,请尽可能限制Invalidate系列函数的使用,即使要用,也要尽可能把他的最后一个参数设置为FALSE,如果图像较复杂就干脆用兼容DC做缓冲,使用兼容DC的话是永远没必要EraseBackground的。如果是因为BitBlt的话,那么就尽可能缩小WHITENESS的区域,不让其实就不需要WHITENESS的区域变成WHITENESS,这样闪烁基本上就可以抑制住。再次强调,闪烁不是因为过快频率的重绘,也不是因为过大范围的重绘,而是过多次的瞬间残留影像,一定要对症下药。

虽然验收不顺利,成绩仅仅是A-,但是能获取这么多经验,还是好的。本周五晚上还要在忙活一晚,把程序的这些问题全部去除,争取第二次验收得A。

twitter logo GDI绘制

2010年9月27日 07:09

这次的作业,用GDI绘制任意卡通图,我不会画什么卡通图,于是就画了个twitter的logo。

按1(MM_TEXT),7(MM_ISOTROPIC),8(MM_ANISOTROPIC)会有不同的GDI映射。缩放窗口可以看出他们的区别。

继续阅读