记录一些应该记录的东东
伴随着第四届D2前端技术论坛专题（专题地址：http://www.d2forum.org/d2/4/）的完成，正式开始了本届D2的报名，报名地址：http://www.d2forum.org/d2/4/sign_up.html
报名截止：2009年12月14日 0点0分0秒
特别提醒：D2报名系统基于google 文档，如果发现无法报名，可能被墙（GFW），请尝试翻墙使用报名页面提供的源链接进行报名。
如何获知您是否被邀请？
--------------------
原文 http://www.d2forum.org/2009/12/05/topic-pages-of-the-fourth-d2-forum/
ok, 宝淘 Beta是什么呢, 一个基于淘宝开放平台(TOP)开发的淘宝商品热卖推荐网站. 通过标签(tag) 形式来展现商品. 开发时间较短(国庆那几天写的, 10.6号发布的), 比较简单的说, 很多交互还没有优化. 废话了, 进去一看就知道了.
谈谈实现吧, 首先, 宝淘是一个纯javascript开发的一个站, 没有任何后端技术, 就一纯净的html. 怎么实现TOP查询跟展现呢. 首先是TOP的签名, 我看看为代码就知道怎么实现了. md5这些, 用php.js 就可以搞定了. 再用YQL去查询. 这样就完全没有难点了. 剩下的就是交互的实现了.
说说界面吧, 很多人一看, 就问我界面哪抄的, 说实话, 界面确是抄的, 我没有能力设计这么帅的, 抄的是一个第三方twitter的web客户端http://hootsuite.com/, 只是抄设计, 所有的实现都是自己按自己的思路写的, 我有洁癖, 一直以为改别人的东西还不如自己重新写来的快. 不过有些地方还是参考了, 比如class的命名. 当然日后我会找人设计一套皮肤.
还有更新计划, 目前只是简单的实现按标签检索的方式, 分页等, 那接下去会实现:
最后, 还有贡献者, 本来把项目寄放在GAE, 无奈, 某东东发飙, 访问的很不稳定. 幸亏有 小脚儿 贡献的空间, 这里还是谢谢他的贡献...
如果您有什么意见, 请联系xiaomacji[at]gmail.com, 或者 直接 发twitter给@ibaotao. 如果您愿意贡献独立的设计, 创新的交互形式, 优雅的代码, 也请联系xiaomacji[at]gmail.com.
-------------分割线
目前淘宝UED广招web前端开发工程师, 欢迎发简历. 有简历, 有机会.
update:
2009-10-13 20:30
淘宝开放平台项目（TOP： taobao open platform）是淘宝（中国）软件公司面向3rd app开发者，提供API接口和相关开发环境的平台。
嗯, 这里介绍如何通过基于firefox的javascript去获取淘宝API提供的数据, 其实很简单. 获取数据需要签名和相关API方法, 具体请看API文档.
签名方式为 md5(appsecret + key + value .... key + value)然后转大写字母,其中key,value对是除签名和图片外的所有请求参数按key做的升序排列, value无需编码。
通过服务器端比如php, ruby, python等很容易实现签名方式, 但基于浏览器的javascript貌似望而却步, 但是mozilla提供了javascript的本地扩展, 让你用javascript也能实现更复杂的功能, 比如基于firefox的多线程下载工具. 下面给出简单的签名方式.
//去alisoft申请个app，会给他一个ID和CERT_CODE, 签名的时候需要
API_URL = 'http://sip.alisoft.com/sip/rest/',
APP_NAME = 'baotao',
APP_ID = '22183',
CERT_CODE = 'cebc9bf0031411de8baffe67f4df8a7b';convertFromUnicode对字符进行转码,再md5.
/**
* md5
* @return String
*/
var md5 = function(str){
var getHexStringFromBinary = function(str){
var hexchars = '0123456789abcdef';
var hexrep = new Array(str.length * 2);
var i;
for (i = 0; i < str.length; ++i)
{
hexrep[i * 2] = hexchars.charAt((str.charCodeAt(i) >> 4) & 15);
hexrep[i * 2 + 1] = hexchars.charAt(str.charCodeAt(i) & 15);
}
return hexrep.join('');
}
var hashMd5Hex = function(str){
var hash_engine = Components.classes["@mozilla.org/security/hash;1"].createInstance().QueryInterface(Components.interfaces.nsICryptoHash);
hash_engine.init(hash_engine.MD5);
var charcodes = new Array();
for (var i = 0; i < str.length; i++)
{
charcodes.push(str.charCodeAt(i));
}
hash_engine.update(charcodes, str.length);
return getHexStringFromBinary(hash_engine.finish(false));
}
return hashMd5Hex(convertFromUnicode('UTF-8', str));
}
/**
* ksort
* @return Array
*/
var ksort = function (array){
var tmp_arr = {}, keys = [], key_num = 0, key = '', i = 0;
for (key in array) {
keys[key_num++] = key;
}
keys = keys.sort();
for (i = 0; i < key_num; i++) {
key = keys[i];
tmp_arr[key] = array[key];
}
return tmp_arr;
};
/**
* urlencode
* @return String
*/
var urlencode = function(s){
var SAFECHARS = "0123456789" + // Numeric
"ABCDEFGHIJKLMNOPQRSTUVWXYZ" + // Alphabetic
"abcdefghijklmnopqrstuvwxyz" +
"-_.!~*'()"; // RFC2396 Mark characters
var HEX = "0123456789ABCDEF";
var encoded = "";
for (var i = 0; i < s.length; i++ ) {
var ch = s.charAt(i);
if (ch == " ") {
encoded += "+"; // x-www-urlencoded, rather than %20
} else if (SAFECHARS.indexOf(ch) != -1) {
encoded += ch;
} else {
var charCode = ch.charCodeAt(0);
if (charCode > 255) {
alert( "Unicode Character '"
+ ch
+ "' cannot be encoded using standard URL encoding.\n" +
"(URL encoding only supports 8-bit characters.)\n" +
"A space (+) will be substituted." );
encoded += "+";
} else {
encoded += "%";
encoded += HEX.charAt((charCode >> 4) & 0xF);
encoded += HEX.charAt(charCode & 0xF);
}
}
} // for
return encoded;
};
/**
* getParameterStr
* @return String
*/
var getParameterStr = function(arr){
var s = '', c = 'cebc9bf0031411de8baffe67f4df8a7b';
arr = ksort(arr);
for(var i in arr){
if('' != arr[i]){
if(i == 'sip_timestamp'){
s += i + '=' + urlencode(arr[i]) + '&';
}else{
s += i + '=' + encodeURIComponent(arr[i]) + '&';
}
c += i + arr[i];
}
}
s += 'sip_sign=' + md5(c).toUpperCase();
return s;
}
return {
init: function(q, pageNo){
var arr = parameters;
arr['sip_timestamp'] = GetDate.init();
arr['sip_apiname'] = 'taobao.items.get';
arr['cid'] = '';
arr['q'] = q || 'mac';
arr['fields'] = "iid,title,nick,type,cid,pic_path,delist_time,price,post_fee";
arr['page_no'] = pageNo || 1;
arr['page_size'] = 50;
return API_URL + '?' + getParameterStr(arr);
}
}
TOP签名还是挺麻烦的，源代码请下载宝淘扩展查看吧。https://addons.mozilla.org/zh-CN/firefox/addon/11309
首先要说明的是, 宝淘是一个Firefox扩展, 一个基于淘宝开放API的简易搜索器, 此扩展完全用javascript去获取数据, 没有用代理, 也就是说淘宝API挂掉, 此扩展才会失效.
界面是抄Mac下的Quicksilver, 那几个字是自己画的, 自己觉得都很漂亮, 哇哈哈.., 不过windows下文字太大了, 有点失真
看预览图吧, 很漂亮滴...
怎么用? 首先下载https://addons.mozilla.org/zh-CN/firefox/addon/11309, 安装后, 右下角会出来一个"淘"的icon, 按ALT+Q呼出, 按TAB或者option+S(Mac), ALT+I(Windows)键入关键字搜索, 然后按方向键左右切换商品, 按方向键"DOWN", 进入商品详情页.
大家反映快捷键不好用, 恩, 用的人多, 这个小玩具下个版本就有自定义快捷键了. 赶快下载试用吧.
由于服务器主机到期, 换到另一主机了, 至于现在的主机在哪, 是誰的, 我一无所知. 对我来说, 能用就行....
换主机, 也把WP换成Typecho, 我貌似什么都没做, 空帷 全帮我搞定了. 上周就换了, 一直没时间也懒得弄blog了, 这周休假在家, 想起blog了, 就给它重新写了个皮肤, 设计是抄的(抄自fofronline), 自己稍微改了一下, 代码自己重构了, mac下看起来是比较的漂亮, windows下字体不是很舒服, 也懒得去弄了. 另外不是很了解Typeho, 一些原来blog上的功能都没加, 等了解了再加上去. 另外我厚脸皮的, 把这个皮肤命名为: Enter
如果你有f'irebug之类的工具, 可以看到, 结构中, 没有几个div了, 基本上都换成html5了. 不支持IE浏览器. 去掉css, 看起来也是比较的"完美"了.
因为这不是WP的皮肤, 也没多少人用Typeho, 所以就不提供下载了, 如果你喜欢, 直接看源码和http://labs.macji.com/assets/style.css, 对了, 我已经完全屏蔽IE内核的浏览器了, 也就是说这个皮肤是完全不支持IE内核的浏览器的, 既然你能看到这个页面, 说明你没有用IE. 也不多说了.
恩, 新的系统, 新的皮肤, 新的开始, 每次换blog系统, 我都会这么说, 最近更新blog也很慢, 主要还是太忙了, 忙的累了, 也懒的去更新了. 接下来要克服这个毛病, 还是得坚持更新, 坚持分享.
