摘要：为推动Web标准化运动的发展，W3C推出了下一代 HTML的标准-HTML5，具有兼容性好，安全性高，功能丰富，开发便捷等优点，特别适合如Web操作系统一类的富客户端互联网应用的前端开发。
HTML5是下一代Web语言的标准，具有兼容性好，安全性高，功能丰富，开发便捷等优点，特别适合如Web操作系统一类的富客户端互联网应用的前端开发。本文将展示如何利用HTML5提供的多种新技术如：本地数据库、多线程开发、视频支持、离线编程等构建一个基本的Web操作系统。
简介
传统的操作系统有着一些难以克服的缺点，如仅能在本地终端访问，或仅支持有限的远程访问，限于本地终端的资源，计算能力薄弱，存储空间有限，缺乏强大的防火墙等一系列安全机制，安全性较差。鉴于以上缺点，Web操作系统应运而生-Web操作系统是一种基于浏览器的虚拟的操作系统，用户通过浏览器可以在其中进行应用程序的操作，以及相关数据的存储。Web操作系统提供的基本服务有文本文档的创建与存储，音频视频文件的播放与存储，提供对时间信息的支持等，更高级的服务则包含即时通信，邮件甚至游戏等服务。Web操作系统克服了传统操作系统的缺点，在网络的支持下，它可以在任何时间，任何地点经由任何支持Web的终端进行访问，可以利用服务器端无限的计算及存储资源，用户数据保存在服务器端，安全性较高。
相关技术
目前构建Web操作系统的前端技术主要有Flex、Silverlight、ActiveX 插件等等，它们各有一些优缺点。
Flex
Flex是一个优秀的富客户端应用框架，专注于页面显示，Adobe专业维护，统一稳定，而且其脚本语言ActionScript 3是面向对象的，非常适合程序员使用。缺点则是耗能高，占用带宽多，对移动应用的支持性差。
Silverlight
Silverlight是由微软推出的用以跟Flash抗衡的RIA（富互联网应用）解决方案，优点是具备硬件级的加速功能，但它目前仍不成熟，对非Windows系统的支持性并不够好，且学习难度较大。
ActiveX插件
ActiveX插件同样是微软推出的RIA解决方案，它是一个开放的解决方案，可以兼容多种语言，不过它的缺点也是显而易见的，用户需要调整浏览器的安全等级并下载插件才能运行RIA应用，极大地降低了安全性。
HTML5
为推动Web标准化运动的发展，W3C推出了下一代 HTML的标准-HTML5，为众多的公司所支持，因此具有良好的前景。它有以下特点：首先，为增强用户体验，强化了Web网页的表现性能；其次，为适应RIA应用的发展，追加了本地数据库等Web应用的功能；再次，由于高度标准化以及诸多浏览器厂商的大力支持，它的兼容性和安全性非常高；最后它是一种简洁的语言，容易为广大开发者掌握。更为难得的是，由于节能和功耗低，在移动设备上HTML5将具有更大的优势。因此更适合如Web操作系统一类的RIA 应用的前端开发。
系统简介
本系统基于HTML5开发，利用HTML5引入的多种新技术如拖拽API、视频标签、本地数据库、draw API、多线程开发、离线编程等提供了一个基本的Web操作系统环境，包含了对桌面的支持、应用程序的支持，提供了一个简单的视频播放器和记事本以及一个时钟，并对系统日志进行了记录，此外还提供了对离线状态的支持。
桌面实现
系统对桌面的支持主要包括应用程序图标的打开与拖拽，以及桌面的上下文菜单等。
桌面拖拽
桌面的布局由一定数量的div组成，它们按照次序依次排列在矩形的桌面上，为应用程序图标的打开与拖拽提供了基本的支持。
清单 1.创建 div
| var iconHolder = document.createElement("div"); iconHolder.id = 'iconHolder' + i; iconHolder.className = "iconHolder"; mainDiv.appendChild(iconHolder); |
HTML5提供了对drag事件的支持，大大简化了实现拖拽的难度。通过对dragstart事件的监听，将被拖拽的应用程序图标所在的div记录下来，作为拖拽的源。
清单 2.拖拽支持
| iconHolder.addEventListener("dragstart", function(ev) { var dt = ev.dataTransfer; dt.setData("text/plain", ev.currentTarget.id);// 记录被拖拽图标的 id }, false); iconHolder.addEventListener("drop", function(ev) { var dt = ev.dataTransfer; var srcIconHolderId = dt.getData("text/plain"); var srcIconHolder = document.getElementById(srcIconHolderId); // 如果拖拽至回收站，则删掉被拖拽图标，否则互换两图标位置 if(ev.currentTarget.firstChild && ev.currentTarget.firstChild.id == "recycleBin" && srcIconHolder.firstChild.id != "recycleBin"){ srcIconHolder.innerHTML = ""; }else if(ev.currentTarget.firstChild){ var temp = ev.currentTarget.firstChild; ev.currentTarget.appendChild(srcIconHolder.firstChild); srcIconHolder.appendChild(temp); }else{ ev.currentTarget.appendChild(srcIconHolder.firstChild); } }, false); |
通过对drop事件的监听，可以获取拖拽的源，以及拖拽的目标div。若目标div为空，则将源div中的应用程序图标转移至目的div中。若目标div中已包含应用程序图标，则将两个图标的位置互换。若回收站图标处于目标div中，回收站将发挥作用并将源div中的应用程序图标删除。图1显示了桌面拖拽的效果。
