存档在 2008 年 09 月

关于OPENID

2008年9月22日

一直想做一个带有openid的应用,

因为openid是一个理想的用户管理系统,

不用到哪个网站都注册一堆用户,

然后一个提供openid的服务器,就可以访问所有接受openid登陆方式的网站。

openid就像护照一样,你不需要成为其他国家的公民,你只需要拥有证明你自己身份的护照,就可以去接受你的护照的国家旅游,学习等等。

是不是很理想呢?

你的网络账户,集中在一个地方维护,也许和其他人的维护地方不一样,但是这个账户是通用的。

多么美好的东西。但是在现实中实现这样的天下大合还是有一定的距离的,

虽然有一些大网站已经提供了openid登陆的方式。

以后我的应用也要支持openid

 

今天学习Essention ActionScript3.0

2008年9月20日

看完了6章,大概100多页,

对于AS3的概念有了一些基本的认识,比如它的public,internal,protected,private关键字,

AS3没有abstract类和方法,

AS3的setter和getter方法也很特殊等等.

900+页的书,看了1/9今天,

明天继续陪老婆去参加医师资格考试,本来准备带PSP甚至笔记本电脑,现在想想还是算了,

好好学习,抓紧学习,尽快掌握AS3才是正道.

考试不能提前交卷应该人性化一点

2008年9月20日

今天陪老婆去中医药大学参加医师资格考试,

老婆在考试之前一直说会提前交卷出来的,

考试的题目都是选择题,根据我的经验,做题时间不会太长,剩下的就是检查校对的时间。

结果等到考试结束铃声响起,老婆才出来,没等我问就先说了,考试不让提前交卷。

补充一句,我老婆是一个怀孕8个月的孕妇。

出来之后她说比较吃力,不是卷子做的吃力,是体力上吃不消。

2天的考试需要4次2个半小时。

不能提前交卷的话只能希望她坚持住了,

做完了就趴在那里睡觉吧。

Gears架构页翻译

2008年9月17日

很粗,错漏也一定很多,自己也处于理解阶段,有不足还望大家指正。

 

Architecture

During development of Gears, we experimented with many different architectures for offline-enabled web applications. In this document we briefly look at some of them and explore their advantages and disadvantages.

As we experimented, we found some common themes. All the offline-enabled applications we created had the following design issues that needed to be addressed:

isolating the data layer

deciding which features to implement offline (connection strategy)

deciding on the app’s modality

implementing data synchronization

 

架构:

在开发Gears的过程中,我们尝试了不同的离线WEB应用程序的架构。在尝试的过程中,我们发现一些通用原则。我们创建的所有离线程序具有下面的设计目标需要达到:

1-独立的数据层

2-判定哪些功能需要实现离线功能(联线策略)

3-决定应用的形式

4-实现数据的同步

 

Isolating the Data Layer

In most web applications today there is no real data layer.

 

独立的数据层:

在目前的大多数WEB应用中没有真正的数据层

AJAX calls originate throughout the code, without any single clean communication layer. This is usually fine for AJAX applications because there is only one data source: the server. In effect, the API that the server exposes to AJAX acts as a data layer.

 

在代码中贯穿了ajax调用,没有任何单一干净的通信层。这对于ajax应用一般是可以接受的,因为仅仅有一个数据源:服务器。实际上,服务器响应Ajax行为的API扮演着一个数据层的角色。

 

 

Architecture with a data layer

In general, isolating the data layer is a good first step.

When you add a local datastore to your application, you will have a single place through which all data storage and retrieval requests pass.

 

一个数据层架构

一般来说,独立的数据层是一个好的开始。

当你添加一个本地数据到你的应用的话,你就拥有了一个唯一的地方,所有的数据可以存储在这里,获取数据也直接从这里获取。

 

For example, if your AJAX application issues a JSON request directly to the server to get all the accounts for a user, you might change this to instead ask an intermediate object for all the accounts for the user. This object could then decide whether to retrieve the data from the server, the local store, or some combination of both. Similarly, when the application wants to update the user’s accounts, the app does so by calling the intermediate object. The intermediate object can then decide whether to write the data locally, whether to send the data to the server, and it can schedule synchronization.

例如:如果你的ajax应用发起一个json请求到服务器获取一个用户的所有账号,更好的方式是请求一个中间对象来获取用户的所有账号。这个对象来决定是否从服务器、本地存储或者一些其他组合来获取数据。类似的,当应用程序需要更新用户账号的时候,应用程序只需要调用中间对象。中间对象来决定是否将这些数据写入本地存储,是否发送数据到服务器,同时它(中间对象)还可以定制同步计划。

 

You can think of this intermediate object as a data switch layer that implements the same interface as the data layer. As a first step, you can make the data switch forward all your calls to the data layer that interacts with the server. This step is useful since it is the code path that is followed when Gears is not installed or if the user doesn’t want to enable the application to work offline. Note that a data switch is not strictly necessary (for example GearPad does not have a data switch layer).

 

你可以认为这个中间对象是一个数据交换层,该数据交换层实现了数据层一样的接口。作为第一步,你可以让使这个数据交换层透明的传递你的调用到数据层(直接和服务器交互的数据层)。这一步是很有用的代码路径当Gear没有安装或者用户不想让应用程序离线处理时。注意:数据交换层不是严格的需要的(例如GearPad没有这样的一个数据交换层)

The next step, as shown in the figure below, is to create a new local data layer that uses a Gears database instead of going to the web server for data. It’s simpler if this data layer has the same interface as the existing data layer used to communicate with the server. If the interface is different then some translation needs to be done and you might as well do that inside this data layer.

To test this step, you can set the data switch layer to talk to this new (local) data layer. You might want to pre-populate the database to make things easier to test.

 

下一步,如下图所示,创建可一个新的使用Gears数据库的本地数据层取代从WEB服务器获取数据。如果该数据层拥有和当前数据层一样的接口来和服务器通讯的话是非常简单的了。如果接口有一些不同,比如有一些转换需要做,你应该在该本地数据层中进行处理。

 

为了测试这一步,你可以设置数据交换层于该本地数据层通信。不过之前最好建立一个数据库以使得测试更容易一些。

Architecture without a data layer

If the application is not structured with a data layer and adding a data layer is not an option, it is still possible to isolate the data layer by intercepting all the calls to the web server just before they are sent. For example, you could intercept a form submit (listen to the submit event) and decide if the application should use the local data store or the data on the server.

Implementing this approach involves finding all functions and methods that send requests to the server, and rerouting them. The challenge is that this method requires a lot of extra work, like parsing URLs, iterating over forms as well as generating the same result as the server would. In practice you end up reimplementing large parts of the web server on the client side. Regardless, this can be a viable option for existing AJAX applications that can’t be otherwise rearchitected.

 

没有数据层的架构

如果应用没有设计数据层或者添加一个数据层是不可行的话,仍然可能通过于服务器交互来构造出一个数据层出来,仅仅需要在所有的请求发送之前做一点事情。例如,你可能发起一个表单提交(监听submit事件)并且决定应用程序应该使用本地存储或者服务器上的数据。

 

实现这种方式需要找到所有发送请求到服务器的函数和方法,然后重新路由它们。挑战是,这样需要做很多额外的工作,例如解析URL地址,像服务器返回结果一样的重新生成表单。实际上你需要在客户端重复实现你在服务器端所做的大部分工作。不管怎样,对于已有的不能重新设计架构的ajax应用来说,这样的方式是可选的。

 

 

Feature Availability Offline

For practical reasons, every feature of an application may not become a feature that’s available offline. You need to choose which features you want to support locally and implement the logic that decides when to use the local store and when to connect to the server. We call this the “connection strategy.”

 

离线功能

由于一些实际原因,不可能一个应用的所有功能都实现离线处理。你需要选择一些功能你想支持本地处理并且实现其中的逻辑来决定何时使用本地存储,何时连接到服务器。我们称之为“联线策略”。

You might think that you would always want to use the local store since it is faster. However, there are many practical reasons why you may want or need to access the data on server instead. For instance:

Data may be so transient in nature that it makes no sense to cache it. 

你也许认为你需要经常使用本地存储,因为这样很快。但是,有很多实际原因,你需要或者必须访问服务器端的数据。例如:

数据可能存在的时间很短暂,没有必要缓存住它。

 

For example, an application providing real-time stock quotes would not benefit from serving old stock quotes.

Some application’s data makes sense only while online. 

As an extreme example, an Instant Messaging application makes sense only while connected.

 

例如:一个提供实时股票信息的应用存储过时的股票信息是没有价值的。一些应用的数据只有在在线的时候才是有意义的。另外一个例子就是实时IM应用,这个就不多说了。

 

The app may choose to store only the most frequently accessed data.

For example, if the user can set a preference that changes the language of the application, this preference change might not be supported offline because the cost of implementing this offline feature is not worth the benefit for a preference that is seldom changed.

应用应该选择只存储一些经常访问到的数据。例如,如果用户可以设置一个应用的语言,这些语言的数据最好不要实现离线功能,因为这样的功能是很少使用的,实现这样的功能代价有点大。

Computational and/or disk space requirements make it unfeasible to recreate the feature offline.

For example, if the feature requires huge amounts of data to be useful, beyond a reasonable amount for a personal computer.

计算和/或磁盘空间需求使得该离线功能不太可以被接受。

例如,如果功能需要使用大量的数据,超出一台PC可以接受的数量。

Typically, the optimal solution is to use the local store as much as possible, since it’s usually faster than a remote connection. However, the more work an application does locally, the more code you need to write to implement the feature locally and to synchronize the corresponding data. There is a cost/benefit tradeoff to consider, and some features may not be worthwhile to support locally.

典型的,可选的解决方案就是尽可能的本地存储,因为它一定比远程连接要快地多。但是,一个应用所做的本地工作越多,你需要编写的实现该功能的本地化和同步数据的代码就越多。有一个性价比需要考虑进来,并且一个功能可以没有必要实现本地化。

 

Modality

One fundamental question that all offline-enabled applications must answer early is that of “modality”.

Modal applications have distinct offline versus online modes, usually indicated through some change in the user interface. The user is made aware of the state and participates in switching states in some manner.

Modeless applications attempt to transition seamlessly between online and offline states, without significant UI changes. The user does not need to participate in switching states, which the application does automatically.

 

模态化

一个基本的问题所有的可离线应用必须尽早回答是“形态”。

模态的应用程序具有不同的离线相对与联线模式,这个通常是指一些用户界面上的变化。用户应该意识到状态和体验到在不同的方式之间切换。

 

 

Modal

In a modal application, when the application is online it communicates with the server. When it’s offline, it uses the local store. Data must be synchronized when the app switches between modes.

The advantage of making a modal application is that it’s relatively simple to implement and therefore a reasonable way to bootstrap the application to function offline.

The disadvantages are:

The user must remember to switch modes. If they forget, they will either not have the data they need when offline, or will work online in an unintentionally disconnected mode.

If the network connection is intermittent, the user will either need to choose one of the settings or will have to constantly switch between modes as the connection comes and goes.

Since the local store is not always up-to-date, it can’t be used to improve the application’s responsiveness when connected to the server.

 

模态

在一个模态应用中,在线时应用与服务器交互,离线时,就使用本地存储。当应用在两种模式之间切换时,数据必须被同步。

制作一个模态化的应用的优点是,它的实现相对还是比较简单的因此是一个合理的方式来引导应用在离线状态下的使用。

缺点是:用户需要记得去切换模式。如果他们忘记了,他们可能既得不到离线时的数据,或者也可能联线时确处在离线时的模式。

如果网络时断时续,用户需要选择一个设置或者不得不在频繁的连接和断开之间转折。

因为本地存储不一定一直是最新的,这样就不能在连接到服务器时改善应用的响应。

 

Modeless

In a modeless application, the application works with an assumption that it is offline, or that it can lose the network connection at any time. The app uses the local store as much as possible, and does continuous, small data syncs in the background when the server is available. Data synchronization is also done when coming back online.

The advantages of modeless applications are:

A better user experience. The user does not have to be aware of network connectivity or switching states.

The application works smoothly even with intermittent network connections.

Since the local store is kept up-to-date, it can be used to optimize the server connection.

The disadvantages of modeless applications are:

It is more difficult to implement.

Care must be taken to avoid letting the synchronization background process consume too many resources and make the overall application feel sluggish.

Testing the app can be more challenging, since synchronization logic occurs in the background and not in reaction to specific user actions.

 

The sample application Gearpad is an example of a modeless offline application. It always writes to the local database, and then independently synchronizes the changes with the server.

Google Reader is currently an example of a modal application. It has a distinct offline mode that a user must explicitly enable. In Reader’s case, implementing a modal state was a pragmatic choice, as it was faster to implement and made it possible to release an early version of Google Reader with Gears.

 

去模态化

在一个没有模态的应用中,应用程序假定运行在离线状态,或者可能随时断开网络连接。应用尽可能的使用本地存储,并且在后台,当服务器可用时持续地进行着小数据量的同步。当再次联机时,数据同步已经完成。

去模态化的优点是:

更好的用户体验。用户不需要仪式到网络连接的状态或者切换状态。

应用在网络断断续续时也可以运行的很平滑。

本地存储一直保持最新,这样就优化了服务器连接。

缺点是:

实现起来比较复杂和困难。

需要注意避免后台同步进程占用太多的资源和使应用运行不顺畅。

测试应用可能更加有挑战性,因为同步本地发生在后台和用户的行为没有一定的影响。

 

示例程序GearPad是一个去模态化的应用示例。它经常将数据存储在本地数据库,然后独立地同步数据到服务器。

GoogleReader目前是一个模态化的应用示例。它有一个独特的离线状态用户必须明确的允许。从Reader的角度来看,模态化状态是一个实际的选择,因为实现一个可以用的带Gears的Google Reader早期版本是比较快的。

 

 

Data Synchronization

No matter which connection and modality strategy you use, the data in the local database will get out of sync with the server data. For example, local data and server data get out of sync when:

The user makes changes while offline

Data is shared and can be changed by external parties

Data comes from an external source, such as a feed

Resolving these differences so that the two stores are the same is called “synchronization”. There are many approaches to synchronization and none are perfect for all situations. The solution you ultimately choose will likely be highly customized to your particular application.

Below are some general synchronization strategies.

 

数据同步

不管你使用什么样的连接和模态策略,在本地数据库中的数据都会与服务器数据失去同步。例如,下面情况下本地数据和服务器数据会不同步:

1-用户在离线状态下进行了一些改变

2-数据被分享有可能被外部合作者修改

3-数据来自一个外部资源,例如一个feed

解决这些差异,让两个数据仓库里存储的数据一致就叫“同步”。有许多同步方法,没有放之四海皆准的方法。你最终选择的解决方案应该适合你自己的特定应用。下面是一些一般同步策略。

 

Manual Sync

The simplest solution to synchronization is what we call “manual sync”. It’s manual because the user decides when to synchronize. It can be implemented simply by uploading all the old local data to the server, and then downloading a fresh copy from the server before going offline.

Manual sync requires that:

The amount of data is small enough to download in a reasonable amount of time.

The user explicitly indicates when he or she is going offline, typically via a button in the user interface.

The problems with this method and with the offline mode it creates, are:

Users don’t always know the state of their network connections. Internet connections may die unexpectedly or be intermittent, for example, on a bus.

Users may forget to synchronize before going offline.

Manual sync can be a good way to get started as it is relatively easy to implement. However, it requires the user to have awareness and involvement in the synching process.

手动同步

最简单的同步解决方案我们称之为“手动同步”。之所以称之为手动是因为由用户来决定何时同步。通过上传所有老数据到服务器,然后下载所有最新拷贝到本地来简单的实现它。

手动同步需要:

数据量应该比较小可以在一个合理的实现内下载完。

用户明确指示他/她什么时候离线,典型的化通过界面上的一个按钮。

这种方式以及它所创建的离线模式引起的问题是:

用户可能忘记在离线前同步数据。

手动同步可以是一个好的开始方式因为它比较容易实现。但是它需要用户有意识的介入到同步流程中来。

 

Background Sync

In a “background sync”, the application continuously synchronizes the data between the local data store and the server. This can be implemented by pinging the server every once in a while or better yet, letting the server push or stream data to the client (this is called Comet in the Ajax lingo).

The benefits of background synching are:

Data is ready at all times, whenever the user chooses to go offline, or is accidentally disconnected.

The performance is enhanced when using a slow Internet connection.

The downside is that the sync engine might consume resources or slow down the online experience with its background processing (if it’s not using the WorkerPool). Using WorkerPool the cost of synching is minimized and no longer affects the user’s experience.

 

后台同步

在后台同步中,应用程序持续不断的在本地存储和服务器之间同步数据。可以通过下面方式实现,每隔一小段时间ping服务器让服务器推送流数据到客户端(在ajax中被称之为Comet)

这种同步方式的优点是:

所有时间数据都是准备好可以使用的,无论是用户选择离线还是突然断开连接。当网速很慢的时候可以最大程度增强程序性能。下载的一方,同步引擎可能消耗资源或者降低在线体验度因为它的后台进程(如果没有使用WorkerPool)。使用WorkerPool的话,同步的花费是最小化的并且不会影响用户体验。

Conclusion

There are many design choices to be made along the way to enabling an application to work offline. This document reviewed a few of the possible choices for the common design issues that arise. The decisions made for an application will need to reflect the user experience you want to achieve as well as the application’s limitations and goals.

概述

有许多设计可以用来选择来实现应用程序的离线功能。本文档回顾了一少部分可选的方案对于现存的一般设计。一个应用程序的架构需要反映你想达到的用户体验以及应用的局限性和应用所要达到的目标。

 

 

即将写一个自己的页面,设计了一个JS+CSS布局

2008年9月17日

比较简单,二列有头有脚,没有菜单,以后考虑添加。

可以随着浏览器大小自动调整,并用JS控制了最小宽度和高度。

可以让浏览内容全屏。

DEMO地址在这里

未来的网络应用会是什么模样的?

2008年9月16日

今天看了GOOGLE的CHROME里面集成的GEARS,本来我还在抱怨,CHROME怎么又要和IE,FireFox搞的不一样,我们这些写JS代码的程序员又要死掉多少脑细胞。

后来仔细浏览了一遍gears的API发现,这样的程序也许写起来比较费力,但是用户体验的确比WEB2.0的AJAX还要棒很多。

我为什么这么说呢,事情的原因就得从我上午再搞的客户端数据存储持久化说起,很久之前知道userData但是我从来没有在实际中用到过,惭愧了,但是我觉得这个东西还是有必要搞一搞懂的,所以就查了查资料,怿飞的BLOG上看来点东西,于是开始实验。实验下来,我成功的实现了IE和Firefox的功能,但是GOOGLE的CHROME呢?好像2个都不能用,看来这鬼扯的浏览器兼容性又出现了,于是我去了解CHROME到底支不支持客户端持久化存储,刚好群里面的一个杨同学(比较年轻)提到了gears,于是顺藤摸瓜,我打开了一扇新门。原来gears很强大,chrome集成安装了gears,有哪些功能呢。

通过gears工厂,可以创建下面实例:

1-blob

2-database

3-desktop

4-geolocation

5-httprequest

6-localserver

7-timer

8-workerpool

举例说明:desktop实例可以提供增强的file选择功能,这样我们不通过flash就可以实现文件的多选,还可以得到文件的信息,如果经过用户的允许,我们甚至可以帮助用户将我们的应用的快捷方式放置到桌面上。

localserver就更强大了,可以将网络上的资源存储到用户机器上,如果用户暂时性断网仍然可以继续进行他的应用使用工作。

database是chrome内嵌了一个sqlite引擎,在用户允许的情况下,可以建立本地数据库。执行相关操作。

 

以后的WEB应用会更加便利。今天先简单介绍到这里

在客户端保存持久化数据-keep persistent data in Client

2008年9月16日

看了怿飞 有关系列的文章 http://www.planabc.net/2008/08/05/userdata_behavior/ 觉得有必要对此进行记录。

大家一般页面级的变量会存储在JavaScript变量中,如果是复杂应用的话,页面中的数据结构就可以对相关数据进行处理,

如果要跨页面的持久保存数据的话,JavaScript变量就做不到了,有2种选择,

1-保存数据在客户端,

2-保存数据在服务器端。

两种方式的优缺点我就不再嗷述了。

单单保存数据在客户端有2种选择,其一就是我们常用的cookie,另外一种就是IE的userData或者其他浏览器也或多或少的用其他名字一样的支持的sessionStorage等等。

首先我们来看看IE的userData

有关userData的具体信息,可以从MSDN网站上查到,http://msdn.microsoft.com/en-us/library/ms531424.aspx# 下面我们做一个具体的实验来看看如何使用。

先看一下这个页面

clientdatasave.htm

打开后,在文本框里随意输入一下文字。按下保存save按钮

然后再打开这个页面

clientdataload.htm

按一下载入load按钮,你发现了什么?

是的,你在第一个页面里输入的东西已经可以在第二个页面里使用了。

花5分钟时间看一下源代码吧。userData是不是用起来很简单呢?

 

看看源代码里有关isIE的分支,当浏览器不是IE的时候,如果是FireFox,那么我们也支持这样的客户端持久保持数据的能力。有关持久化数据的期限问题,以后再介绍。

今天在网上买书很郁闷

2008年9月14日

突然想买essential actionscript 3.0 这本书,

因为看到网上对英文原版评价都很不错,中文翻译的评价比较糟糕,所以我也想买一本.

逛了好几个地方,

joyo,china-pub,dangdang,cnforyou,dearbook,taobao,大众书局….还有很多不知道什么网站

感觉出来了.

买书的体验比较糟糕.

一,本书因为是影印版比较难找,很多网站没有,即使有基本上都是把翻译版当热销,其实买这种书的人一般都会参考多方面的意见和建议.

二,送货速度,因为joyo的比较便宜就在上面下了个订单,一看预计到货时间要到5天之后,下的订单我又取消了,即使它免运费.再去china-pub看看,虽然价格要贵一点,但是送货速度还算可以接受,以前经常在china-pub买,现在是3星会员,所以打的折扣不多.

三,网站功能,搜索功能太差,我在joyo搜索actionscript3的结果还算满意,但是china-pub太夸张了,开始搜索actionscript3都没搜出来这本书,后来要不是在别的网站上听说china-pub是有这本书的,我还真不准备在china-pub买了.仔细换了换搜索关键字把essential加上才查出来,但是结果仍然令人吃惊.很明显的BUG,说搜索结果有26个,但是第一页只有7个(每页20个),第2页有7个,关键是还有重复的记录(看URL里的ID看出来的),这程序写的也太弱了吧?没人测试就出来?

四,一些说明和细节不够到位, joyo免运费很清楚的说明了,china-pub 满xx元免运费写的也比较明显,但是我下单到结束都没看到那里减免运费,也懒的为5元钱计较了,也许是交易成功返还呢?和newegg一样.

总而言之,今天我觉得网上买书实在太吃力,如果很急着买某本书,还是去书店买吧.比较知名的经典的书基本上书店都有的卖的.或者如果有足够的时间等,就在家或者公司等送货上门货到付款吧.二三线城市的同学朋友们,只能尽量到一线城市去吧.

 

event的深入理解

2008年9月12日

先看一个事件绑定的demo

http://demo.thankphp.net/0912event.htm

拖拽定位JavaScript代码-备用

2008年9月10日

今天写了个简单的层拖拽代码,目前没有详细的代码注释.

先把DEMO放出来大家看看.

http://demo.thankphp.net/0910drag.htm

dragdrop

再放一个table的DEMO.

http://demo.thankphp.net/0911drag.htm