Google Web App开发指南第三章：案例研究（下）

旅程计划应用（Wayfindit： Trip Planner App）

在大多数情况下，Wayfindit的应用必须有很好的易用性。旅行是一件很复杂的事情，不管是商业旅行还是休假旅行，一个顺利的旅程要求从家门到目的都没有意外之忧。Wayfindit的应用要能给旅行者提供所需信息，并且要快而准确。这意味着它需要一个最小的、直观的、响应式界面，能在前端提供有关内容的重要信息——HTML5的地理感知和离线存储特性实现。

一个完美的袖珍指南

它就装在你的口袋里或者包里，即时提供信息。它拥有本地存储和地理感知功能，只需要检查下当天时间，Wayfindit Trip Planner app就能显示出你的日程表，并在你有时间剩余时给出建议，在你靠近一个美丽景点时给出提醒，以及一个智能地图和方位指示。

Wayfindit Trip Planner app利用HTML5的特性给人们提供了一个方便的、随时随地提供服务的、智能的旅程伴侣。它具有很好的交互能力——视觉上清晰，性能优异，能明白旅行者的需求和所处环境。它能让假期更为愉快，使用起来也让人倍觉乐趣。

到达服务

飞机刚刚降落？基于旅客的位置和最后一次访问互联网时的信息，Wayfindit Trip Planner app就能立即提供一辆出租车，以及附近的餐厅或活动信息，或到酒店的路径（以及酒店距离此处的距离）。

所有这些信息的到达都以以毫秒为单位——这个应用由内而外都设计精巧，各部分功能都尽量压缩，以确保它给人感觉迅速。

住房服务

旅行者这时候驾着租来的车驶向了旅馆。应用了解这一点，并会在随后提供停车位数目。所有这些信息都是存储在本地的——不管是否有网络连接，这些信息都是即刻可用的。

多种选择

Wayfindit Trip Planner App采用了HTML5和CSS的响应式设计。在一个较大的屏幕上，比如笔记本或平板电脑，它能提供更多信息。除了酒店入住和出租车租赁信息，还会提供一些周边信息，例如酒店和活动推荐。（在手机上也能看到相同信息，但是需要向下滚动页面。）

酒店和活动推荐是基于旅行者的地点和当日时间。

饭店服务

想要知道去饭店怎么走？Wayfindit的Trip Planner知道怎么到那儿——步行、打车或者使用公共交通（如果它知道那儿没有可租用的车，就采用公共交通）。如果旅行者正在使用这个应用，他只需要一次点击就能呼叫正确的电话号码找到交通工具。

由于这个应用是可感知地理位置的，它能提供周边的景点信息，这些信息存储于本地数据库，Wayfindit Trip Planner App能根据数据库信息作出智能推荐。

总结功能

一日结束后的回顾总结能让旅行者留下更深刻的旅行记忆，这同时也能提升Wayfindit Trip Planner App的明日推荐。Wayfindit Trip Planner App提供了一些漂亮的HTML5表单，让用户可以很方便地为当天活动作出评级。

Khan学院（Khan Academy）

Khan Academy以视频课堂的形式提供了丰富的教育资源，这些资源富于教育性，容易获取，并且完全免费。Khan Academy还提供了一个“知识地图”和一些统计数据，引导你学习课程，并且记录你的进度。这对世界各地的学生而言都是非常好的资源，无论是在校内还是校外，无论是出于教学目的还是仅仅出于兴趣。它值得使用web上最好的展现技术，所以我们将Khan Academy作为一个例子，将其引入HTML5的时代。

焦点集中在教学内容

Khan Academy的视频内容是其网站的焦点，我们做了重新设计，使视频处于前端，免于干扰。视频占满屏幕，辅助信息在不需要的时候都消失了，以提供沉浸体验。当导航出现的时候，它也是最小化的——一切都是为了学生更好地学习。评论和提问部分都是最小化的，并且除非用户需要，评论和提问部分的内容是不会加载的，以节约加载时间。键盘上的一些快捷键让导航更为容易。

界面本身遵循响应式设计的思想，通过使用HTML5的meta viewport tag和CSS的媒体查询功能，移动设备用户在他们的设备上可以看到相同内容，但这些内容都是以最适于他们设备的布局呈现。

一个进度条（使用HTML5的《progress》元素）为学生的学习进度提供了一个直观的视觉反馈。本地存储的使用使得查询学习进度十分方便——无需登录存储或者记录数据，未来，这一应用还将大幅度提升其性能。

学习树

在“学习”标签下，有一个内容明细，Khan Academy的上千学习课程和联系都分成目录和子目录，易于检索。在这里也有一个进度条，提示学生各个标签下课程的学习进度。

在目录和子目录之外，会提供一个课程清单，一门课程中的一组视频是通过栈来指明的。和Khan Academy网站的已有组织不同，Khan Academy的HTML5应用中的视频课程和内容是以相关度进行分组的，这样相关内容都可以在一个地方就可以访问到。

Khan Academy web app使用了HTML5为学生提供了一个设计精良、永远在线的资源，他们可以学习、练习、跟踪所学内容。鼓励学生去学习可能是比较困难的，但是Khan Academy尽可能多地去除了障碍。它速度快，可以交互，并且提供了大量有着直观导航的学习资源，所有资源都可以无干扰使用。

美图（Picture Page）

Picture Page给了人们以一种全新的方式去看发生在世界上的事情。如果说一幅图相当于1000个词，那么Picture Page比世界上大多数出版物提供的都多，情感和细节都得以展现。Picture Page上只是一系列图片，附带有很小的、简单的不显眼的标题，这个站点的强大之处正在这里——它让图片作为焦点，让图片去讲述它们自己的故事。没有弹框，没有难以导航的幻灯片，没有微缩图。这个HTML5 Picture Page app给现有的很多图片新闻网站提供了一个创新的方式，将它们带入了一个全新的web app世界。

顺其自然

Picture Page这个应用名字本身就很好地描述了它——大的图片是它成功的关键。Picture Page的HTML5的re-imagining功能让图片可以以更大方式展现。通过使用CSS的background-size性质来自动缩放照片，照片可以占满全屏，成为焦点。

响应式设计使得移动设备用户能看到大小合适的小版图片；CSS3的媒体查询语句使得图片可以全屏展现而又不影响性能。它还能够像native mobile app一样检测挥动和触屏动作。Picture Page在任何设备上感觉都十分自然。

把用户体验放在第一位

Javascript让用户可以通过键盘快捷键对Picture Page.进行导航。使用左右箭头或者自己约定的JK键可以向前或向后翻动图片，这样就减少了用鼠标导航时寻找光标带来的干扰。当不需要的时候，箭头是被隐藏的，这样图片就不会受到影响。

使用HTML5的《progress》 tag，可以展现相册访问者的进度。

Picture Page是应用时代没有使用背景构建（ground-up reconstruction）的一个很好的例子。它优雅，视觉效果好，备受喜爱。因此我们可以在合适的地方应用HTML5提供的特性，将现有网站和新鲜的技术结合，展现出更好更大的图片。