Archive for the ‘OM19’s Tech’ Category

新的历程开始 – 油茶会

大家都看到我博客右栏头像下的介绍系“伟大的交互设计菜鸟,XHTMLer和摄影匠”。其实俺一直或者立志成为一个好的交互设计师。时不时也有发表一两篇关于用户体验的博文的冲动,但一直没有兑现。

上周Ryana姐姐喊我加入油茶会(www.uxstudy.com)。大喜。终于开始了我撰写关于用户体验的文章。

今后,我尽量在每周二以笔名“包总”将关于创新的交互细节的收集奉献给同行们。这也将是一个考验。

我的第一篇博文在这里:周二茶闻…Jessie:李少来了,包总跟上!

希望大家多多批评~

设计是________

晚上一回来,Ryana姐姐就在msn上给俺出老道题

设计是________
Design is ________

让我大有思考“人活着是为了什么”的想法。
为了抵制外来语的入侵,俺操起曾经年段倒二的语文,磨练文言。加之近日学习《平面设计原理》,正好可以操一刀

Artwork #1


文案:Angela

设观者以局
局诸情于点
点龙睛乃悟
悟设者其计

排版:OM19

Artwork #2


文案:基本是OM19

设计者,

迎观者之喜

近诉者之意

 

毫察民情以知喜

慎理元素而达意

排版:OM19

本年度最怪异的IE Bugs Page

一言以蔽之
我疯掉啦
E言以蔽之
Internet Pharking Explorer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Text Duplicate in IE</title>
<style type="text/css">
.out {
    background-color:Yellow;
    width:5em;
}
.in {
    padding:20px;/*Trigger*/
    background-color:#0f0;
}
span {
    float:left;
    background-color:Red;
}
</style>
</head>
<body>
<div class="out">
  <div class="in">
  <span>Dog</span>
  <span>Cat</span>
  <span>Deer</span>
  <span>Pig</span>
  <span>Sheep</span>
  <span>1234567</span>
  </div>
</div>
</body>
</html>


预览页面在此

IE6的截图:

Firefox截图:

这是我调过的最怪异的页面。IE6中至少有如下bug:

  • Text Duplicated. 最后一行的4567重复。(HTML里没有comment的,你放心)
  • span元素被莫名加上了margin (应该是div.in对自己的位置计算不清引起的)
  • 给div.out加上border试试看!会有惊喜

最后的解决办法:让div.in hasLayout 。经试验,还是不能完全解决。我放弃了,终于。

WebSlides – Transforms Bookmarks Once Again

Dear friends,

I would like to invite you to preview an exciting new service we are developing. WebSlides is an incredibly easy way to convert your bookmarks to slideshows. You can experience WebSlides at slides.diigo.com.  You can also see a fresh review here: WebSlides – Transforms Bookmarks Once Again

If you like what you see, I would appreciate if you can help get Webslides noticed by blogging,  bookmarking and Digging !   It is the appreciation by our users that keep us working day and night, and weekends too :-) . 

Today, we are also showcasing Webslides in the LaunchSquad at the Office 2.0 Conference, held on Sept 6-7 in San Francisco, where Diigo is a Silver sponsor.

Your sincerely,
Jizhen Bao
Diigo , Inc

Feedburner被和谐,RSS订阅者可能需要更改您的订阅地址

Feedburner被和谐。被迫使用国产的服务:http://feed.feedsky.com/om19
以下,摘抄:

其实目前大多数海外敏感信息都是通过 FeedBurner 传递到国内的,也许网监处之前都还没搞懂这是个什么东西,看来现在是彻底明白了,因此封的很有技术,和 Flickr 一样,主页正常访问,关键的 Feed 地址被和谐,比如 feeds.feedburner.com/ilmay,同时受到影响的应该还有 FeedBurner 的网页广告,页面统计工具等等。

FeedBurner 用户们目前应该做些什么?

1、衷心希望这只是一次意外,几小时后恢复正常。让我们一起祈祷吧!

2、将页面上的 FeedBurner 订阅数字图标、广告代码、或者页面统计代码删除。因为这些代码会严重影响博客的加载速度,导致整个页面无法打开。

3、使用 FeedBurner 提供的30天退出机制,将你的 Feed 重定向到你的源 Feed 或者 Feedsky。(你的 Feed 对于 Google Reader 或者国外在线 RSS 阅读器能够正常抓取,而国内的抓虾或者鲜果用户则无法查看)

4、对于目前对 Feed 重定向功能支持还不够完善的服务,比如国内的鲜果,主动发信要求手动更换 Feed 地址。

5、使用 Feedsky 管理你的 Feed。目前 Feedsky 的服务已基本稳定,而其围绕 Blogger 发散出的一系列功能更是充分考虑到了 Blogger 的需求,因此个人建议使用。

Update:
6、关闭 FeedBurner 中的 Item 统计功能,因为用户已经无法通过 feeds.feedburner.com 的网址转向到你的博客。

验证框中的输入法切换的实现

众所周知,现在许多网站都使用了验证码 (Captcha) 防止spam。(例如你在本文下方的留言)
前几天在 UCDChina 的群上看见有人提出验证码对于中文用户的可用性问题。即如果当前用户处于中文输入法状态的时候,在验证码输入框中需要切换输入法为英文。这十分不方便。
这几天经过实验,我提出了这样的方法来解决:通过 input[ type = password] 密码输入控件来实现输入法的切换功能。使用一个透明的密码输入控件,将其a.p.浮在div上方,捕捉输入事件。通过下方的div显示输入文本内容。(因为密码输入控件显示的总是星号)
代码片段如下:

<style type="text/css">
#inputGhost {
    position:absolute;/*使用绝对定位,浮于div上方*/
    filter:alpha(opacity=0);
    -moz-opacity:0;
    opacity: 0;/*全透明地实现*/
    font:normal 14px "Courier New", Courier, monospace;/*使用与div相同的字体样式。用monospace保证文字等宽,尤其是与密码输入控件的星号等宽*/
    border:1px solid #ccc;
    padding:2px;
    margin:0;
    width:65px;
    height:17px;
}
#show {
    text-transform:uppercase;/*大多数验证码输入均为大写字母,所以此处显示大写字母*/
    font:normal 14px "Courier New", Courier, monospace;/*使用与密码输入控件相同的字体样式。*/
    border:1px solid #ccc;
    padding:2px;
    margin:0;
    width:65px;
    height:17px;
}
</style>

<input name="" type="password" id="inputGhost" onkeyup="document.getElementById(‘show’).innerHTML = document.getElementById(‘inputGhost’).value" maxlength="5" />
<div id="show"></div>

代码中简单地使用onkeyup事件来同步div和密码输入框中的内容。演示文件在这里(Firefox2.0 IE6 Safari上测试通过)
可以看出,有以下问题:

  • 在输入框中选中文字无高亮
  • 在Safari浏览器中没有光标
  • 输入的时候反应比较慢。

接着,我对javascript做了些改进,代码如下(略去css部分)

<input name="" type="password" id="inputGhost" onblur="bonus.stop()" onfocus="bonus.start()" maxlength="5" />
<div id="show"></div>
<script type="text/javascript">
var bonus = {
    interval : 33,//根据人眼每秒刷新24次的原理。我给定了每秒同步30次。
    timer : null,
   
    start:function(){   
        bonus.timer = setInterval(bonus.set, bonus.interval);
        document.getElementById(‘show’).style.borderColor = "#7F9DB9";//使用边框变色提高输入框的受范性
    },
    stop:function(){
        clearInterval(bonus.timer);
        document.getElementById(‘show’).style.borderColor = "#ccc";
    },
    set:function(){
        document.getElementById(‘show’).innerHTML = document.getElementById(‘inputGhost’).value;
    }
}
</script>

代码中使用Timer事件来同步div和密码输入框中的内容。演示文件在这里(Firefox2.0 IE6 Safari上测试通过)

  • 改进了focus时输入框边框变色,提高了受范性,缓解了Safari中无关标的问题。
  • 速度明显提升
  • 代码繁长

后来,我另外查阅了资料,发现IE5的版本以上支持一个私有的css属性 : ime-mode。于是只需一行代码,不需要javascript:

<input name="" type="text" style="ime-mode:disabled; text-transform:uppercase" maxlength="5" />

但毕竟只有IE支持。演示文件在这里(IE6上测试通过)

希望您留下宝贵的意见

Web+Blog发烧友的点名游戏

无人点名。看到这个好玩儿~于是自己点自己。。

【Web篇】

1、你的Web首页是什么?

原来是www.om19.cn最近终于把om19.cn添上了

2、你的Gmail邮箱的空间有多少被占用了?

35%。

3、你最喜欢哪一款浏览器?你最讨厌哪一款浏览器?

最喜欢Firefox ,最讨厌的是Internet Farcking Explorer 6

4、你一般用什么IM(即时聊天软件)?为什么选择这款IM?

Gtalk,够快,语聊效果也不错。

【Blog篇】

1、你用什么RSS阅读器来阅读信息?

最早用 抓虾,然后是我上我的(已停),几个月前开始使用 Google Reader,从此决定不换。

2、你使用什么工具发表blog日志?或者直接使用网站发布?

xx -> Word Press -> Sohu Blog -> Blogger.com -> z-blog

3、你的反向链接中,单就搜索引擎来说,Google和百度哪个过来的多?

Baidu 多,大概是Google的三倍。

4、你写blog到现在几年了,已经发了多少篇文章,有多少评论?

真正开始是06年6月28日。发布了近300篇文章。评论。。。不统计了。。。

5、你在现实生活中见过 Blog 友情链接中的哪些 Blogger(只统计通过网络认识的)?

科大绘画强淫@UESTCSX双人组 [ 女生 ] // [ 公 ]

 

 

Firefox 3.0 – 插件天堂的结束?IE 8 – 更多插件的到来?

原文:Firefox 3.0 – the End of Add-On Heaven? IE 8 More Add-On Friendly? – For Mozilla users?
原文作者:Marius Oiaga
翻译: OM19

在通往Firefox 3.0的路上,Mozilla马上就要发布Gran Paradiso(Firefox 3.0的核心代号)新的开发版本。已经停止对Firefox 1.5支持的Mozilla并不全心集中在它的2.0版本,Mozilla关注预计要在2007年年底发布的开源浏览器。Mozilla同时也在浏览器市场占有率上保持这文部的增长趋势。截至2007年4月,Mozilla浏览器的市场占有率达到了15.42%。看着Mozilla浏览器的日益普及,微软当然心痛。微软目睹了他的浏览器Internet Explorer的市场占有率逐渐跌落至接近78%。
不过,Firefox日益普及和与生俱来的安全观念的背后的主要原因之一是Firefox提供的高级的定制功能。微软提供的是一条传统的,自成一体的发展方向。与Internet Explorer不同,Firefox给用户提供了广阔的个性化选择。在这个方面,插件(Add-ons,又称加载项)在Firefox文化中发挥了重要的作用。但这些难道都要告一段落?
Mozilla浏览器实际上会采取措施,逐步增强这个即将开源的浏览器的安全性。当Mozilla基金会冻结了Gran Paradiso Alpha 5的代码并准备发布这个里程碑(milestone)版本的时候,Mozilla已经证明了关注安全性和插件的好处。
“Firefox有着数以千计的各种各样的令人难以置信的插件。这让第三方开发者可以主动地参与到提高用户浏览体验的开发中来。插件是Firefox重要的一部分,所以Mozilla致力于帮助开发者们缔造安全的插件。本周,通过非SSL隧道的更新方法受到了一些关注。使用HTTP连接(而不是HTTPS),可被攻击者重定向到一台恶意服务上而被安装上恶意代码。”Mozilla透露。
官方的Mozilla浏览器插件网站通过HTTPS和哈希(hash)验证来提供代码服务。尽管如此,Mozilla宣布,将进一步限制插件。对插件的强制性限制将和Firefox 3一起出台。相比之下, 微软拟于2008年末到2009年初之间的下一个版本的浏览器发布计划同时对开发者开放Internet Explorer。微软还没有建立一个Internet Explorer 8 的官方行动路线。但是IE7的发布就是一个对IE6的相当不错的升级。这样看来,微软会继续关注第三方开发者并提升用户体验的。

Firefox overflow 清除上一个aP元素的Bug

xHTML部分:

<div class="aPWrap">
  <div class="aP">aP</div>
</div>
<div class="S">S</div>

CSS:

body{
    margin:0;
    padding:0;
}
.S{
    overflow:hidden;
    
    background-color:#00f;height:30px;width:30px;color:#fff;
}
.aP {
    position:absolute;
    
    left:15px;top:15px;
    background-color:#f00;height:30px;width:30px;color:#fff;
}
.aPWrap{
    overflow:auto;
    
    background-color:#0f0;
}

Firefox中的div.S(蓝色小块) 会清除 div.aP(红色小块) 与 div.S 重叠的部分。
解决办法调换 div.aPWrap 和 div.S 在xHTML中之间的位置。

演示地址:www.om19.cn/images/ffotf.html

Firefox截图如下

IE(这次IE表现不错)截图如下

此Bug出现于Firefox 1.5/Firefox 2.0(Win)
在其他浏览器 Firefox(Mac/Linux), Safri, Opera, IE, Minefield中均正常。