YY in Limbo 混沌海狂想 » web服务/应用

《新版阿尔法城背后的前端MVC实践》的幻灯片和⋯⋯这次没剧本⋯⋯

Dexter.Yy — Sun, 10 Jul 2011 03:16:25 +0000

拖到最后一天才开始准备，所以没时间写剧本照着念了T___T

幻灯片上的吐槽跟实际的讲话其实是属于两个平行世界：

http://www.slideshare.net/dexter_yy/mvc-8554206

新版阿尔法城背后的前端MVC实践

View more presentations from Dexter Yy

精选几张梗：

Google的大危机——本地app重新流行！浏览器和web已死？

Dexter.Yy — Sat, 21 Aug 2010 14:02:58 +0000

这个星期连线杂志的文章《浏览器已死，互联网永生》（中文）成功的引发话题，即使在中国都引发了广泛激烈的争论，以下这段评论我本来是像往常一样用google reader的note来写的，但是不小心写长了-__-b，干脆发到这里，文字没时间修改所以也没有笑点，我只是觉得这些很明显的道理，在很多人的文章里没看到提起，所以如梗在喉……

引发连线思考的，并非一份统计数据，而是本地应用（native app）重新流行的现象，连线把这种现象解读为：商业战胜乌托邦、垄断战胜混乱、封闭战胜开放、便利战胜多样、营销战胜传播、性能战胜创新、稀少战胜丰富、内容战胜技术……显然YY过头了，这些观点随便抽出一个都不可能不引发争议。而实际上呢，这个现象背后真正分出胜负的对战双方，应该是移动设备战胜传统电脑。

先想想web的优势：跨平台、即需即用、一致性、安装和升级的成本为0、托管数据、托管计算任务、自由开放、实现和分发新产品新内容的成本低门槛低——最后两条导致新产品新内容层出不穷。

在桌面电脑上，这些都是绝对无敌的杀手级特性，本地软件即便在用户体验和性能方面有优势，在web的巨大优势面前也是杯水车薪。所以我们看到：即使在第三方软件用户体验最高（平均…）的OS X平台上，本地软件替代web的情况都极少，相反，因为google reader，像NetNewsWire这样的阅读器软件销声匿迹。因为gmail，困扰开源社区多年的outlook终于有了替代品。我们也并没有下载安装一大堆本地app专门用来访问连线、NYT、维基、google maps、facebook……只有在那些web还没发展出成熟技术的领域，本地app才会无法取代，比如代码编辑器（vim/eclipse）和音乐管理（itunes）。也许有人认为twitter是一个app取代浏览器的例子……请问，早期的twitter真的是一个website或者webapp么？实际上只是一个数据服务罢？

正因如此，就在不久前，人们还经常畅谈web和浏览器取代操作系统，google也毫不动摇的坚守在浏览器里。为什么现在突然变调，开始有人怀疑浏览器将死了？

是因为移动设备火了。开头列举的web优势，并不全都适用于移动设备——我指的是“跨平台、即需即用、一致性”，人们经常需要使用不同的电脑：住宅里的台式机、公司里的工作站、咖啡馆里的笔记本……但是移动设备，比如手机和ipad，却几乎肯定是一人一机，没有切换的可能性，于是“即需即用”变成了“事先装好以后常用”、跨平台和一致性的需求也没了。另一方面由于app store的出现，移动平台上软件的安装和升级成本也大幅降低了（虽然对像我这样装了200+软件的用户来说升级还是很麻烦）。而“托管数据”和“托管计算任务”，也不再是浏览器的专利，在随时与网络连接、自身资源有限的移动设备上，本地app也大量使用云端的托管。因为这些原因，web/浏览器的优势被抵消了大半，本地app在用户体验和性能方面的优势凸显出来，成了最佳选择……

但是别忘了，web的优势还剩下两条：“自由开放、实现和分发新产品新内容的成本低门槛低“。仅凭这两条，web就拥有独一无二的生命力，也永远不会被app取代。想想看：世界上真正有几家企业的软件或内容服务，能为广大用户熟知，能轻易的说服广大用户下载安装甚至购买？假如没有浏览器里的web，这个世界就只有大厂商和传统媒体能生存，只会有封闭的、不一致的平台。新事物、新内容、新企业的出现都会变的很难、很慢、很少。一个成员数量接近七十亿的人类社会能接受这种世界么？

一种产品或内容，不论多么优秀多么创新的，都不会一直是最好，因为永远会出现更好。一种现状，无论多么尽善尽美，都不可能抑制住一些人对创造和自我实现的向往。一个企业，无论多么强大，也不可能满足长尾上的每一点需求、不可能看到每一个能通向引爆点的新方向。一个平台，即使是apple出品，即使它值得学习值得崇拜，但是值得去局限自己的视野、封闭自己的思维么——我觉得《连线》的编辑就是这样做的。

另外，就算是移动设备，也不适合所有人都一窝蜂推出本地app，上上周在书店遇到都市客的技术总监小叶同志，我也对他们的周末画报app泼过类似的凉水，小叶同志说重要的是”先圈地“，我认为……地是很有限的。比方说，我喜欢google reader的web界面，更喜欢ipad上的本地客户端Reeder，但要是你以为你的产品也能复制这种成功，用本地app来取代web界面，那就大错特错了——除非你是真正的杀手级应用，或者极少数垄断性内容媒体，否则除了死geek，没人会把你的app，连同另外上百个类似的app都安装保留在移动设备上面，我们只可能在web上，通过链接的跳转，偶尔访问到你。如果没有web，没有浏览器，你早就死了。

Google I/O大会keynote摘要

Dexter.Yy — Wed, 19 May 2010 19:10:19 +0000

VP8开源，免专利费，发布新的web视频格式 WebM
- WebM的组成包括：VP8（视频编码） + Vorbis（音频编码） + Matroska（即mkv，容器格式），文件后缀.webm
- VP8的FAQ：http://www.webmproject.org/about/faq/
- 来自x264开发者的VP8深度技术分析：http://x264dev.multimedia.cx/?p=377

几乎所有浏览器厂商都宣布支持VP8：
- Chromium：http://build.chromium.org/buildbot/snapshots
- Chrome在24号更新
- Firefox：http://nightly.mozilla.org/webm/
- Opera：http://labs.opera.com/news/2010/05/19/
- 微软宣布IE9将支持VP8：http://windowsteamblog.com/windows/b/bloggingwindows/archive/2010/05/19/another-follow-up-on-html5-video-in-ie9.aspx
- Adobe在会上宣布flash支持webm/VP8，这样flash将支持5种codec：Screen sharing, Spark, VP6, H.264, VP8

Adobe发布HTML5开发工具
- dreamweaver的HTML5 Pack：http://labs.adobe.com/technologies/html5pack/
- 同时测试多种浏览器设备（Multiscreen Preview panel）
- 支持编辑和渲染CSS3，包括动画，有一个demo看上去很像用flash开发广告banner

Chrome Web Store
- 帮助用户寻找web app，可以在Chrome app tab上创建软件的快捷方式：http://code.google.com/chrome/apps/
- 内建支付系统，支持付费软件
- 包含flash软件
- 包含Native Client应用（原生程序＋HTML5 API），3D游戏可以全屏运行
- 包含出版物，演示了HTML5 magazine

Google Wave正式开放，包含一堆API和扩展机制，跟gmail整合

API更新
- Font API：http://code.google.com/apis/webfonts/
- Feed API支持PubSubHubbub：http://googleajaxsearchapi.blogspot.com/2010/05/google-feed-api-now-with-instant.html
- Maps API v3从labs里毕业

Google Web Toolkit 和 Google Ap Engine
- 跟VMware合作，整合 GWT 和 Spring（SpringSource Tool Suite， Spring Roo）http://www.springsource.org/node/2595
- GWT 2.1 Widget Libraries，支持移动设备
- Google Ap Engine企业版

HTML5, CSS3, ES5…新的web标准和浏览器支持一览

Dexter.Yy — Mon, 29 Jun 2009 00:40:26 +0000

好罢这篇本来是我私下做的笔记，我特别喜欢在Evernote上做备忘的笔记，虽然上次看到漏屋老师的文章里说我现在的年龄才刚刚进入记忆力的巅峰期……但是我的自信心仍然屡受打击！比如跟别人讨论The Dark Knight里小丑在医院对检察官说了什么让他变成双面人，我一句对白都想不起来，还有big bang theory s2里penny玩age of conan时的人物名字是”Queen Penelope”，我看的时候印象很深，一个月后就连奥德赛都想不起来了。留份笔记总觉得心里踏实些……啊又跑题了

本文整理了一些最重要（或者说人气比较高罢）的新标准，虽然它们多数还只是w3c的草案，离Recommendation级别还早，却已经成为新一轮浏览器大战中备受追捧的明星，开发者社区里也涌现出大量相关的demo和API封装，有些已经进入生产环境（比如google在iphone上实现的gmail离线应用），其实我觉得如今的web领域里，从厂商私有技术转换成委员会标准再转换成通用技术产生杀手级应用的周期已经显著的加速了，是因为现在web application的需求太高了么…… UPDATE：刚才在solidot发软文的时候我突然想明白怎么表述这个问题：其实现在很多浏览器厂商同时也是基于浏览器的应用开发者和web标准的制定者，就好像修筑舞台的工程师同时也是舞台上的演员和舞蹈动作的导演一样，所以google, mozilla, apple们都在不遗余力的实现那些有利于开发web应用的技术标准，即时它们还是W3C Working Draft，相比之下IE team就比较缺乏动力，果然计划经济缺乏活力亚XD……

由于是源自笔记，对每个条目我只会列出称呼和语法特征，暂时没时间写详细的解释和可执行的示例，但是会给出相关的文档地址，除了列出已经支持该特性的浏览器，也会为不支持的浏览器提供替代/过渡的实现。

===================废话结束的分割线=======================

CSS3 Media queries

对整个外链css文件和部分css代码使用的媒体类型侦测，人气高的原因显然是因为移动设备……

<link media=“all and (orientation:portrait)” src="screen.css" type="text/css">

@media all and (min-color: 4) { ... }

w3c标准：http://www.w3.org/TR/css3-mediaqueries/
MDC文档：https://developer.mozilla.org/En/CSS/Media_queries
Opera文档：http://www.opera.com/docs/specs/css/

支持：Firefox 3.5+, Safari 3+, Opera 7+

CSS3 2D Transforms

css变形，有人用这个实现伪3d效果以及旋转效果的jquery插件

-moz-transform: rotate(-45deg) skew(15deg, 15deg);

sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';

w3c标准：http://www.w3.org/TR/css3-2d-transforms/
MDC文档：https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介绍: http://webkit.org/blog/130/css-transforms/

支持：Firefox 3.5+, Safari 3.1+
替代/过渡：IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

CSS3 Transitions and CSS Animations

备受期待的css动画，webkit团队提出的草案，transition实现简单的属性渐变，animation定义更复杂的动画效果

transition-property: width;
transition-duration: 1s;
animation-name: 'diagonal-slide';
animation-duration: 5s;
animation-iteration-count: 10;
@keyframes 'diagonal-slide' {}

w3c标准：http://www.w3.org/TR/css3-transitions/
w3c标准：http://www.w3.org/TR/css3-animations/
webkit博客的介绍：http://webkit.org/blog/138/css-animation/
约翰同学的介绍：http://ejohn.org/blog/css-animations-and-javascript/

支持：Safari 3.1+

CSS3 Downloadable fonts

能在网页里嵌入任意字体是设计师的梦想……不过这里支持的也仅限truetype和opentype

@font-face {}

w3c标准：http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文档：http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx
MDC文档：https://developer.mozilla.org/en/CSS/@font-face

支持：Firefox 3.5+, Safari 3.1+, Opera 10.0+, IE4.0+

附赠：其他CSS3 property的兼容性

ppk同学维护的文档: http://www.quirksmode.org/css/contents.html
css3.info维护的文档：http://www.css3.info/modules/selector-compat/
一个测试页面：http://westciv.com/iphonetests/

HTML5 DOM Storage

简洁的持久存储，键值对的形式

window.localStorage
window.sessionStorage //可跨域，标签页关掉就清空

w3c标准：http://www.w3.org/TR/webstorage/
ppk同学维护的兼容性列表：http://www.quirksmode.org/dom/html5.html#localstorage
MDC文档：https://developer.mozilla.org/en/DOM/Storage
MSDN文档：http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

支持：Firefox 3.5+, Safari 4.0+, IE 8.0+

HTML5 Offline Application Cache

用一个manifest文件缓存静态资源（图片,css, js之类）在离线状态下使用，不是结构化数据

<html manifest="foo.manifest">

CACHE MANIFEST
index.html
style/default.css
images/logo.png

w3c标准：http://www.w3.org/TR/offline-webapps/#offline
MDC文档：https://developer.mozilla.org/en/Offline_resources_in_Firefox

支持：Firefox 3.5+

HTML5 Database Storage

本地数据库，支持sql，最早是google gears实现，现在的w3c草案的编辑也是google的工程师……但奇怪的是，gears的api跟现在的草案不兼容，chrome甚至为了保留捆绑的gears的数据库api而删除了webkit实现的html5 api……而google在iphone上实现gmail离线功能的时候又采用webkit的api……真纠结……

var db = window.openDatabase("notes", "", "The Example Notes App!", 1048576);
db.transaction(function(tx) {
tx.executeSql(‘SELECT * FROM Notes’, [], function(tx, rs) {});
});

w3c标准：http://www.w3.org/TR/offline-webapps/#sql
webkit博客的介绍：http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/
iphone的文档：http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-SW1

支持：Safari 3.1+
替代/过渡：Gears http://code.google.com/p/gears/wiki/Database2API

HTML5 Web Workers

多线程，在后台执行复杂运算，不能操作dom，线程之间通过消息事件通信

var myWorker = new Worker('my_worker.js');
myWorker.onmessage = function(event) { event.data };
myWorker.postMessage(str);

w3c标准：http://www.w3.org/TR/workers/
MDC文档：https://developer.mozilla.org/En/Using_web_workers

支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

HTML5 Geolocation

地理api

window.navigator.geolocation

w3c标准：http://www.w3.org/TR/geolocation-API/
MDC文档：https://developer.mozilla.org/En/Using_geolocation

支持：Firefox 3.5+
替代/过渡：Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 Drag and Drop

原生拖拽事件

ondragstart
ondrag
ondragend
//拖拽过程中
ondragenter
ondragover
ondragleave
ondrop

w3c标准：http://www.w3.org/TR/html5/editing.html#dnd
MDC文档：https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
apple文档：http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233

支持：Firefox 3.5+, Safari 2.0+, Chrome 1.0+, IE 5.0+

HTML5 Audio and Video

用html标签来嵌入视频音频的好处并非是“开源格式”，而是“开放性”，让多媒体可以与其他页面元素交互，或者用页面技术去跟视频“mashup”，这种随意组合和交互的能力是web技术兴盛的基石，也是像flash这类封闭RIA容器最大的缺点。

<video controls>
<source src=“zombie.ogg” type=“video/ogg”/>
<source src=“zombie.mp4″ type=“video/mp4″/>
video>

MDC文档：https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
webkit博客的介绍：http://webkit.org/blog/140/html5-media-support/

支持：Firefox 3.5+, Safari 3.0+, Chrome 3.0+
替代/过渡：用video标签嵌套embed http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/

HTML5 Canvas

apple发明，最早应用于dashboard，目前主流的js图像技术，mozilla已经在实现OpenGL ES标准的Canvas 3D了，另外据说ie team为支持canvas做了大量工作……实际上canvas api相当底层，特别是交互方面，不如svg直观，所以出现了很多封装它的库

var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(220, 220, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

MDC文档：https://developer.mozilla.org/en/Canvas_tutorial

支持：Firefox 1.5+, Safari 2.0+, Chrome 1.0+, Opera 9.0+
替代/过渡：excanvas.js http://code.google.com/p/explorercanvas/

SVG

w3c标准：http://www.w3.org/TR/SVG12/
IBM DW教程：http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id=84896

支持：Firefox 1.5+, Safari 3.0+, Chrome 1.0+, Opera 9.0+
替代/过渡：raphael.js http://raphaeljs.com/

XMLHttpRequest 2

主要是增加跨域能力以及请求过程中的事件

w3c标准：http://www.w3.org/TR/XMLHttpRequest2/
MDC文档：https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
MSDN文档：http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

支持：Firefox 3.5+（实现了部分）, IE 8.0+（实现了部分）

Access Control

千呼万唤的跨域访问控制，目前firefox3.5和ie8有一些不同，ie8搞的XDR和XDM我也不知道是不是准备提交给w3c标准化的东西……

Access-Control-Allow-Origin: http://foo.example

w3c标准：http://www.w3.org/TR/cors/
MDC文档：https://developer.mozilla.org/En/HTTP_Access_Control
Cross-document Messaging (XDM)
MSDN文档：http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

支持：Firefox 3.5+, IE8.0+

E4X (ECMA-357)

Firefox和ActionScript3早就实现了的东西……不过其实现在json这么流行，有没有E4X好像都无所谓了～（瞎说的，其实在js代码里直接写dom对象而不是html字符串，会方便很多）

MDC文档：https://developer.mozilla.org/en/E4X

支持：Firefox 1.5+

ECMAScript 5 Native JSON

原生的JSON支持，速度和安全性都比eval强一百倍亚一百倍，另外要注意Douglas Crockford的json2.js是一个用js实现的js解释器，所以安全性更好

JSON.parse( text, translate )
JSON.stringify( obj, translate )
String.prototype.toJSON
Boolean.prototype.toJSON
Number.prototype.toJSON
Date.prototype.toJSON

MDC文档：http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
MSDN文档：http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx

支持：Firefox 3.5+, IE8+
替代/过渡：json2.js http://www.json.org/json2.js

ECMAScript 5 Array Extras

js1.6里实现的数组方法，主要是forEach, map, fliter这几个函数式编程里非常重要的方法，还有反向查询

Array.prototype.indexOf( str )
Array.prototype.lastIndexOf( str )
Array.prototype.every( fn )
Array.prototype.some( fn )
Array.prototype.filter( fn )
Array.prototype.forEach( fn )
Array.prototype.map( fn )

MDC文档：https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

支持：Firefox2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡：都可以通过扩展Array.prototype来模拟

ECMAScript 5 isArray()

区分数组和对象

Array.isArray([]); // true

支持：无
替代/过渡：Array.isArray = function(a){ return Object.prototype.toString.call(a) === “[object Array]“;};

ECMAScript 5 Object

用GOOGLE I/O演讲里的话来说：更鲁棒(robust)的对象系统

Object.getPrototypeOf( obj )

约翰同学的讲解：http://ejohn.org/blog/objectgetprototypeof/

支持：Firefox3.5
替代/过渡：object.__proto__ 或 object.constructor.prototype

Object.create( proto, props ) //克隆或继承对象
Object.keys( obj ) //数据结构的映射
Object.getOwnPropertyNames( obj )
Object.preventExtensions( obj ) //不能添加新属性
Object.isExtensible( obj )
Object.seal( obj ) //不能删除和修改属性的配置，不能添加新属性
Object.isSealed( obj )
Object.freeze( obj ) //不能删除和修改属性的配置，不能添加新属性，不能写属性
Object.isFrozen( obj )

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无
替代/过渡：Object.create和Object.keys可以自己实现

ECMAScript 5 Property Descriptor

对象属性的访问控制

Object.getOwnPropertyDescriptor( obj, prop )
Object.defineProperty( obj, prop, desc )
Object.defineProperties( obj, props )
desc = {
value: true,
writable: false, //修改
enumerable: true, //for in
configurable: true, //删除和修改属性
get: function(){ return name; },
set: function(value){ name = value; }
}

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

支持：无
替代/过渡：Object.defineProperties其实相当于jQuery.extend，用来实现Mixin

ECMAScript 5 Getters and Setters

python和ruby里都有的属性访问方法

obj = {
get innerHTML() { return …; },
set innerHTML(newHTML) { … }
};

MDC文档：https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+
替代/过渡：

非标准，Firefox1.5里的旧方法

HTMLElement.prototype.__defineGetter__("innerHTML", function () {});
HTMLElement.prototype.__defineSetter__("innerHTML", function (val) {});

支持：Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+, Opera 9.5+

标准

Object.defineProperty(document.body, "innerHTML", { get : function () {} });

MSDN文档：http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

支持：IE8+ (只能对DOM使用)

ECMAScript 5 Strict Mode

ES5的严格模式，删除了旧版本中容易引起问题的元素，并且会显式的报错，方便调试

"use strict"; //以下情况下抛出异常
//对未定义的变量赋值
//操作被设置为不可写，不可配置或不可扩充的属性
//删除变量，函数，参数
//在对象直接量里重复定义属性
//eval做关键字，在eval的字符串里定义变量
//覆写arguments
//使用arguments.caller和arguments.callee（匿名函数必须具名才能引用自己）
//(function(){ ... }).call( null ); // Exception
//使用with

约翰同学的讲解：http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

支持：无
替代/过渡：……从现在开始养成严谨的编程习惯

ECMAScript 5 其他新特性

传递函数的引用时，绑定this

Function.prototype.bind(thisArg, arg1, arg2....) /

支持：无
替代/过渡：prototype http://www.prototypejs.org/api/function/bind

ISO-formatted dates

Date.prototype.toISOString() // Prints 2009-05-21T16:06:05.000TZ

支持：无
替代/过渡：datejs http://code.google.com/p/datejs/

String.prototype.trim()

支持：Firefox3.5
替代/过渡：各种正则实现 http://blog.stevenlevithan.com/archives/faster-trim-javascript

===================废话又开始的分割线=======================

其实我把这个东西发出来是希望能促进创新的氛围，让更多人认识到很多新技术已经进入到“实用”阶段。

如果只是想做个实验性的webgame，或是只能用于特定平台的应用（比如iphone，greasemonkey），firefox3.5+webkit的支持就已经足够罢。

如果不能无视主流平台，有很多技术能让你gracefully degrade（优雅的退化）或者选取不同的方法实现兼容的接口。

如果你等不及IE x在若干年后实现xx，希望提前享受福利，有些技术的设计原则就是让你能在没有native支持的情况下可以自己实现一模一样的功能或语法糖（syntactic sugar），比如ES5对象的继承和访问控制，从ES4/ActionScript3时期那些老土的关键词（class extands private static）改成了Object.create(p, attrs).defineProperty(o, n, attrs).defineProperties(o, attrs).freeze().getOwnPropertyNames().map(fn)，不会只是为了酷炫罢……

很多人都喜欢抱怨“我这辈子都没机会用HTML5”，但是只要把视线从自己脚下那巴掌大块地移开看看别处，会发现世界其实一直都在改变喔XD

twitter like和传统论坛

Dexter.Yy — Sat, 16 May 2009 07:20:11 +0000

以前字符姐姐说我和绯雨叔叔都是彼得潘，另外我还以腹黑正太闻名，但是我也不得不承认，时间既是最难战胜的敌人也是最有价值的财富。如今面临的困扰，就是上网习惯变化很大，虽然firefox的书签工具栏上依然保留了很多论坛的链接（不常上的网站我都放到delicious里），但是别说跟人论战，就连踩遍各大论坛的时间也没有叻。我现在更习惯阅读feed（通过google reader和igoogle，后者类似报纸的体验）以及twitter模式的推送信息（通过桌面客户端和像friendfeed那样实时更新的网页）。

但是支持这种阅读习惯的环境却不是很理想（对国内而言）——SNS/twitter里的信息价值不高，多数都是缺少上下文的唠叨和零碎的感悟，以及只有熟人会感兴趣的琐事和闲扯；个人博客的内容同质化严重，而且热度早已降温，更新频率普遍下降（我除外喔，我更新一直都这么少XD）。大量有价值的信息仍然深藏在论坛和社区网站（其中我最反感的形式是通过积分或虚拟货币的形式设定阅读权限，人为阻止信息传播和再利用），没有进入社会化网络。其实我大学时做的最深的地下城，也出于类似的考虑：很多有价值的信息隐藏在论坛这种“深层网络”（或者叫黯网络罢~）中，只被社区内部的核心成员所熟悉，虽然这样能把讨论维持在较高的质量，也能保证读者跟作者的直接联系，但是如果能借助更开放更易于接触的平台来传播，原本可以影响到更多人。

插图：这张图是我的书签工具栏，除了这个地方，书签的其他位置不放东西，也就是让真正的常用网站都位于随手可点的位置，不常用的网站扔到另一个管理体系里

不过幸好技术的普及速度永远比用户习惯的迁移要快，现在很多论坛都开始提供feed了（感谢Discuz!），借助friendfeed就可以很好的转换成推送信息。

也就是在friendfeed里建一个group，把feed用custom rss/atom或blog的形式导入进去，并且勾选“Include entry description as a comment”，也就是把rss里的描述节点转换成friendfeed里的评论（毕竟仅凭一个标题链接，很难决定是否深入阅读）。然后设置deliver为IM方式，便可以通过gtalk接收信息了，感觉跟IRC或群差不多~

缺点是导入的评论全都会算到自己头上……

另外由于论坛feed通常只包含新主题，如果是像过去的NT那样，大家都愿意在十几页的回帖里长篇大论的拍砖并且跑题现象严重的论坛，就很难track到有价值的内容，不过对于那样的论坛，直接参与才是更好的阅读方式罢

这个是我刚刚弄的一个聚合，收集web前端技术的资讯和资源：

https://friendfeed.com/frontend-feed-cn

这个效果也很不错，track国内的SF/F社区：

https://friendfeed.com/fantasycn

但是接下来的计划就麻烦了…动漫方面，破狗，云中之类的论坛都没feed（用VBB不是错，但是要升级到新版哑！）

还想搞一个pc game的，但是TLF，NGA之类的站帖子太多……指挥官，铁资网之类的论坛也是没feed……让我感觉有折腾这个的工夫，还不如去打demigod……

柠檬基拉老爷提醒说有很多网页转rss的工具，这个我以前确实见过很多但都没怎么体验过，想来也不太靠谱………其实我觉得，一个真正的强者，在这种情况下就应该挺身而出，开发出一个兼具抓取，聚合，呈现，通知等功能的web应用，来满足自己的需求……当然由于我最近很懒，这个idea由我来实现的可能性小于10%罢……

我还是希望有更多社区网站都能以开放的心态，把自己的内容用更友善更易于传播的形式输出，开放永远是互联网的根基，而后web2.0时代的互联网应该是有机的整体，内容在一个站点产出后，可以通过“云”的加工变得更易于查找，更易于阅读，更易于传播，而互联网用户则能接触到更广阔更个性化的信息。

————————–肆无忌惮跑题的分割线————————–

PS：题图是我最近在追的新番《东之伊甸》，要素是：近未来，游戏规则，社会弊端，写实的科技应用（围绕手机），对西方电影的引用，整体风格非常像攻壳SAC，可惜……好像只会有11话，单季都不够哑！神山健治老师请多做一些类攻壳的作品罢！

另外最近还在追《苍天航路》，要素是气势！无论人物，动作，姿态，对话，打斗场面，都燃的像港漫，我觉得多看这个一定能改善我最近多愁善感的非主流形象，成为无所畏惧的强者挖哈哈哈哈哈哈～

写javascript是否要“预留退路”

Dexter.Yy — Tue, 20 Jan 2009 08:31:36 +0000

早上收到一封邮件，问的正好是我一直如哽在喉的事情：

对于web开发中的预留退路问题，我一直犹豫不决。在安全方面，自然是不能完全相信JavaScript，这点是确定的。但在用户体验方面，是否真的需要处处”预留退路”，照顾那些不支持JS或者对JS支持不好的用户吗？而UED工程师们又一直在说，不”预留退路”会惹恼数量不少的用户，但却从没有人提起具体会是多少用户、多少比例。不知道YY大神手里有这方面的数据吗？记得YY您在建立Limbo混沌海的时候，就选择了”不预留退路”的方式，不知当初又是出于什么原因这样考虑的呢？非常想听听您对”预留退路”问题的看法，期待您的回信。

这种设计观念，或者说原则，不管它叫什么名字，比如“预留退路”/“平稳退化”（Graceful Degradation），“渐进增强”（Progressive Enhancement），“不唐突的javascript”（Unobtrusive JavaScript）……从UE的角度来说是非常重要的，它的重要性不仅仅来自“有多少比例的用户不开启javascript支持”，而是因为如今访问web的方式正在变的越来越丰富多样，平板电脑（Tablet PC），上网本（netbook），掌上电脑（UMPC/MID），手机，iphone/ipod touch，这些平台有完全不同的性能，屏幕尺寸，浏览器，和操作方式，它们对javascript的支持也可能不一致（比如我以前抱怨过iphone的差别）。很多“严肃”的网站还需要考虑到“可访问性”（Accessibility），要保证能支持屏幕阅读器之类的设备，让那些有视觉缺陷的用户也可以无障碍的使用。此外还有语义网方面的要求，随着web2.0带来的海量信息，互联网也在向一台超级计算机的方向发展，需要靠网络本身去处理网络上的信息，而不是靠人的肉眼去一张网页一张网页的识别，现在的网页不仅仅是供人阅读，同样也需要面向机器，所以不能因为javascript的使用而影响到内容，让机器无法抓取和识别。

不过，以上这些观念有两方面的局限性：

第一，它们仅仅适用于传统的，“文档”式的网页，互联网的原始形态，只是内容的组织形式和传播手段，对于多数网页来说，内容才是根本，JS只是锦上添花，或者说是调料，最重要的是保证内容的完整语义，可访问性，以及适应过去/现在/未来的多种平台的能力。但是，除了“文档”类型的网页，现在也开始兴起大量的”web应用”，它们是在线的服务，也是在线的软件，对它们来说，浏览器是一个容器，网页是一种界面呈现方式，数据是异步获取的，频繁变化的，而且是细粒度的（比如并非一篇完整的文章，而是一若干来自数据库的字段），虽然同样以内容为中心，但是在这个语境里，“内容”是指纯粹的数据，而并非整块整块的HTML，一旦缺少了界面的交互功能，缺少了JS程序的支持，数据根本就无法呈现，也就根本不具备访问这些应用的条件，对于这种类型的网页来说，“预留退路”并非是不可侵犯的信条。

更多情况下，网页是复合的，会同时包含文档和软件应用的特点，于是就应该有选择的采纳那些适用于自己的原则，比如把JS和CSS与内容有效的分离，兼容多种平台，保证核心内容能被搜索引擎抓取，等等。

有一个很好的例子是土豆网的播放页，这是在土豆网全站当中，最重要同时也是web应用特征所占比例最大的页面之一，javascript和flashplayer对它来说是必不可少的基础运行环境，所以你可以看到它的html设计跟其他页面有很大差别：

script标签出现在html顶部——在其他网页里，我们习惯把css放在顶部，js放在底部，让页面先呈现，之后再附加行为，但是在播放页面里，播放器是最重要的内容，播放器加载的速度是最关键的用户体验。
HTML里会包含JS代码——只有一处，就是TUI.player.load，理由同样是为了保证播放器加载速度这个核心用户体验，不得不祭出document.write这种“非常不提倡”的必杀技来写入flash元素
有大量内容通过AJAX获取——比如评论，还有侧栏里的某些模块。因为它们是分离的数据，并非主要内容
没有使用正常的流式布局——player和toolbar都是脱离文档的独立区域，采用绝对定位
侧栏上的视频截图并没有把原始文件地址放在src属性里——延迟加载，如果不拖动滚动条，很多图片就不会无意义的下载

但是在很多方面同样也要做到Unobtrusive：

对于核心内容，比如视频信息，作者信息，都是遵循文档式网页的设计原则，对搜索引擎友好
在豆单播放页里，播放器下面的界面列表虽然是一个界面元素，但是也应该包含在文档的语义中，所以采用html的UL/LI来实现

第二个局限性是：这些原则早晚会过时。以前WaSP成员们千辛万苦推广这些观念的时候，互联网上到处都是惨不忍睹的网页，建立标准和规范，进行观念的革新，这些需求胜过了对技术的应用，而现在web标准早已普及，web应用需要进一步发展。以前Douglas Crockford，PPK在传道的时候，国外的网站还必须支持ie5.5甚至5.0之类的浏览器，恶劣的环境让web设计者和开发者们必须自我约束JS的使用，避免形成门槛。而现在，ie6在国外的占有率已经开始低于firefox（20%），很多网站已经开始放弃对ie6的支持，google和yahoo也在引导用户替换ie6。刚才我提到过，通过各种移动设备访问web的用户正在迅速增多，而这些设备对JS的支持不一致，但是这就像桌面电脑上的发展过程一样，同样是一个暂时现象，随着webkit变成iphone，android，palm pre这些新平台的统一标准，Mozilla也在积极把XUL技术应用到移动平台，环境的变化其实比桌面电脑要快的多。

我认为Graceful Degradation，Progressive Enhancement，Unobtrusive JavaScript这类东西都不适合过度的鼓吹，它们只是基础概念，是在特定时期特定环境中形成的经验和指导，而不应该是束缚前端开发人员和产品设计人员的教条，实际上，这些保守的观念来自技术的局限，而技术的局限不是我们逃避使用技术的理由，相反，我们可以仍然使用技术来打破这些局限，我们需要的是像ie7.js，excanvas.js，jquery.js这样的解决方案，而不是在开发中畏首畏尾，把每个前端开发者都教唆成原教旨主义者（上次我们公司的小麦对我说：前端开发都有这种倾向……我要说这是历史遗留的伤痕，将在世代中流传下去……）

================吐槽结束的分割线================

最后回复两个邮件里的问题……

关于用户的统计数据，土豆网是有的，可以想象由于多数用户比较大众和小白，IE6的比例相当高，比较冏的是，腾讯TT的比例也很高，等同于Firefox，我必须说它那种跟QQ绑定在一起，经常无意中启动，启动之后就设置为默认浏览器的套路，确实很强大……在普通用户当中，“默认”是强大的力量，默认的通常就是最熟悉的，最熟悉的就是最好的……不过，统计数据有时并不能真正反映出用户数量，比如Opera用户在你的统计数据里只占到0.01%，你就要思考一下究竟是Opera用户确实只有这么多，还是你的网站对Opera支持太差，导致人家都不来……

关于我的blog……其实我很早就计划重做这个blog了，现在的版本是一年半前的，从技术上来说很幼稚，我都懒得优化和修补了……但是，即使重做，我仍然不会把别人的“用户体验”放在第一位，就像侧栏里说明的那样：“优先满足个人喜好”。blog有很多类型，有的是个人媒体，有的是文集，有的是日记，有的是个性化空间，而我想要的blog是“个人信息聚合”，除了满足阅读的需求，必然还要包含大量个性化内容，也就是说，用户首先是我，其次才是读者和我的好友，而对于阅读者来说，浏览方式不止一种，比如我自己就更习惯用google reader来阅读blog，如果用户愿意选择网页形式来访问，就会被强加很多个性化内容，桀桀桀，喜欢的继续看，不喜欢的关掉页面离开，这也算双向选择罢……

新项目”YyOPML”——把OPML转换成web界面——大家一起来晒feed订阅列表吧！

Dexter.Yy — Fri, 30 May 2008 17:28:30 +0000

首先要说一下目前的矛盾现状：一方面feed订阅和在线阅读器都还不够普及，多数普通网民就算经常访问blog网站，也还没养成订阅的习惯，主要还是通过门户媒体获取资讯，另一个方面，较早开始接触RSS订阅的人——特别是那些blogger和互联网geek们——不但已经对各种在线或离线的阅读器了如指掌，把阅读feed变成了上网的主要活动和习惯，而且很多人收集的feed已经多到让自己烦恼焦虑的程度。后者努力的整理删减自己的订阅列表，前者却经常抱怨不知道怎么寻找可订阅的信息来源…………这种不平衡于是引发了一种禁断的活动——朋友之间交换OPML订阅列表……

OPML是Google Reader乃至所有阅读器都支持导入导出的一种XML规范的“大纲(outline)”数据文件（题头图片里那个蓝色的方块就是OPML的标志，跟feed的著名橙色标志对应，说实话写文前我还不知道OPML也有标志……囧），通常包含用户订阅的所有feed，之所以说是“禁断”……是因为交换这种文件，直接导入到双方的阅读器里之后，很容易使信息爆炸的程度翻倍，而且对于这些导入的feed，不能像原主人那样清楚来历和订阅的理由，于是也不知道该如何看……因此直接交换的下场通常都很惨……

这个项目就是我的解决方案：让导出的OPML源文件支持直接在浏览器里作为网页来展示，而界面上使用完全展开的并排布局，可以像hao123或谷歌网站导航那样一目了然的查找网址，让访问者自己来挑选值得订阅的feed。(不过，你要有使用标签分类feed的习惯，否则显示效果肯定不好…不过那样的话，就算用常规的树状布局，效果也很差的…)

以下是示例页面，这里的“dexteryy.xml”就是我从自己的google reader里导出的OPML文件，包含完整的订阅列表：

http://www.limboy.com/yyopml/dexteryy.xml

还有谁像我一样没什么隐私担心暴露愿意分享OPML的话，可以留下网址或opml文件，我会收集到上面来……

项目主页：http://code.google.com/p/yyopml/

下载程序源码：http://code.google.com/p/yyopml/downloads/list

使用方法是：用文本编辑器打开OPML文件，在第一行后面加上以下内容：

xml-stylesheet href="style/yyopml.xsl" type="text/xsl"?>

然后跟解压出来的style目录一起传到服务器上，保持在同一个目录里，就可以直接用浏览器看opml文件了。

目前我提供的界面主题有两种，都是如上所说的“网站导航”风格，一个是灰色的面板风格（默认），一个是GOOGLE风格，对应的CSS文件分别是style/ui/yyopml_panel.css和style/ui/yyopml_google.css

支持在页面里切换皮肤，如果要更换默认皮肤，请修改style/ui/yyopml.js里的以下代码：

theme = theme || "panel";

把“panel”换成你要改成默认设置的css文件的后缀，比如”google”。

也可以在网址里加上参数，直接调用某种皮肤，比如”http://www.limboy.com/yyopml/dexteryy.xml#theme=google“，可以用google风格作为默认皮肤打开页面。

==================面向Coder的分界线====================

源码包括一个用来把XML转换成HTML来显示的XSL文件，和界面效果相关的文件。其中yy_core.js是我开发中的一个轻量级/FP风格的javascript库，很多代码都基于jquery，同名的方法接口也尽量跟jquery保持一致，命名空间跟土豆网的js库一样叫“TUI”，提供DOM选择器（我重写的精简功能）和一些常用工具，比jquery小很多(压缩后12k)，这个东西其实年初就想发出来……但是后来懒了，这次考虑到完成度的问题，也懒得在google code里开项目了，源码包里的yy_core.js是一个base64压缩过的版本……

另外，yyopml.js里有一个滚动条插件，是做这个项目的时候心血来潮写的，可以用类似这样的代码：$(“.list”).scrollbar(); 给那些外部容器overflow:hidden，内部容器高度超长的元素加上CSS定义的滚动条，支持鼠标滚轮，因为是基于“迷你jquery”来开发，所以应该很容易改成jquery的插件，厌倦了overflow:scroll滚动条的同学可以参考一下。

iPhone App开发笔记

Dexter.Yy — Fri, 07 Mar 2008 19:04:13 +0000

第一，标题里的app指的是根正苗红老实本分的Web App，昨天的这个时候，对是在昨天，iPhone Web App就等同于iPhone App，咳咳，虽然现在不是了，但我这笔记是两个星期前的……

第二，不全，主要是我关心的一些细节，以及我自己理解的一些东西……

————————————懒得想小标题的分界线————————————

html里可以调用系统接口，比如电话拨号：

<a href="tel:1-408-555-5555">1-408-555-5555a>

还有mail和google map的接口……

————————————懒得想小标题的分界线————————————

在js里嗅探iphone的safari环境，要注意agent字符串里有额外两处：

“Mobile/1A543″，这个是iphone OS的操作系统版本（注意不是固件版本）
“iPhone”，这个是移动平台的类型，如果是ipod touch的话这里会是“ipod”

此外：

“version/3.0″，Safari的市场版本号
“Safari/419.3″，这个是build版本，虽然iphone跟osx一样都是safari3.0，但build版本号不同

完整的例子：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like
Gecko) Version/3.0 Mobile/1A543 Safari/419.3

————————————懒得想小标题的分界线————————————

调用css的时候，media类型支持CSS3，比如可以用“only”来屏蔽旧浏览器，用“(min-device-width: 481px)”屏蔽小屏幕手机。由于iphone里的safari不支持print和handheld的media类型，可以用它们来对iphone屏蔽一些css文件。
示例：

<link media="only screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet" >

也可以作为css选择器里，比如

@media screen {
#text { color: white; background-color: black; }
}

由于safari支持css3，你还可以享受到的福利包括在background里放6张图片做圆角，给文本加阴影，使用属性选择器之类……

————————————懒得想小标题的分界线————————————

iphone的浏览器里有一个很重要的概念是viewport（视区），系统默认的viewport为980像素，可以用meta标签指定，宽度范围从200到10,000，高度范围从223到10,000，还可以使用user-scalable禁止用户缩放页面（常见的iphone web应用，比如facebook,google reader，因为要仿原生界面，都是这样设置的），minimum-scale和maximum-scale可以设置缩放的限制，initial-scale是默认的缩放程度，范围从>0到10
示例：

<meta name="viewport" content="width = 320" />
<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />

iphone默认的浏览器窗口尺寸是: 竖向（body[orient="profile"]）为宽320px，高356px，横向（body[orient="landscape"]）为宽208px，高480px，但实际上这是显示了浏览器地址栏之后剩余的空间，往下拖动页面时，地址栏会隐藏，所以实际的viewport（竖向）是宽320px，高416px。
页面加载之后可以用 window.scrollTo(0, 1) 隐藏地址栏，自动使用最大化的viewport。

关于viewport，还有一个很重要的概念是：iphone的safari浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。所以不但iframe, overflow:scroll的元素没有滚动条，整个窗口也没有的，iphone的safari浏览器实际上从一开始就完整显示了这个网页，然后用viewport查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport…………由此引申出的结果很多，比如CSS里的 position:fixed 无效……

————————————懒得想小标题的分界线————————————

浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样：

所有hover动作，还有mouseover，都不存在，链接上的title内容，会在你点击链接并按住不动时弹跳出来（如果你不放开手指，继续移动的话，点击事件不会发生，具体原因下面解释）…………而mouseover，直接转换成了mousedown……

点击页面元素之后发生的事情很复杂…………比如当你用单指按住可点击元素（大约就是默认为block的元素），然后放开，首先触发的event居然是mousemove！接下来如果元素内容不变（这个条件比较难理解，我知道），会陆续触发mousedown，mouseup，click，如果内容改变，就不会再触发任何事件……

如果你恰好不太走运的给网页上一些inline元素绑过js事件（这比较常见，我也知道），比如span，有一个不用修改标签的方法是给它们都加上onclick=”void(0)”，这样iphone就会认为它们是可点击的元素-_____-b

如果按住元素之后移动手指，当然就不要指望会触发mousemove了，啥事情都没有，不过停下的时候，会触发onscroll （因为你刚才移动了viewport嘛……）

如果你用两个手指做缩放的动作，啥事件都不会有啦，但是如果你用两个手指在屏幕上一起移动，而且所在的位置是一个本来有滚动条的页面元素(比如iframe罢)，会触发一个叫mousewheel的事件（但是别指望iframe本身的内容会滚动-___-b）, 停止移动时同样触发onscroll。

OK，你希望像平时那样用onmousedown,onmouseup,onmousemove来做页面元素的拖拽交互把iphone web app的界面做的像原生界面一样活蹦乱跳的梦想已经破灭了，请努力克制骂乔布斯的欲望。

对了，不用我说也应该想得到，onkeyup，e.charCode，e.keyCode这类玩意都不能用罢？

————————————懒得想小标题的分界线————————————

默认的html控件的样式大家都已经知道很cool了，不过也可以自己修改，具体内容请查看《iphone用户界面指南》的第三章：Metrics, Layout Guidelines, and Tips

iphone里的safari调整了默认的文字样式，这些调整被包括在了一个新的css属性“-webkit-text-size-adjust”里面，相当于“-webkit-text-size-adjust:auto;”，你可以覆盖它，根据需要改成none或者200%

————————————懒得想小标题的分界线————————————

web app可以像原生应用一样，在home界面里上添加一个快捷方式图标，方法是增加一个link标签：

<link rel="apple-touch-icon" href="custom_icon.png" />

这是针对单个页面的，如果你把图片命名为“apple-touch-icon.png”，放在网站的某个目录里面，该目录下所有页面都会获得添加图标的功能……

图标的要求是尺寸57×57，png格式，不用画蛇添足的去做圆角渐变或玻璃反光效果，iphone系统会把图片自动裁剪和渲染成统一的风格……

喔对了……不要高兴太早……这个快捷图标的功能，只有1.1.3或更高的固件版本才支持……考虑到国内那些买旧版本破解机器还被商家反复叮嘱不要升级的用户……呃……

————————————懒得想小标题的分界线————————————

关于网页中的媒体文件，普通图片最大支持200万像素（jpg的话，最大可以显示出3200万的，不过超过200万的jpg都会被压成缩略图），支持的最大尺寸是2 * 1024×1024，gif动画最大支持2m（否则只显示第1帧）

iphone支持的视频格式：

H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile.
MPEG-4 Part 2 video (Simple Profile)
AAC-LC audio, up to 48 kHz
.mov, .mp4, .m4v, .3gp file formats

需要注意的是这里的“Baseline profile”，由于这种编码的质量跟“Extended Profile”和“main profile”相比效果比较差，目前主流的支持“高清”（h264）的视频网站，比如youtube，土豆，都没有采用Baseline profile压缩h264视频，所以iphone不但不能播放网络上流行的flv视频（因为不支持flash），连刚开始流行的h264也不能直接播放…………提供iphone应用的视频网站无法使用现有资源，不得不压缩iphone专用的视频文件，所以不要指望能立即在iphone上观看视频网站上的所有资源……T__T

由于iphone不支持flash播放器，视频文件只能直接嵌在页面里，用自带的quicktime来全屏播放，示例：

<embed src="screen.jpg" href="movie.m4v" type="video/x-m4v" target="myself" scale="1" ...>

更多细节请看官方文档：Including QuickTime In A Web Page

————————————懒得想小标题的分界线————————————

如果想全面了解iphone上的web开发，推荐阅读：

iPhone Human Interface Guidelines(官方还有一份名字类似的文档，简称OSXHIG，是界面设计者的圣经之一)

Safari Web Content Guide for iPhone

Web Page Development: Best Practices(这篇可以凑合看看，2月8号刚更新过的)

此外，ADC on iTunes里有好多iphone相关的视频，讨厌翻文档的可以去弄来看看，这可是iTunes store里少有的免费资源喔……

————————————懒得想小标题的分界线————————————

就像开头说的，这是2周前写的，一直懒得修改整齐了往blog上帖，但是昨天半夜（好罢是今天凌晨）在twitter上不小心看了iphone SDK发布的实况转播……我发现再拖延的话就只能贴到火星去了……

跟华丽的SDK相比，iphone safari上的开发环境可以说很糟糕，非常限制想象力——对javascript和RIA开发者来说，不过只要看看iphone用户上网的热情和相关数据，可以预见在很长一段时间里，iphone平台仍然会是立志开发web app的勇者们争夺的滩头阵地。

啊啊啊啊啊，2.10G的iphone_sdk.dmg终于下载完了，睡觉去……下周买《Cocoa入门–使用Objective-C》……

twitter,UNIX程序和互联网应用……

Dexter.Yy — Sun, 25 Nov 2007 13:30:25 +0000

我对twitter本身没什么兴趣，虽然它在IT圈子里是无人不知无人不用的东西，但我注册后一直没用过，不过我今天突然想在blog里加入一种更快捷更像说话或msn签名的更新方式，想表达观点或感想时可以直接说一句话，自动显示在首页上，而不用为此专门发一篇文章。twitter正好能完美的实现以上功能，还提供了很方便的gtalk机器人，所以我没有选择重新写代码，而是直接把twitter整合到blog里……

unix系统有一个理念是：“do one thing and do it well”，就是指每个程序/软件只负责做一件简单的事，但要把这件事做到最好。当其他人或程序也需要做这件事情的时候，都可以直接使用现成的应用，而不需要重复开发相同的功能（windows则不同，很多软件都尽可能做的大而全，程序之间没有合作，功能重复，随着版本更新越来越臃肿，包括微软自己的产品）。我觉得这种理念也很适合互联网，如果把互联网看作一个巨大的操作系统平台，实际上在很多领域都有那么一些出类拔萃的应用，第一名第二名统治了大部分市场（很多新应用根本就没有竞争者），如果它们能专心的完善本身的功能（像google那样），做到无法复制，无法取代，同时加强开放性，提供友好完善的接口，支持各种形式的mashup，就可以成为系统中必不可少的组成部分，每当用户或开发者有一种需求时，都会自然的去使用现有的那个web产品，而不是重复劳动，或是在上百种选择之间不知所措，用户可以消除顾虑，放心的贡献内容，积累使用经验，开发者也可以省去重新发明轮子的麻烦，集中精力去创新，解决问题或满足新的需求……

当然这只是我期望的理想状态，现实中很多网站，特别是国内网站，都喜欢向大而全的方向发展，不管是新闻，聊天，相册，视频，blog还是论坛，别人有的我也要有（在国内还产生了这样一种现象：都喜欢做社区，因为社区是包罗万象的，最容易扩张的），好像只有这样才能获得大量用户，才能靠规模效应赚钱。但是我觉得，假如每个网站都做成门户，又有几个能获得大量用户呢，相反如果专心的在一个很简单的领域做到最好，像feedburner, paypal, amazon那样成为市场垄断者，却可以获得市场中大部分的用户，甚至还可以成为其他网站的底层基础……

以上划分出了两种选择，一种选择是成为门户和社区，特点是大而全，一种选择是成为专业的工具，平台，或服务提供者，特点是“do one thing and do it well”。前者确实能做的非常成功，但是互联网好像只能容下少数几家这样的成功者。我觉得，那些掌握技术的人和掌握资源的人都应该把精力更多的放在后者上面……

有人会说，做单一的服务容易被人模仿被人复制，在激烈竞争中如果不扩张就没有出路，其实这方面最典型的例子莫过于国内的“三百家视频网站”，看上去很恐怖，其实能打的也只有土豆，油库和五六几家，做的早和做的好的仍然会是赢家。自己的事情都还没做好，就开始想扩张想“做社区”，有非常好的案例：抓虾和鲜果。

btw，这是我的facebook主页地址：

http://www.facebook.com/profile.php?id=701759082

我的twitter主页地址：

http://twitter.com/dexteryy

宅男行为统计工具

Dexter.Yy — Sat, 17 Nov 2007 07:34:40 +0000

昨天在机器上挂了一晚上RescueTime（具体的功能，请看E-space里的介绍），感觉还不错，有相同版本的windows和mac的客户端，运行时占资源很少，统计的项目不仅是软件，还包括在不同网站上花费的时间。web2.0网站都喜欢做用户行为收集/分析，数据挖掘，我觉得对个人而言也应该做一些类似的统计分析，并不是为了做时间管理（你看，我也不喜欢把自己榨干），仅仅是为了了解自己。套用Dakkon的话来说，”In knowing your time, you know yourself, and you know, now, there is very little you cannot do”。

我昨天晚上的统计图：

嗯嗯……看了4集kaiji…………

这种软件，尤其是在线服务，面临的最大问题就是隐私保护，你既然能收集用户使用软件和访问网页的信息，用户自然会怀疑你还能收集他的表单信息，帐号密码，聊天记录………………
rescuetime也做了详细的隐私政策说明：http://www.rescuetime.com/privacy/，不过我看还不够醒目，应该把链接做成大图标放到页面顶端去……

rescuetime存放log文件的目录：

Windows XP (and I’m pretty sure 2000, 2003, etc will also be in the same location – just not tested):
C:\Documents and Settings\\Local Settings\Application Data\RescueTime.com\logs\pending

Windows Vista:
C:\Users\\AppData\Local\RescueTime.com\logs\pending

OS X:
Macintosh HD//Library/RescueTime/Logs/Pending

这个客户端默认每隔2秒会获取你当前操作窗口的信息，记录到Pending目录的log文件里，每隔30分钟把log转移到sending目录，向服务器提交，我看了pending里的log文件，是yml格式(用过rails的人应该都对这个不陌生)，比如其中一个节点是这样的：

- os_username: Dexter-Grimoire\dexteryy
app_name: Firefox
window_title: ‘Mozilla Firefox’
extended_info: ‘http://www.google.com’
start_time: 2007-11-17 14:52:19
end_time: 2007-11-17 14:52:21

可以看到，记录的信息只包括：计算机名和用户名，软件名称，窗口标题栏名称，标签栏名称（好像只有浏览器有这个属性），开始结束时间……

透明，开源，这是消除用户顾虑的最好方式，rescuetime应该向last.fm的客户端学习一下（同样是收集信息）

ps: 又发现一个BUG, osx的某些程序窗口（比如磁盘工具和预览），rescuetime似乎识别不了，会弹出一个对话框，但如果设置了隐藏dock图标，就看不到对话框，程序实际上处于锁死状态，不再记录信息了…………唉，果然是beta版…………

魔戒风格的”web技术冒险地图”

Dexter.Yy — Wed, 14 Nov 2007 04:11:04 +0000

其实这张手绘地图的名字应该是“和谐web，和谐世界”（The Web is Agreement） ….

地图从左到右是作者心目中的善良阵营和邪恶阵营……开源社区、创作共用协议、web2.0里的blog圈,tag,mashup技术，RDF, RSS之类的开放架构都在左边……而微软的FUD，DRM技术，病毒，垃圾邮件，SOA之类的企业架构被放在右边……出人意料的是“google的全知全能之眼”也在邪恶一边，是因为google的平台不够开放还是因为用户隐私问题？

中间的圣山顶端是W3C组织和IETF，很多人在下面争吵和游说……

地图从下到上的象征意义比较复杂，有点像web技术从简单到复杂，也像是从前端到后端的关系……最下面是最简单的URL地址和REST/HTTP架构的设计者Fielding博士……往上是各种前端技术，javascript/ajax是一座跨越“富用户体验”的桥梁……最上面的终点是一片混沌，叫做“不兼容的大漩涡”，右边的魔多软件（微软）往里面排入ie，activex之类的私有技术，左边的开源社区往里面排入更多的技术，产品和代码……从 perl, php，java到linux……

还有很多很多细节……总之这张地图告诉我们的是：web技术这个世界很危险……好孩子不要来玩……

注释版，下载PDF

p.s. 这个东西我准备用大度4开的80克哑粉纸打印，裱起来帖到公司墙上……

再p.s. 我的桌子搬家了：

不过窗外的景色很无趣……很乏味……

服务器扑掉3天的原因……

Dexter.Yy — Thu, 19 Jul 2007 14:39:19 +0000

从周一开始，BLOG无法访问，FTP也不能登录，目前我的BLOG和其他个人项目，都是放在盘古的合租服务器里，机房在重庆，但是查看路由就会发现根本访问不到服务器的IP：

traceroute to www.limboy.com (219.153.7.230), 64 hops max, 40 byte packets
1 192.168.0.6 (192.168.0.6) 117.929 ms 4.141 ms 0.582 ms
2 192.168.1.3 (192.168.1.3) 0.924 ms 1.114 ms 0.815 ms
3 222.66.106.193 (222.66.106.193) 3.843 ms 2.707 ms 1.569 ms
4 10.0.1.17 (10.0.1.17) 3.616 ms 21.227 ms 29.201 ms
5 218.1.21.253 (218.1.21.253) 4.599 ms 5.930 ms 30.725 ms
6 218.1.21.249 (218.1.21.249) 49.200 ms 21.189 ms 27.175 ms
7 221.133.230.1 (221.133.230.1) 22.736 ms 26.635 ms 28.824 ms
8 61.151.252.37 (61.151.252.37) 59.189 ms 6.389 ms 6.187 ms
9 61.151.250.49 (61.151.250.49) 22.326 ms 11.619 ms 6.467 ms
10 61.152.81.46 (61.152.81.46) 32.429 ms * 10.027 ms
11 202.101.63.242 (202.101.63.242) 68.323 ms 20.295 ms 33.171 ms
12 202.97.34.133 (202.97.34.133) 40.942 ms 33.185 ms 32.624 ms
13 202.97.53.86 (202.97.53.86) 33.241 ms 32.021 ms 29.937 ms
14 * * *
15 * * *

202.97.53.86是电信的骨干网节点，从盘古客服得知，电信的说法是骨干网服务器有故障，但没说过何时修复，三天过去了，这个BLOG终于重见天日，却不是因为电信解决了“故障”，星服务器（也就是我参加合租的那台）的用户现在得知，我们在无法登陆星服务器的同时，却都能登陆其它服务器，而其它的用户都能登陆星服务器，也就是能登陆其它的IP段，这与电信的解释相矛盾……

这再次证明中国的网络环境是非常fantastic的……

我不知道这次“故障”的真正原因是什么，用myIPneighbors可以方便的查到与同一台服务器的其他网站，我查了一下自己的，除了菅野洋子中文网、以前在CGT公司的同事搞的d5power工作室之外，没看到其他熟悉的网站，也没看到不和谐的东西……

新作品：可以自由编辑的Google地图，700行javascript+70行php

Dexter.Yy — Tue, 13 Mar 2007 10:20:23 +0000

以前在龙骑士城堡提过一种想法，就是用GOOGLE MAPS来做桌面游戏玩家的主题地图。当时推荐的是EEMAP的服务，然则这个网站的注册一直需要邀请码，很不方便，而且界面难看，速度也很慢……

当时就想过自己来做一个GOOGLE MAPS API的应用，但一直没时间看API文档。这几天总算有空闲（辞职就是好哑），把想象中的东西基本上做出来了，我把它叫作Free Map Folio v1.0（取自DND设定集的名字），可以像维基百科那样自由编辑，前端是静态的HTML，数据库用xml，方便部署，而交互操作的程序完全用Javascirpt来写，只需要打开一个HTML页面，然后整个使用过程都不需要刷新页面，也不需要从外部获取数据（只用AJAX提交数据）。

实际应用：桌面游戏玩家主题地图（乱加东西要记得删掉）——http://www.ntrpg.org/yy/maps/
演示地址(上面的镜像)：http://www.limboy.com/project/maps/

Javascirpt的主要代码有700行，都写在一个对象里(yymap)，我本来想把每个单独的功能都封装起来，避免重复代码（DRY原则？），不过后来页面右侧栏加入了“地点列表”之后，程序就改复杂了……………以后有空要做一下重构……

用户只需要访问一个静态的HTML页面，唯一一次从外部获取数据是在地图加载的时候，用了API提供的XmlHttpRequest对象，非常方便，比如GXml.parse可以把responseText获得的文本转换成XML DOM。不过用GXmlHttp和GDownloadUrl的时候，IE7都会遇到一个缓存问题（IE6没试过）：刷新页面后，不会重新下载XML文件，因此页面上的数据不会更新。解决方法是在xml文件的地址后面加随机参数（感谢tinyfool的帮助）：

var ramnum = parseInt(100000*Math.random());var request = GXmlHttp.create();
request.open("GET", "db.xml?x="+ramnum, true);

标记（Marker）的样式可以自定义，所以我做了一个选择图标的功能，先建立所有图标的基本属性（yymap.baseIcon），包括阴影图片和各种尺寸，然后在创建新标记时，根据用户选择的图标，把地址传给icon.image就行了。其实还可以做一个自定义图片的功能，允许用户在编辑器里上传自己的图片（比如照片）当作图标，只是必须把图片处理成固定大小的32位PNG……

点击标记弹出的信息窗口是最麻烦的东西，因为页面里同时只能存在一个信息窗口，而信息窗口里的内容也不能保存在标记的对象里，所以要修改某个标记对应的信息窗内容，就只能修改它的点击事件：

GEvent.addListener(marker, "click", function(){
yymap.whenClickMarker(marker,info,point,icon.image);
});

我在点击事件里传了4个参数：点击的标记对象 , 信息窗的内容, 标记的经纬度, 标记使用的图标，除了用来显示信息窗，也是为了把它们传给全局变量（因为编辑这个标记的时候会用到）。

为了让右侧栏列表与地图上的图标一一对应，我在列表的每个链接上设了跟标记对应的ID，每次做添加、编辑或删除的操作时，除了修改标记本身的点击事件，还要用ID找到列表上对应的链接，修改链接的点击事件…………总之，感觉这个侧栏列表很添乱……却又是必要的功能……

在我写这篇文章时，还有一个搜索地名的功能没做好。本来API提供了地理译码的功能，可以把符合格式的地名转换成JSON数据（用JS对象来传递数据的格式），但这么方便的东西我却享受不了——地理译码还没有支持中国的地名…………在地图上就能很明显的看到：周围日本、印度，都有详细的城市名字，放大后还有交通信息，而中国是一片空白…………

因此对于不熟悉地理的用户来说，要在这样的中国地图上找到某个城市可能太难了，搜索地名是必须的功能。由于没有地理译码，目前使用GOOGLE MAPS API的网站，比如EEMAP，都是自己建立地名和经纬度对应的数据库。我找到了一个很全的“乡镇级中国行政区划地标”，是GOOGLE EARTH用的KMZ文件，但其实就是压缩过的XML，用WINRAR打开就能看到一个KML文件，可以直接拿来当搜索数据库。我考虑过两种实现方法：把用户输入的中文地名用AJAX发给PHP，让PHP搜索这个XML文件里匹配的标签，然后返回相应的经纬度；或者直接用GXmlHttp下载XML，然后用JS的DOM方法来搜索相应的标签，第二种方法很合我的胃口，不需要借道PHP，遗憾的是…………这意味着搜索时要用AJAX获得19M的XML数据……

更新：地名搜索已经完成了，模糊搜索范围包括省会、地级市、县城、村镇……足行匹配，搜索对象在KML文件里排名越靠后，搜索时间越长，不过最多应该不超过5秒……

我刚才测试了一下，搜索不到结果时4.36s，搜索最后一个地名“番阳”需要4.02s，搜索北京1.16s，搜索克拉玛依只需要华丽的328ms

php是由以前的同事Skylin帮忙写的，由于PHP只负责根据AJAX提交的数据，修改XML文件，所以内容很少……然则Skylin不肯用PHP5自带的XML类，而是自己写正则……最后代码只有几十行……果然是高手风范……

比如，这是remove.php:

include "./globals.php";
$file_content = join('',file("../db.xml"));if(preg_match("/rn".intval($_POST['id']).".*rnrn/isU",$file_content,$array))
{
$file_content = str_replace($array[0],'',$file_content);
}
$fp = fopen("../db.xml","w+");
flock($fp,LOCK_EX);
fputs($fp,$file_content);
flock($fp,LOCK_UN);
fclose($fp);
?>

不过正则也容易出现问题，例如：在我最初做的XML数据库里面，标签的前面都有缩进，大概因为有的缩进是TAB，有的是空格，导致正则一直出错，只好把XML里的缩进全部删掉了……

目前已经全部完工，可能还有一些小BUG需要修改，比如：在简介里输入全角字符（比如·和——），会导致后面的字符都无法保存。P.S. 单引号、双引号和”&”容易引起JS错误，我把它们都屏蔽了-_____-b

对Bloglines说再见!

Dexter.Yy — Fri, 29 Sep 2006 15:16:23 +0000

我似乎是从两年前开始接触”订阅XML”这个概念的, 那个时候提供FEED的大型网站很少(特别是中文的),我接触到的BLOGMEDIA也不多,不过我对新事物总是很有兴趣的——不论它最初看上去是否实用,所以我从一开始就安装了功能强大的RSS阅读器（叫作NewzCrawler）,还搜罗了几十个网站的FEED……其实也没有真正的用过几次……

这个叫“边栏”

对于不提供RSS的网站，我最有怨念的就是ENWorld，作为全世界最权威最专业最活跃的D20角色扮演游戏网站，不能订阅实在是很可惜的事情。不过他们毕竟是以社区为主，可能更希望让用户直接访问网站，虽然ENWorld网站用的Vbulletin Advanced CMPS没有RSS功能（vBulletin Board就是大名鼎鼎的“VBB论坛”），但只要他们愿意，其实也可以装RSS feed module

而在今天，一个提供资讯的网站如果不提供RSS，已经是很不可思议的事情了，我订阅的FEED也超过150个，RSS阅读器几乎成了生活的一部分……而且也更换过很多次：

NewzCrawler — FeedDemon — GreatNews — gougou — Sage(Firefox) — Google Reader — Bloglines — 抓虾 — Bloglines — Wizz RSS News Reader(Firefox) — Bloglines

其实我至今对NewzCrawler仍然印象很深，比如消息泡、滚动新闻、黑底绿字有点MATRIX感觉的皮肤，但是它对中文支持不好，占用资源多，有一次还把我收集的FEED都弄丢了-___-b，然则当我用了名气更大的FeedDemon和GreatNews之后，发现它们也好不到哪去，有些功能还比不上NewzCrawler……

以后就没有再用过桌面软件形式的RSS阅读器了，在线阅读器的优势明显，不用等待同步下载，能在不同的地点浏览和订阅，访问链接更方便，还可以在线收藏和分享。我最开始用的是国内的gougou，这个网站的创始人是前网易内容总监李学凌，他的另一个项目，玩WOW的大概都知道——多玩，以转帖出名，号称web2.0……从那时到现在，gougou就几乎没有什么改进，他们似乎以为模仿Bloglines就足够了，但Bloglines万年不变是有资本的……

于是我就投奔Bloglines至今，虽然有时也用Google Reader，但总是不习惯它的操作方式。抓虾曾经让我很着迷，AJAX技术和UI的设计都很有趣，速度快，帖标签收藏的功能也很棒，但是它刚好没有Bloglines的对外发布功能（就是像这样），因为我需要一种与RSS阅读结合的网摘服务，而且想让它自动更新到Blog上，所以最后还是决定继续用Bloglines，虽然有些不情愿……

今天我终于可以对Bloglines说再见了，因为那家不断创新不断完善总是优先考虑用户体验的伟大公司终于发布了新版的Google Reader！

这次的改动非常大，最明显的变化就是页面布局变成了Bloglines的传统两栏模式，以前其实也是两栏，但是左栏只能显示文章标题，右栏只显示一篇文章的内容，选择不同FEED和标签时还要点上面的下拉菜单，虽然用AJAX技术，但页面结构不符合用户的习惯，操作反而变复杂了。新版在左栏显示FEED列表，右栏显示文章标题和内容，一个页面里显示的信息量更大，操作也更方便。可见Google虽然也会像apple那样推出一些超出时代和用户需求的新产品，领导行业的趋势，但比起抄作和标榜个性，Google仍然是把用户体验放在第一位的，他们敢于承认错误，他们会推翻原有的创新——如果它让用户不习惯——而不是固执己见把用户都当傻瓜。我觉得这是很值得学习的。

除了页面布局，Google Reader还有几个很有用的改进：

1.右栏集成了标题显示模式和文章显示模式，在文章显示模式下，可以“无限滚动”，也就是用AJAX技术，在滚屏过程中加载更多文章，比起抓虾的分页和Bloglines的“显示全部”，这种方法既不占用资源又能保证操作的流畅性，滚动过的文章还会自动标记为已读（可以在设置里取消）。标题显示模式跟GMAIL一模一样（因为是用Google Web Toolkit做的？），点击标题后文章直接显示，我很喜欢这种操作方式。

2.每篇文章都包括了add star和share的按钮，可以很方便的收藏和分享文章，share的文章会在一个公开的页面里显示，就像这样，这正是我想要的功能哑，这个页面不但提供RSS，还能“Put a clip on your site”，也就是在自己的Blog里调用，Google提供了现成的调用脚本，可以设置颜色数量等，我已经在Blog里加入了这个模块，YY’s Digest从现在起由Google提供支持。

3.左栏的FEED列表可以显示未读文章的数量,而且有更新的FEED会高亮显示,还可以只列出更新过的FEED

以前我提到过,Google Reader新出了一个功能很强大的官方插件,建议添加到Google个性化主页和Google桌面里,与Google Reader配合使用。

暂时还挑不出Google Reader的毛病，用过一晚上感觉非常好，而且比Bloglines效率高多了，所以我决定把它作为主要的阅读器。再见啦！Bloglines，你如果再不努力，会变得跟hotmail一样喔！(以上文字请用少女的语调来读)

Google个性化主页也有TAG分页功能了！

Dexter.Yy — Fri, 15 Sep 2006 13:39:28 +0000

了解web开发的人都知道，是Google带动了Ajax技术的流行，作为最经典的应用，Gmail、Google Maps和Google个性化主页都被无数网站模仿和借鉴，其中Google个性化主页的拖拽技术似乎是最受欢迎的，在网络上有大量讨论，有形式各异的代码，很多JS库里也提供支持（比如DOJO），所以……这种当初看上去很新奇很COOL的效果，现在已经泛滥了，连Chinaren都在用……Google个性化主页的光环也变的暗淡了，一些专业的个性化主页网站（或者说是个人Portal）在视觉效果和易用性上都超越了GOOGLE，比如pageflakes、Netvibes

我以前一直把Google个性化主页设为浏览器主页，然则后来添加的插件太多，页面加载速度很慢（有时还受GFW的影响），UI越来越不能让我满意，作为RSS阅读器，实用性也不够……所以我有段时间开始用pageflakes（其实它的速度也不够快……）

不过Google确实一直在改进它的服务，前段时间增加了最小化按钮，今天我把GOOGLE的界面语言改成英文（其实是改成了“骇客”），发现Google个性化主页已经加入了TAG分页功能，这是一个相当重要的改进，实际上我就是为了分页才去用pageflakes的，有了TAG，插件就不用都堆在一个页面里，不但能加快访问速度，视觉上也更简洁，操作更舒服，而简洁和易用性本来就是Google最大的特色。

与pageflakes比起来，Google个性化主页虽然不够漂亮，但它的插件数量和质量要远远超过其他网站，而且与Google的服务结合的更紧密，比如用AJAX获取结果的MINI搜索，功能齐全的Google Calendar，书签插件是直接读取Google Bookmarks的homepage标签，Google Group,Goole Maps,Google Video…都有相应的插件，最华丽的是新出的Google Reader插件，直接按分类来浏览Google Reader里的所有FEED，可以上下滚屏，点击后会在当前页面显示详细信息，这设计真是太棒了……GOOGLE个性化主页的实用性因此提高不少……

pageflakes里有的box.net插件、Del.icio.us插件……Google里当然也有，还有很多FANS在继续制作新的好东东，所以，无论从页面设计、实用性还是用户支持上考虑，Google个性化主页都仍然是我的首选，我今天又把浏览器主页改回来了……

PS：仍然有一点不满意的地方，就是pageflakes里添加的FEED模块虽然也只是显示文章标题，但鼠标滑过时会出现注释框，显示详细信息，Google如果也能具备类似的功能就更方便了……

CodeX Apps原来就是一大堆PHP文件……

Dexter.Yy — Thu, 07 Sep 2006 13:16:34 +0000

前几天看到了CodeX Apps个人版可以免费下载的消息，今天试用了一下……安装时什么提示都没有，直接塞进了C盘，还弹出一个命令行窗口，里面写着阿帕契服务启动……我差点晕倒……

幸好这个阿帕契与其他服务器设置没有冲突。仔细看看软件的根目录，果然安装了完整的PHP运行环境（还装了Zend……），一个叫“Web 2.0”的目录里还有大量AJAX库。也许是我孤陋寡闻，但这种纯WEB架构的软件我还是第一次安装……

试用了一下，功能和UI设计都很棒，如果有一台稳定的服务器运行这套软件，我可能会考虑长期使用。这个软件由两个部分组成，个人网络活页夹，和团队项目管理，网络活页夹的设计相当有创意，帮助文档中声称该软件的个人信息管理功能在OA软件中“无人能匹敌”，而且能与团队协同办公完美结合。

这个网络活页夹实际上就是一个制作个人页面的向导和管理系统，你可以在活页夹里新建一个页面，编辑标题和正文内容，上传相关的图片、上传相关的文件，设计列表（可以做成TODOLIST，也可以做成分类列表），加入注释/备忘录，加入其他页面的链接。这样一个页面可以直接在网络上公开，其他人不需要安装客户端软件就可以查看，也可以导出到硬盘，变成一个静态的网页。利用这个网络活页夹提供的功能，你可以轻松的制作出多种用途的页面，比如个人计划、相册、交易的单据、个人简历……右边这张图是一个页面的范例：

具体的操作和功能就不介绍了，这里有一个中文的在线使用手册

实际上，这个软件最让我感兴趣的是它的UI设计，虽然完全由PHP网页构成，但它的交互功能甚至比许多桌面软件都要做的好，处处都可以看到AJAX技术。界面的设计也非常漂亮，有MAC软件的风格。总之……非常值得学习……也许我应该建议经理大人在公司的服务器里装一个玩玩……

用GMAIL来整理计划、做时间管理

Dexter.Yy — Wed, 30 Aug 2006 12:33:12 +0000

在时间管理方面，国外有本书很流行：Getting Things Done——The Art of Stress-Free Productivity，台湾的译本叫作：《搞定！2钟轻松管理工作与生活》，也有简体中文版：《尽管去做——无压工作的艺术》

这个东西简称GTD（Getting Things Done），网上有大量与之相关的讨论和应用……简单的说，就是强调要把头脑里考虑的事情都整理出来，把大脑清空，然后把每件事情分门别类放进一个“INBOX”里，找出马上能动手做的事情（比如能在2分钟内完成）尽快解决，而其他事情就要分成很多类别，让自己一目了然……具体的东西，可以参考这篇文章：《GTD的基本理念、方法与网络资源》

但是这种理论要实际应用起来，很明显需要一种自动化工具——要是真的有人愿意用纸和文件夹来做GTD分类，那他一定是闲人，并不是真的需要“时间管理”——而最适合作为GTD工具的，很明显是PDA……这种东西并不是每个人都有的。最近我找到了一个叫GTDGMAIL的工具
，看名字就知道，就是利用GMAIL来做GTD管理，方法是安装一个FIREFOX扩展

然后你的GMAIL界面上就会增加很多跟GTD有关的东西,如右图：

在图中的安装向导栏里添加标签，然后GMAIL的界面就是这个样子：

这些标签分为C、S、R三大类，Contexts就是把事情初步整理出来，根据性质进行分类，比如这件事需要用EMAIL交流，就归入“C:Email”，需要等待别人做的事情，就归入“C:Waiting”。Statuses就是做事的计划，能马上动手做的事就归入“S:Next Action”，交给别人做的事情归入“S:Waiting On”，不确定什么时候能开工的事情归入“S:SomeDay”……至于References，里面那两项的意思就很明显了……

标签做好以后……如果你像我一样，有一个定居在美国的老板，而自己又在劳动力成本低廉的乡下城市武汉工作，每天老板都要从纽约发一大堆邮件过来指派任务讨论工作……那么你就可以直接给这些邮件帖上GTD标签了……

当然更多情况下需要自己来记录一些事情，这样就必须自己给自己发邮件，如果设置好相应的过滤器，就可以把这些邮件自动归类：

在GMAIL里，如果你把邮件地址写作xxx+yyy@gmail.com,程序会忽略“+yyy”，仍然把地址看作xxx@gmail.com。所以这里的收件人地址可以这样写：dexter.yy+Task@gmail.com,这样就能很方便的与其他邮件区分开，让过滤器把它归档到“S:Action”标签……

实际上这个扩展提供了很清楚的说明，帮助信息都整合到GMAIL界面里了：

在你写新邮件时，还会看到两个新的选项：Send Myself a Task和Send Myself a Reference，点击之后就会自动帮你填写刚才那样的收件人地址，你只需要写事情的标题和内容，然后自动归档……

总之……我觉得这些功能还是有一定实用价值的，而且不算麻烦。对于那些把GMAIL当作第二首页，每天都习惯性的挂在上面的人来说（或是像我一样用它来跟MSN联系人聊天），能给GMAIL增加新功能，又能体验传说中的GTD，这是多么美妙的事情哑！

当然，这意味着又要给公司电脑里的FIREFOX装新扩展了……

P.S.关于时间管理，还可以看看这篇文章：Do It Now，作者：Steve Pavlina（很著名的BLOGGER，自由职业者）

9月8日更新：感谢sam merlin（ssammerl@gmail.com）发来邮件分享自己的体验和看法:

我自己也试验了一下
对于我自己的使用经历，我简直不能控制自己不把它说出来（奇怪？又没人给我money）
之前我在纸张本和dopod575上做任务管理,出现象”某个事情是几个任务中共有的环节”这种，往往搞的把该环节臃余给每个任务一份，很混乱。查阅相关前后任务也比较麻烦

gmail的可以随便贴n个标签的特性非常合理而不可思议的解决了这个问题，而且我刚发现它的搜索能进行

label:homework (label:Next-Action OR label:Action) -label:Finished

这样的查询，配合calendar，
简直和用一个精简版的ms project没有什么两样

总之者东西把gmail的label和seach特性的潜力发挥到了及至

不知道ppc/sp上会不会出现这样的软件，project到底还是大了点，专业了点，而ce
outlook处理子母计划有困难，listpro处理时间和周期计划比较难差

enen，追加，一高兴光夸了，这个东西还是有几个不足，首先(现在知道了)，当变换标签的时候（next→action，action→finished）一定要先加新标签，后删老标签，要不然标签一删信就不知道跑什么地方去了，另外最大的问题还是国内gmail会不定期给reset掉，苦恼。

继续试验中，enen

关于“标签一删信就不知道跑什么地方去了”，我想这些邮件肯定是自己给自己发的，而且在过滤器里设置了“将被过滤的邮件存档”，这样做会把邮件移出收件箱，只在标签页里留下备份，删掉标签，备份自然就删掉了。不过也有补救方法……因为都是自己给自己发的邮件，在“已发邮件”里都可以找到备份……

另外再补充一点，用GTDGMAIL要注意利用GMAIL的回复功能，比如用来更新事件状态。同一邮件的回复都在一页里显示，管理起来更方便

YY in Limbo 混沌海狂想 » web服务/应用

《新版阿尔法城背后的前端MVC实践》的幻灯片和⋯⋯这次没剧本⋯⋯

Google的大危机——本地app重新流行！浏览器和web已死？

Google I/O大会keynote摘要

VP8开源，免专利费，发布新的web视频格式 WebM

几乎所有浏览器厂商都宣布支持VP8：

Adobe发布HTML5开发工具

Chrome Web Store

Google Wave正式开放，包含一堆API和扩展机制，跟gmail整合

API更新

Google Web Toolkit 和 Google Ap Engine

HTML5, CSS3, ES5…新的web标准和浏览器支持一览

CSS3 Media queries

CSS3 2D Transforms

CSS3 Transitions and CSS Animations

CSS3 Downloadable fonts

附赠：其他CSS3 property的兼容性

HTML5 DOM Storage

HTML5 Offline Application Cache

HTML5 Database Storage

HTML5 Web Workers

HTML5 Geolocation

HTML5 Drag and Drop

HTML5 Audio and Video

HTML5 Canvas

SVG

XMLHttpRequest 2

Access Control

E4X (ECMA-357)

ECMAScript 5 Native JSON

ECMAScript 5 Array Extras

ECMAScript 5 isArray()

ECMAScript 5 Object

ECMAScript 5 Property Descriptor

ECMAScript 5 Getters and Setters

ECMAScript 5 Strict Mode

ECMAScript 5 其他新特性

twitter like和传统论坛

写javascript是否要“预留退路”

新项目”YyOPML”——把OPML转换成web界面——大家一起来晒feed订阅列表吧！

iPhone App开发笔记

twitter,UNIX程序和互联网应用……

宅男行为统计工具

魔戒风格的”web技术冒险地图”

服务器扑掉3天的原因……

新作品：可以自由编辑的Google地图，700行javascript+70行php

对Bloglines说再见!

Google个性化主页也有TAG分页功能了！

CodeX Apps原来就是一大堆PHP文件……

用GMAIL来整理计划、做时间管理