摘要：
我们前面所涉及的离线数据库、离线文件的操作，会话机制的控制，以及客户端跨域数据同步、与服务端的交互，都可以很好的让用户在没有网络或者与服务端断开链接的情况下进行正常的操作。但我们的这个离线系统的客户中包含了很多的特定群体，如财务，会计、数据抽取人员，于是需要对数据报表和数据图表一个很强有力支持，让他们更加直观地表达。目前来说，图表的开发组件还是很多的。有基于silverLight的Visifire，这是我的项目在使用MVC3.0开发之前最喜欢用的图表组件，喜欢的原因主要有三点（Visifire）：OpenSource：相信这是很多程序员朋友最喜欢看到的。SingleAPItobothSilve 阅读全文
摘要：
离线应用系统的设计目标就是在网络离线情况下依然可以操作我们的应用系统，并在网络畅通的情况下与服务器进行数据交互。所以离线应用系统最终会做成类似C/S架构的客户端应用程序。这边基于Chrome或者Safari浏览器的WebApplication（Web应用程序插件）无疑是最好的选择。这边以Chrome的WebApplication为例，离线系统做成Web应用程序之后，与服务端的交互就变成最麻烦的一件事了，因为离线Web应用程序是安装在各个用户的浏览器上面，而最终的Server，只是一个由终端服务方提供的固定地址。那么从本地浏览器对Server发起请求，就存在这跨域通信的情况。JavaScript 阅读全文
摘要：
HTML5的WebStorageAPI，我们也称为DOMStarageAPI，用于在Web请求之间持久化数据。在WebStarageAPI出现之前，我们都是将客户端和服务端之间的交互数据存储在远程服务器上，随着WebStarageAPI的出现，我们可以在客户端存储我们重复访问的交互数据，用户在打开浏览器的时候，可以快速地读取到数据，减少了用户等待，数据流量。在WebStarage出现之前，我们在客户端存储数据一般使用Cookie，用于客户端和服务端之间保存会话标识符，同时可以将本地个性化数据保存在应用程序中。Cookie的受限在它的存储大小只有4KB，不可能存储大数据；cookie在请求情况下 阅读全文
摘要：
在移动环境或者离线环境中，WebDataBase虽然能够存储并有效地管理和维护客户端的数据集合，但是仍不能满足对包含大段数据文件的存储和多种不同格式文件的保存，于是我们就需要离线的文件管理系统来维护我们工作了，基于HTML5的FileSystemAPI就充当这这个角色。通过这个FileSystemAPI，我们的Web应用程序可以阅读，浏览，编辑和操纵本地文件系统。FileSystemAPI的主要功能有：Readingandmanipulatingfiles:File/Blob,FileList,FileReaderCreatingandwriting:BlobBuilder,FileWrite 阅读全文
摘要：
基于HTML5的WebDataBase可以让你在浏览器中进行数据持久地存储管理和有效查询，假设你的离线应用程序有需要规范化的存储功能，那么使用WebDataBase，可以使你的应用程序无论是在离线或者在线或者网络不通畅情况下都可以将数据保存在客户端。下面是HTML5DataBase中两个不同的DataBase的比较,摘自http://www.html5rocks.com/en上面的一篇文章。我们这边使用WebSQL来设计和编写底层服务，W3C的WebDatabase规范中说这份规范不再维护了，但是几乎实现者都选择了SQLite这种轻量简单易用的客户端数据库:现在我们来封装和提取WebSQL公用 阅读全文
摘要：
HTML5有两个很炫的元素，就是Audio和Video,可以用他们在页面上创建音频播放器和视频播放器，制作一些效果很不错的应用。无论是视屏还是音频，都是一个容器文件，包含了一些音频轨道，视频轨道和一些元数据，这些是和你的视频或者音频控件绑定到一块的，这样才形成了一个完整的播放组件。浏览器支持情况：浏览器支持情况编解码器Chrome3.0Theora、Vorbis、OggH.264、AAC、MPEG4FireFox3.5Theora、Vorbis、OggIE不支持无Opera10.5Theora、Vorbis、Ogg（10.5）VP8、Vorbis、WebM（10.6）Safari3.2H.26 阅读全文
摘要：
HTML5的CavansAPI可以动态来展示图形、图表、图像以及动画，我们的这个离线系统中，主要用来设计Logo用的。在网页上使用Canvas的时，他会创建一块矩形区域，默认情况下宽为300像素，高为150像素，当然，可以自定义。因为我们离线系统主要职责用于在离线的情况下的工作系统，如在上面写工作日志，工作计划，和保存项目的评估数据；在网络在线的情况下与服务器交互，并将数据保存到Server的数据库中。所以我们的这个离线系统被命名为OFLMAIL，我们就根据这个名字来设计Logo。canvas中的坐标是从左上角开始的，X轴从左到右横向延伸，Y轴从上到下垂直延伸。通过坐标的刻量度来定位它的位置。 阅读全文
摘要：
在这个离线系统中，表单无疑是构成这个离线系统的视图部分，作为最前端，与客户的操作最密切相关的一块，所以我们有必要先了解一下HTML5的FormsAPI，它有如下特性：表单仍然使用Form元素作为容器，我们可以在其中设置基本的提交性质；用户或者开发人员提交页面的时候，表单仍用于向服务器端发送表单中控件的值；沿用之前的表单控件及其使用方法，并不断发展和增加新的控件和功能；可以用脚本操作表单控件；HTML5包含了大量的新的API和元素类型，如下：新的输入型控件：类型用途inputtype=datetime时间和日期输入框inputtype=datetime-local本地的时间和日期输入框input 阅读全文
摘要：
公司的NewCase，有需要离线应用工作系统这一块，目标是网络无论在线或离线情况下都可以执行系统操作，这样员工在无网络的情况下依然可以执行公司的项目任务，进行表单填报和数据的客户端保存，并在网络通畅的时候与服务端进行交付和数据通信。整体设计经过讨论使用HTML5的功能开发，并指定用户使用特定的浏览器。该系统包含了HTML5的FormAPI（表单），WebStorageAPI，CommunicationAPI(用于跨域访问)，WebDataBaseAPI，FileSystemAPI，以及离线应用程序的几个部分的操作，最后做成Chrome的应用程序插件（CRX文件），并发布给客户使用…使用HTML 阅读全文
摘要：
设计场景：Ben负责的书城网用户量不断增加，书城书籍的类型和数量也在不断扩大，这时候就有客户抱怨，说书城网站的购物车不够智能，体现在需点击图书项上的+号小标才能将它加入购物车，而且如果想要查看自己的购物车内容，还需点击页面购物车图标跳转到购物车内容列表去查看，这种跳转的效果相当糟糕，令一些老年客户抱怨不已，因为他们记忆力不佳，经常要返回查看自己买了什么...设计目标： 实现购物车智能化...解决方... 阅读全文