移动开发

1：HTML5 学习

 （ 开发前的准备

      首先你要了解的是，虽然是使用HTML5 来写WebApp，你还是得了解HTTP、Web 的运作模式，并且了解如何利HTML/CSS/JavaScript 开发Web 的前端画面、互动程式。在这些基本功夫都上手之后，你需要的就是以下的资源：

      HTML5 的规格书。当然你要了解HTML5 制定了什么规格，才知道手上有多少武器可以运用。

      参考资料，好的参考资料能带你上天堂，增加学习的效率：       Apple 提供的开发iPhone Web App 指南也会带你学习HTML5 的各项新技术规格       Google 提供的加速 WebApp 指南。为了让浏览器在WebApp 上有更好的表现，开发者必须尽可能地提升WebApp 速度，降低反应时间，避免长时间的等待增加使用者的挫折。

      既然是WebApp，势必（大多数的情况下）需要一个Web Server，现在免费的Web/App Server Hosting 也有不少（如：Google App Engine等），都是构成WebApp 不可或缺的要素。

 

 

四、其他参考资料（来自IBM Developmerworks）

 

《Android 和 iPhone 浏览器之战》系列：

1. Android 和 iPhone 浏览器之战，第 1 部分: WebKit 成援兵

2. Android 和 iPhone 浏览器之战，第 2 部分: 为 iPhone 和 Android 构建基于浏览器的应用程序

 

《使用 HTML 5 创建移动 Web 应用程序》系列：

1. 使用 HTML 5 创建移动 Web 应用程序，第 1 部分：联合使用 HTML 5、地理定位 API 和 Web 服务来创建移动混搭程序

2. 使用 HTML 5 创建移动 Web 应用程序，第 2 部分：使用 HTML 5 开启移动 Web 应用程序的本地存储

3. 使用 HTML 5 创建移动 Web 应用程序，第 3 部分：使用 HTML 5 支持移动 Web 应用程序离线工作

4. 使用 HTML 5 创建移动 Web 应用程序，第 4 部分：使用 Web Workers 来加速您的移动 Web 应用程序

5. 使用 HTML 5 创建移动 Web 应用程序，第 5 部分: 使用 HTML 5 开发新的可视化 UI 特性

）

//以上转自：http://www.cnblogs.com/charley_yang/archive/2011/02/28/1967559.html

 

1.1：

  移动友好性

要想使 Web 页面从一般的页面变成支持移动设备的页面，Web 应用程序可以在几个方面进行修改。虽然页面可以在 WebKit 中正确呈现，但是，一个以鼠标为中心的设备（比如笔记本或台式机）与一个以触摸为中心的设备（比如一个 iPhone 或 Android 智能手机）还是有区别的。其中主要的一些差异包括 “可单击” 区域的物理大小、“悬浮样式” 的缺少以及完全不同的事件顺序。如下所列的是在设计一个能被移动用户正常查看的 Web 站点时需要注意的一些事情：

• iPhone/Android 浏览器呈现的屏幕是可读的                    —                    大大好于传统的移动浏览器 — 所以不要急于草草制作您网站的移动版本。
• 手指要大过鼠标指针。在设计可单击的导航时要特别注意这一点 — 不要把链接放得相互太靠近，因为用户不太可能单击了一个链接而不触及相邻的链接。
• 悬浮样式将不再奏效，因为用手指不能进行用鼠标指针进行的 “悬浮”。
• 诸如 mouse-down、mouse-move 等事件在基于触摸的设备上自然大相径庭。这类事件中有一些将被取消，不要指望移动设备上的事件顺序与桌面浏览器上的一样。

这其中的细节在 iPhone in Action 内有详述（参见 参考资料）。而从我们的目的考虑，我们将更多地着重于                WebKit 所能做的，而不是它不能做的。

让我们来看看要使一个 Web 站点对 iPhone 或 Android 访客具有友好性所面临的最为明显的一个挑战：屏幕大小。我们今天使用的实际移动屏幕尺寸是 320x480。请注意由于用户可能会选择横向查看 Web 内容，所以屏幕大小也可以是                480x320。正如我们在图 1 中看到的，WebKit 将能很好地呈现面向桌面的 Web 页面，但是文本可能会太小以至于若不进行缩放或其他操作就无法有效阅读内容。那么，我们该如何应对这个问题呢？

最为直观也是最不唐突的适合移动用户的方式是通过使用一个特殊的 metatag：viewport。

metatag 是一个放入 HTML 文档的 head 元素内的 HTML 标记。如下是一个使用 viewport 标记的简单例子：<meta name="viewport" content="width=device-width" />。当这个 metatag 被添加到一个 HTML 页面后，我们看到此页面被缩放到更为适合这个移动设备的大小，如图 2 所示。如果浏览器不支持此标记，它会简单地忽略此标记