Sep
15
差不多4年前，对当时炒得火热的web2.0很不齿--沸沸扬扬的压根就没什么新技术，如果说ucc(user create content)也算创新的话，那bbs这个应用算啥？至于ajax，那就更不是什么新技术了，微软很早就发明了这个的技术部分。不过今年，我慢慢改变了看法。
首先，借着web2.0的大旗或者说东风，出现了一堆接近ucc或者让用户改变了生活习惯的应用。twitter，facebook是当下最火的，前几年的flickr和youtube，last.fom等，国内最火的则是kaixin001了，认识的朋友中就真有半夜起来偷菜的=_=。同时，再现了01年前网络的盛况--免费资源多了很多。我在用的大多是gg的东西，比如reader，picasa，手机版maps，google apps，这些实实在在改变了我的生活习惯。话说，腾讯前几日也开始了免费企业邮箱的内测，谁说免费的多些不是好事呢？并且同时，小额应用收费服务也慢慢变得普遍了，不晓得是不是网络一代开始陆续走上工作岗位的缘故，起码大学毕业的几乎人人会上网这是事实^_^
其二，api横行。不记得是哪个站开始的了，或许是flickr开始的？有开发接口，产生了丰富的客户端应用，这多少也算ucc一部分，应该说user create applacation，之后公布api似乎成了不少2.0网站的标配，比如国内的豆瓣，很喜欢他们家的rest api。我最近在用的recaptcha和dnspod也都有api。
其三，用户体验。这个这几年上升到了一个全新的高度，甚至是很泛滥成灾了，ajax自然不必说，另外一个改变生活习惯的在第一点里我没说，那就是rss订阅。我的google reader里一堆订阅，甚至每日都要花上半小时来看，比如engadget，cnbeta，爱枣报， 糗事百科等。甚至我的台式机上的imon里，都有天气以及新闻订阅。页面则趋向于简洁，不仅速度更快而且不影响用户浏览。
最后说说技术。python，php，ror，这是这几年火爆的2.0标配语言，php继yahoo之后很被发扬光大，ror和python也越来越热。js framework也出现了很多，最有名的算jquery了吧，使用它的站一把。yui则是yahoo开发的一套css，js，html框架。这些标准，多了总归不是坏事。
离标题扯远了，回归主题。html的作用不仅仅是用户看到的界面，也要让机器（特别是搜索引擎）阅读起来省时省力，于是慢慢的有了某些默认的标准，比如MicroFormat。尽量使数据和界面分离，这样不仅机器省事，写代码也省事，算可复用吧^_^，这几日在忙用户注册，就说说form复用的小感，先感谢下google，yahoo和microsoft这三大神，参考了他们一些html。
先看一组图：
google
微软
yahoo
提炼出几个主要的元素：标签、输入框、提示、贴士（提示的补充）、信息（填写正确或者错误的信息）。那么一行表单自然就出来了：label、input、hint、tips、message。给这些加上不同的html，就是label、input/textarea/select、span、p、div。一般label的float为左，text-align为右，margin-right可以加上几个像素，甚至可以:after加上“：”。input的float为左。hint为换行居左，。tips为浮动，默认隐藏，当onfocus时候显示。message这个没固定，微软是在输入框上面，google在输入框下面，yahoo则是本行。个人还是倾向于yahoo的，没有歧义。
当然，有复杂的输入框部分，那个input变成一个整div去排版。
清爽了吧。附忙了几天的页面对比：
最后确认的,简单就是美嘛
首先，借着web2.0的大旗或者说东风，出现了一堆接近ucc或者让用户改变了生活习惯的应用。twitter，facebook是当下最火的，前几年的flickr和youtube，last.fom等，国内最火的则是kaixin001了，认识的朋友中就真有半夜起来偷菜的=_=。同时，再现了01年前网络的盛况--免费资源多了很多。我在用的大多是gg的东西，比如reader，picasa，手机版maps，google apps，这些实实在在改变了我的生活习惯。话说，腾讯前几日也开始了免费企业邮箱的内测，谁说免费的多些不是好事呢？并且同时，小额应用收费服务也慢慢变得普遍了，不晓得是不是网络一代开始陆续走上工作岗位的缘故，起码大学毕业的几乎人人会上网这是事实^_^
其二，api横行。不记得是哪个站开始的了，或许是flickr开始的？有开发接口，产生了丰富的客户端应用，这多少也算ucc一部分，应该说user create applacation，之后公布api似乎成了不少2.0网站的标配，比如国内的豆瓣，很喜欢他们家的rest api。我最近在用的recaptcha和dnspod也都有api。
其三，用户体验。这个这几年上升到了一个全新的高度，甚至是很泛滥成灾了，ajax自然不必说，另外一个改变生活习惯的在第一点里我没说，那就是rss订阅。我的google reader里一堆订阅，甚至每日都要花上半小时来看，比如engadget，cnbeta，爱枣报， 糗事百科等。甚至我的台式机上的imon里，都有天气以及新闻订阅。页面则趋向于简洁，不仅速度更快而且不影响用户浏览。
最后说说技术。python，php，ror，这是这几年火爆的2.0标配语言，php继yahoo之后很被发扬光大，ror和python也越来越热。js framework也出现了很多，最有名的算jquery了吧，使用它的站一把。yui则是yahoo开发的一套css，js，html框架。这些标准，多了总归不是坏事。
离标题扯远了，回归主题。html的作用不仅仅是用户看到的界面，也要让机器（特别是搜索引擎）阅读起来省时省力，于是慢慢的有了某些默认的标准，比如MicroFormat。尽量使数据和界面分离，这样不仅机器省事，写代码也省事，算可复用吧^_^，这几日在忙用户注册，就说说form复用的小感，先感谢下google，yahoo和microsoft这三大神，参考了他们一些html。
先看一组图：
微软
yahoo
提炼出几个主要的元素：标签、输入框、提示、贴士（提示的补充）、信息（填写正确或者错误的信息）。那么一行表单自然就出来了：label、input、hint、tips、message。给这些加上不同的html，就是label、input/textarea/select、span、p、div。一般label的float为左，text-align为右，margin-right可以加上几个像素，甚至可以:after加上“：”。input的float为左。hint为换行居左，。tips为浮动，默认隐藏，当onfocus时候显示。message这个没固定，微软是在输入框上面，google在输入框下面，yahoo则是本行。个人还是倾向于yahoo的，没有歧义。
当然，有复杂的输入框部分，那个input变成一个整div去排版。
清爽了吧。附忙了几天的页面对比：
最后确认的,简单就是美嘛
Sep
13
recaptcha是一个为了数字化图书而建立的项目，由于目前ocr识别率不高，导致很多老书籍扫描识别有困难，于是出现了recaptcha，给出的验证码是2段，一段是机器混淆，一段是ocr扫描件，如果一个人能把一段识别对，那么另外一段也默认为对，这么来每人贡献一小段，加快老图书的识别过程。
选中recaptcha，我的初衷是因为他有语音识别，而且预防机器识别率较好，并且facebook，twitter等都在用，同时算为数字化图书做一份力吧。今天顺利搞好了定制样式，不过浏览时发现了问题：sarari和chrome下，整个段落高度明显高出一行，约16px。调整来调整去没见效果，看js看的头晕。灵机一现，我怎么忘了查看生成之后的dom结构。这一看发现了问题：
main和footer之间多出来一个iframe，搜索recaptcha的js，发现了如下：
244 if (navigator.userAgent.indexOf("KHTML") > 0) {
245 var iframe = document.createElement('iframe');
246 iframe.src = "about:blank";
247 iframe.style.height = "0px";
248 iframe.style.width = "0px";
249 iframe.style.visibility = "hidden";
250 iframe.style.border = "none";
251 var textNode = document.createTextNode("This frame prevents back/forward cache problems in Safari.");
252 iframe.appendChild(textNode);
253 document.body.appendChild(iframe);
254 }
原来为了修补safari，多了iframe，虽然他设置的高是0，但还是占位了，导致行高超出。解决办法，目前我用不到iframe，于是把iframe的display设置为none。
ps：safari和chrome都是webkit内核。
选中recaptcha，我的初衷是因为他有语音识别，而且预防机器识别率较好，并且facebook，twitter等都在用，同时算为数字化图书做一份力吧。今天顺利搞好了定制样式，不过浏览时发现了问题：sarari和chrome下，整个段落高度明显高出一行，约16px。调整来调整去没见效果，看js看的头晕。灵机一现，我怎么忘了查看生成之后的dom结构。这一看发现了问题：
main和footer之间多出来一个iframe，搜索recaptcha的js，发现了如下：
244 if (navigator.userAgent.indexOf("KHTML") > 0) {
245 var iframe = document.createElement('iframe');
246 iframe.src = "about:blank";
247 iframe.style.height = "0px";
248 iframe.style.width = "0px";
249 iframe.style.visibility = "hidden";
250 iframe.style.border = "none";
251 var textNode = document.createTextNode("This frame prevents back/forward cache problems in Safari.");
252 iframe.appendChild(textNode);
253 document.body.appendChild(iframe);
254 }
原来为了修补safari，多了iframe，虽然他设置的高是0，但还是占位了，导致行高超出。解决办法，目前我用不到iframe，于是把iframe的display设置为none。
ps：safari和chrome都是webkit内核。
Sep
11
前几日使用了sticky footer的css，就是那个著名的底栏居浏览器最下的技术，测试了几日没问题，于是今天把passid的底栏代码调整了下，合并到了同一个ul，算是html代码优化吧。
本机发布了下，于是拿不同的浏览器看效果，无意的刷了下ie8，发现了问题：底栏超高了。再次刷新，约30%的几率会出现超高，其余正常。抓狂=_=
这个才是正常的
开始以为是footer超高，加上边框看下效果，发现没有。那么可能就是主体部分padding可能计算出错咯。于是一步步恢复，同时多次刷新测试。差不多恢复到一半，依旧这样的现象。难道我的xhtml格式错了么，于是右键查看源代码，这一看就发现了问题，我去掉了<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，这个是让ie8运行ie7的兼容模式，恢复到最后，加上再次刷新：这次正常了。
再测试，我用的dtd是xhtml1-strict，去掉EmulateIE7，去掉dtd，正常。仔细看css，发现里面我强行限制了上下滚动条，去掉EmulateIE7，加上dtd，去掉上下滚动条，也正常。于是加上保留上下滚动条，加上左右滚动条，这次也正常。去掉dtd是quirks模式，这个不谈。
合计如下（IE8）：
看起来结果很好，其实1勉强能接受，让ie8模拟ie7，2错，3是quirks模式，4是没有了上下滚动条，内容不足时候比较光秃秃的，之后只剩下5，缺陷就是overflow-x和y不是标准css。
总结就是：body宽高度100%时候，ie8强制上下滚动时候，左右滚动条可能也会出现导致位置错，ie7则无这个问题。
权衡之下，选了4。
这个正常后就拿5800自带的看，5800自带的浏览器是Mozilla/5.0+(SymbianOS/9.4;+U;+Series60/5.0+Nokia5800d-1/21.0.101;+Profile/MIDP-2.1+Configuration/CLDC-1.1+)+AppleWebKit/413+(KHTML,+like+Gecko)+Safari/413，正常。想起来还有个opera mini，得，这下完全变形了。搜了下相关资料，发现opera mini不是一个兼容大多pc浏览器的，而纯粹算个手持设备的专用版本，看来短期内想和pc版兼容无望了。
这么说来，还是ipod touch上的safari更招人喜欢些。
本机发布了下，于是拿不同的浏览器看效果，无意的刷了下ie8，发现了问题：底栏超高了。再次刷新，约30%的几率会出现超高，其余正常。抓狂=_=
这个才是正常的
开始以为是footer超高，加上边框看下效果，发现没有。那么可能就是主体部分padding可能计算出错咯。于是一步步恢复，同时多次刷新测试。差不多恢复到一半，依旧这样的现象。难道我的xhtml格式错了么，于是右键查看源代码，这一看就发现了问题，我去掉了<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，这个是让ie8运行ie7的兼容模式，恢复到最后，加上再次刷新：这次正常了。
再测试，我用的dtd是xhtml1-strict，去掉EmulateIE7，去掉dtd，正常。仔细看css，发现里面我强行限制了上下滚动条，去掉EmulateIE7，加上dtd，去掉上下滚动条，也正常。于是加上保留上下滚动条，加上左右滚动条，这次也正常。去掉dtd是quirks模式，这个不谈。
合计如下（IE8）：
看起来结果很好，其实1勉强能接受，让ie8模拟ie7，2错，3是quirks模式，4是没有了上下滚动条，内容不足时候比较光秃秃的，之后只剩下5，缺陷就是overflow-x和y不是标准css。
总结就是：body宽高度100%时候，ie8强制上下滚动时候，左右滚动条可能也会出现导致位置错，ie7则无这个问题。
权衡之下，选了4。
这个正常后就拿5800自带的看，5800自带的浏览器是Mozilla/5.0+(SymbianOS/9.4;+U;+Series60/5.0+Nokia5800d-1/21.0.101;+Profile/MIDP-2.1+Configuration/CLDC-1.1+)+AppleWebKit/413+(KHTML,+like+Gecko)+Safari/413，正常。想起来还有个opera mini，得，这下完全变形了。搜了下相关资料，发现opera mini不是一个兼容大多pc浏览器的，而纯粹算个手持设备的专用版本，看来短期内想和pc版兼容无望了。
这么说来，还是ipod touch上的safari更招人喜欢些。
Sep
6
avatar源自印度梵语，本意是指"分身、化身"。网络时代，这个词的意思是用户的虚拟形象--头像，可以是卡通，可以是真人照片，可以是自己喜欢的任何图片。目前用的较多的是gravatar，也就是Globally Recognized Avatars，提供免费头像托管的网站。头像路径是根据email进行md5后生成，既防止了email泄露，又保证了唯一。为了避免passid用户再上传一次头像和减少passid的存储，准备耦合gravatar的服务，即passid本身不提供avatar托管，而直接使用gravatar。
感谢gravatar。
感谢gravatar。
Sep
5
鉴于qq.cn以及一位数cn，以及tgbus等域名的神奇，我选择了在国外注册域名，不是我想做违法的事，只是多一事不如少一事。想当初，自己的blog也是禁不住三天两头的机房被检查而搬出去，已经3年了。算算信誉度，可靠性，价格等，我选择了在godaddy注册。其实godaddy的dns解析速度很快，还算稳定，价格也可以，但是综合了下速度和可靠性，我选了dnspod这个国内的免费dns解析商，毕竟背靠大树好乘凉，那一票国内站就是保证。虽然有前暴风影音的事迹，但我对他还是很有自信的。
感谢dnspod。
感谢dnspod。
