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提供的特性，将现有网站和新鲜的技术结合，展现出更好更大的图片。

什么是网站域名？为什么要申请网站域名？
网站建设工作中把握细节最重要
为什么别人建站挣大钱，而你却颗粒无收
东莞企业网站建设，网站关键词应该要如何布局？
中文域名介绍
为什么高端网站定制公司价格会比较高
东莞网站建设网关于网站友情链接的一点经验
营销网站建设中简单和标准化的代码是必不可少的！