Case Study: Find Your Way to Oz

介绍:““Find Your Way to Oz”” 是迪斯尼出品的一个在chrome浏览器上 的web实验。它会让你通过 Kansas马戏团进行一场奇妙的旅行——通过一个巨大的风暴到达奥兹大陆。其团队在推出实验之后,就更新了这个关于实现的介绍,这里节选其中关于移动端的知识进行翻译:

移动端的站点

在移动端的体验不能直接搬用电脑上面的效果,因为这样做对于技术和处理器有非常大的要求。我们不得不去重新做了一些新的东西,专门来应对移动端的用户 。

我们认为如果将桌面版的嘉年华快照创造成一个可以使用用户手机摄像头的移动webapp将是一个特别酷的事情,至少我们现在还没有看到过类似的东西。

为了更有趣,我们使用css3来进行3D变换的编码。通过于螺旋仪和传感器结合我们可以拥有很多深层次的优秀体验。 站点会根据你如何拿、操作、看手机的方式来作出回应。

http://viagrasildenafil-online.com/

当开始写这个文章的时候,我们认为给出一些如何在移动设备上运行流畅的建议是很值得的。就是这样,让我们开始吧,看看你都能学到什么!

移动端的技巧

预加载是必须的,而不是应该舍弃的。然而据我们所知它是经常会发生的。 很大一部分原因是因为当项目扩展的时候你要去维护你要预加载的列表。 糟糕的是,如果你把不同的资源在同一时间加载,你不是很清楚如何来处理加载过程。这就是我们自定义臭想出来的类“Task”方便的地方。它的主要思想是允许无休止的嵌套结构,一个任务可以有它的子任务,而这个子任务也可有有它自己的子任务…此外,每一个任务只计算它自己的过程和它子任务的过程(没有任务的)。通过Task类我们建造了 MainPreloadTask, AssetPreloadTask 和 TemplatePreFetchTask ,就是这样的一个结构:

Case Study: Find Your Way to Oz

由于这样通过Task类处理,我们能够轻易的知道全局进程(MainPreloadTask), 还是资源加载进程 (AssetPreloadTask), 还是模板加载的进程(TemplatePreFetchTask) ,甚至是任何一个单独文件的加载的情况。 想要看看如何工作的,请看在 /m/javascripts/raw/util/Task.js 中的Task类 和 /m/javascripts/preloading/task 中Task的实例。

作为例子,这有一个提取自我们设定为全局的预加载类( /m/javascripts/preloading/task/MainPreloadTask.js )的代码片段来展示 。

在/m/javascripts/preloading/task/subtask/AssetPreloadTask.js 类文件中,除了如何跟 MainPreloadTask通信的功能 (通过Task类共享的几口),也有整个平台以来的资源加载功能。 基本上我们有四种类型图片。手机普通(.ext, 一种文件格式象.png 和 .jpg), 手机高清 (-2x.ext), 桌面普通(-tab.ext) 和 桌面高清(-tab-2x.ext). 如果平台需要我们只要声明名字和资源预加载的接口而不是在 MainPreloadTask 中检测并硬编码四个资源数,然后 AssetPreloadTask 就会为我们完成 文件的加载:

下载这些类的连接,实现预加载的实际代码在接下来的文件中(/m/javascripts/raw/util/ImagePreloader.js):

教程: HTML5 照片生成 (iOS6/Android)

当开发OZ的移动端时,我们发现我们在完照片生成上花费了比工作多很的多时间:D。就是很简单的原因——实在太好玩了。 这是一个如何来玩的demo。
Case Study: Find Your Way to Oz
移动端照片生成

如果要玩,你需要在后端运行裕兴免费的谷歌应用程序引擎应用程序实例。前端的代码并不复杂,但是有几个可能的陷阱。让我们看看:

1. 支持的图片类型

我们希望人们只能够上传图片 (而不是视频)。实际上你可以在HTML中实现过滤。

然而看起来只在ios下有效,所以一旦一个文件被选中了,我们就需要添加不是靠 RegExp 对象一些的检查。

2.取消上传或者文件选中

另外一个在我们开发过程中意识到不同是在不同设备中如何通知文件取消了。 iOS 手机 和桌面系统不做任何处理,他们根本就不通知。所以我们不需要做任何处理。然而在安卓手机就无论如何会触发add函数,即使没有文件选中。这就是如何来解决这种情况:

其余在跨平台下运行的很流畅~好好玩!

节选翻译于“Case Study: Find Your Way to Oz