Google-Web-App开发指南

GoogleWebApp开发指南第一章：什么是WebApps？很多人向我问起学习HTML5技术的权威入门资料，我总是毫不犹豫地推荐由Google推出的HTML5rocks，这个网站就像一个宝库，包含经典的教程、文章、Demo和代码。近日Chrome小组又推出了一个很酷的WebApp电子书，讲述了Chrome开发人员对WebApps的思考和最佳实践，推荐每个关注WebApps的开发者阅读。WebAppTrend为方便国内开发者浏览，将全文进行翻译。注：这本书就是一个WebApps的绝佳案例，据开发小组的人介绍，该电子书WebApp使用了很多CSS3特性例如box-shadow,opacity,multiplebackgrounds以做出丰富的交互体验，用到了AppCache和其他URL重写技术，没有用到一行服务端代码;使用了HTML5historyAPI来保持应用状态。以下为第一章内容，清楚阐述了很多人非常困惑的WebApps概念问题。从今天起，我们将逐步发布《Web应用领域指南》，敬请期待。人们对应用的需求是非常强烈的，它无处不在!这个综合性的指南将提供给你一些构建现代web应用所需的技术以及惯例的介绍。这一领域指南旨在帮助你在web应用中创建良好的用户体验。无论你是初次构建web应用，还是在寻找提升已有应用的方法，这一指南都能帮到你!祝福你所有的努力。未来向着应用迈进吧!WebApps的变革HTML5让开发者能打破以往构建web应用时所受的限制还在不久以前，web只是用来做“搜索”的;它主要的功能就是提供信息。要执行任务，用户要购买并安装软件到他们的电脑桌面。了解你的webapps的关键是了解技术是如何影响了webapps的变革，现在，即使webapps不能比桌面应用提供更多，但它至少可以做得和桌面应用一样多了。异步webapps已经改变了用户的交互早期的web页面内容是静态的，现在一切都发生了根本的改变。页面是动态加载或改变的，而不是一次性展现所有内容。新的语言标准提供了更丰富的用户体验在现代浏览器没有支持HTML5之前，构建web应用所需要的特性是变化的，并且常常需要使用像Flash、ActiveX这样的插件或Java。新的开放平台标准，比如CSS3,HTML5以及JavaScript确保开发者能拥有足够的工具和性能构建比以往更漂亮的交互性更强的web应用。Figure1.1–新技术加强了我们的能力!WebApps的未来你应该在你的webapps中使用可用的一切技术Webapp的批评者很快指出了一个主要的缺点——webapp的用户需要联网才能完成任务。假如网络不是随时随地都有的话，用户是不能完全依赖web应用来完成他们的工作的。至少这样的假设是成立的。Webapps的未来发展如何取决于它是否有足够的灵活性——既拥有在web上完成任务的一切优点，又能在离线的时候完成这些任务。支持离线应用现在已经是可以实现的了——HTML5提供了例如应用缓存和客户端存储(比如，本地存储，索引数据库)等性能，这样你的应用就能在没有网络联接的时候也可以工作了。云能比桌面给用户提供更多云提供商提供了一个平台，在这个平台上，服务器端的功能可以被托管和共享。使用托管在云端的web应用程序，用户可以和他人协作或者在自己的不同设备间进行协作，将数据保存在安全的服务器上。没有沉重的开销成本，web应用可以只消耗桌面应用程序的成本的一小部分。Figure1.2–完全发挥你的设备潜能!WebApps的特性Webapps可以和电子表格，文档编辑器一样复杂，也可以和待做事项管理器一样简单。不管它是什么，它都必须完成某些事情。WebApp重新定义了“上网”的含义;web已经成了网站和应用的混合。下面是用来区分webapps和网站的三点要素：1.一个提供了很好的用户体验，让用户能很容易地完成任务，并利用了设备本地的一些性能。2.一个web应用提供了丰富的视觉体验，又不会分散人的注意力;它注重美学，使用和本地应用一样的设计模式，又不失易用性。3.一个web应用非常注重用户的交互、参与和完成任务，而不是让他们仅仅浏览网页。应用程序是自包含的(self-contained)，也即用户不用导航到其他站点或者应用来完成任务。Figure1.3–小一点，大一点，简单点，复杂点?只要做点什么就好!确认WebApps清单如果你对这些问题的回答都是YES的话，那么你面前的就是一个web应用了◆它是否是自包含的，不用将我重定向到一个完全不同的应用去完成我需要做的?◆我是否可以在使用它的时候进行交互、参与并完成一些事情?◆它是否有丰富的用户界面，界面看起来非常美观，并且基本占满了可用的窗口?◆它是否使用和本地应用一样的模式，比如按钮、对话框或者其他元素?◆它是否可以离线工作?◆它是否应用了设备的某些功能，比如GPS的定位数据和动作传感器的数据?◆传统的网站的导航元素和链接是否被隐藏起来了?◆这个应用设计的时候是否是参照客户端架构模型?GoogleWebApp开发指南第二章：交互设计首先掌握基础借用篮球界一个传奇人物的话，在你做任何事之前，你必须“首先掌握基础”。（说出这句话的是波士顿凯尔特篮球名宿LarryBird，他同时也是一个WebApp爱好者。）所有伟大的WebApps都必须有一个清晰的集中点。创建清晰的需求描述伟大的webapps让用户很容易集中注意力。人们在某段时间内只能集中于少数几件事，因此，与那些提供给用户很多选择和很多特性的webapps相比，人们更喜欢那些没有干扰能让用户轻松完成手头任务的应用。为了确保你的应用有一个集中点，创建一个简短描述，描述一下你的应用的目的和你的目标用户群。要保证你能在三分钟内将所有这一切向一个完全不了解的人描述清楚。1．集中于人们使用你的应用的主要场景，限制用于其他场景的资源。2．将正交或无关的任务分割成各自独立的应用程序，这可能意味着你的网站要提供多种应用，但每一种应用都是帮助集中于完成一个单一的任务。Figure2.1–保持集中，别在其他地方用力太多！让我们来看看一些优秀webapps的假想的目标描述：¨GOJEE–手边的个性化食谱。¨ASTRID–帮助个人和团队有效组织和完成日常事务的待办事项清单，并让人们享受其中。¨WANDERFLY–帮助用户根据他们的兴趣和预算发现新应用。¨KINDLECLOUDREADER–随时随地阅读你的Kindle图书。自成体系虽然webapps可能会导入其他网站或应用程序的数据，但它们几乎都是自成体系的，它们都能让用户无需导航到其他网站或应用就能够完成他们的任务。根据这个定义，搜索引擎就不是一个应用，因为它会将用户导航到到其他网站以完成他们的任务。让用户集中于应用当用户打开一个webapp的时候，他们期待这个应用就像是一个单个应用，而不是一系列网页的集合。一个伟大的webapp会将自己作为一个独立实体，和网站区分开来，而不是掩埋在网站的导航体验之下。Figure2.2–保持自我是一种优点！功能设计伟大的webapp设计消除了不必要的组件，让用户可以集中于完成任务所需的核心组件。在设计你自己的应用的时候，牢记以下准则是非常重要的：1.尽可能减少与功能无关的web页面。例如，位于页面左上方通常用于将用户带回主页的logo，或者是页面底端的链接，将用户带向服务条款、隐私策略、项目政策以及你的主页。2.尽可能减少页面数量，让应用尽量集中，不必从一个页面切换到另一个页面，而是从一个视图切换到另一个视图。3.根据应用的核心场景设计导航，去除典型的web页面导航。你的页面很可能并不需要一个home按钮，或者导航分类菜单，将用户带向站点的不同部分。4.让基本组件一直可见，这样人们就能很容易将注意力集中在正确的地方。5.无论用户在哪一步，都在应用中提供一个一致的设计和应用体验。例如，不管用户是在写邮件、搜索邮件还是查看信息，退出按钮、返回收件箱按钮、写新邮件按钮，都应处于不同视图的同一位置。Figure2.3–保持应用体验的特点。隐藏起传统元素！鼓励用户进行交互、参与、完成任务一个webapp应用鼓励用户交互、参与并完成任务，而不是消极浏览，比如购买电影票、写文档或者与朋友分享照片、视频。不像网站，webapps给用户提供了一种主人翁的感觉，他们可以和内容或其他人进行交互。让完成任务变得容易很多人并没有时间和精力去搞清楚该如何使用一个应用。你的webapps应该非常简单，让用户很容易获取信息，选择他们下一步该做什么。精简你的界面，使用户可以即时掌握如何使用它。伟大的webapps是即刻可用的，或者在初次使用时只需要很少的训练或者帮助。为了让人们成功使用你的应用，你应该做到：1.减少提供给用户的选项数量，让应用尽可能精简，用户轻松就能完成手边任务。2.对于控制键或者信息提示保持外观和感觉上的一致，避免让用户要费一番精力才能找到或者搞懂某些功能。3.为所有的控制键提供清晰的、易于理解的标签，让用户容易知道控制键的功能。利用设备的能力Webapps可以感知地理位置，提供关于设备动作的详细信息，甚至可以在硬盘上存储数据。现代浏览器让开发者能越来越多地利用设备的功能了。例如，webapps可以感知地理位置，提供设备运动方向的运动形式的详细信息，甚至在硬盘上存储数据。将来还会有更多功能，比如对摄像机、麦克风和许多其他组件的访问。下面是几种你可以利用设备本身功能的方式：1.在适当的时候，提供给用户地理位置相关的信息，比如附近的饭店或其他场地等。2.将设备的动作作为游戏的新的输入，而不是使用鼠标或者光标。用户可以通过晃动设备来移动游戏中的角色。3.在处理大量数据时，将其存储于用户的计算机上，这样就不必在每次应用启动时传输大量数据了。使用多媒体加强用户体验和沉浸体验（IMMERSIVENESS）丰富的多媒体体验曾经只能在客户端应用中出现，但现在webapps也可以实现给用户提供丰富的多媒体体验了。多媒体是整体体验的一部分，例如游戏或者视频聊天应用中的多媒体，或是以一种新奇的方式提醒用户会议时间或者新消息。使用多媒体丰富应用的一些策略包括：1.为事件提供语义，比如新邮件通知，事件提醒。2.永远让用户能够去屏蔽声音或者其他多媒体应用，因为对用户来说这些多媒体应用可能是一种干扰。3.使用页面可见性API（pagevisibilityAPI）来阻止多媒体在用户没有看着你的应用的时候播放。Figure2.4–多媒体让你的webapp鲜活起来！遵循下列设计模式使用类似于nativeapps的设计模式所有的视觉外观、视觉交互以及动作界面给人的感觉应该都是webapp的感觉，而不是网站的感觉。Webapp的交互性使得它与nativeapp的设计惯例是天作之合。一些帮助你做到这些的指南：1.要到应用的其他部分时，使用触发各种动作的按钮，而不是导航到应用不同部分的链接。2.在整个应用中使用工具栏和菜单访问所需要的常见功能。3.使用对话框来提醒用户或从用户那里获得信息，而不是导航到新的页面。使用一个CS架构模型。开发者要相信现代浏览器可以提供他们构建伟大应用所需的特性。Webapps应用利用这些特性，将数据和表现层剥离开，以减少网络开销，提供离线浏览，以及在需要修改表现层时不用修改整个应用。Figure2.5–使用熟悉的设计模式来加强交互度和沉浸体验！下面是你在设计你的webapp时需要考虑的内容：1.使用AJAX调用来传输数据，而不是依赖于请求-应答模型，因为在请求-应答模型中，整个页面都需要来回传输，包括所有的数据和表现层。2.使用索引数据库（IndexedDB）让用户产生的或者使用的数据存储在本地。确保你不会遗失用户的数据，永远先将数据写在本地，再将其同步到你的服务。如果你在设计的时候尊崇了这些指南，那么你的app就会感觉更快，并且像是一个nativeapp。GoogleWebApp开发指南第三章：案例研究（上）如果缺少项目案例部分，那么很难说这是个完整的开发指南。因为只有通过一系列的案例实践，才可以帮助人们形成最佳实践，了解那些开发特性是如何