CN102609401A - 一种网页批注方法 - Google Patents

Abstract

本发明涉及一种网页批注方法，包括步骤如下：1)在客户端装置的网络浏览器上开启一底层网页；2)读取网页尺寸在所述底层网页上建立一尺寸相同透明图层；3)通过客户端输入设备在所述透明图层进行批注；4)该批注信息保存至本地主机或远端服务器。本发明的网页批注方法克服了用户浏览网页时的被动性，设计一透明图层覆盖而不遮盖网页上的内容，用户通过透明图层在任意网页位置上随手图画、标记增加声音、图像、文字，并且能够多人协作参与，提高浏览效率、方便用户之间的交流。

Description

一种网页批注方法

技术领域

本发明涉及人机交互和互联网计算机技术，特别是涉及一种网页批注方法。 

背景技术

截止2010年，中国有4.2亿网民，全球有2.34亿家网站，上网浏览网页已经成了人们生活的一部分，但是传统的网页浏览方式比较被动和呆板，用户只能全盘接收网页制作者安排的所有内容，从中寻找自己想看的信息，用户在浏览的过程中，无法对任意网页做修改，无法个性化定制网页内容的显示方式，无法直接在任意网页上留下自己的想法和思路，因此个性化定制自己的网页，让用户能够在当前浏览的任意网页上随手涂画、留下文字标注、语音注释等信息显得尤为重要。在现有的文献和系统中没有见到相关的技术实现和有效的解决方案。 

另一方面，保存整个网页然后在本地修改的方式并无法满足用户的个性化订制信息的需求，美国Webnotes公司和UberNote公司分别推出了收费的网页注释服务(http://www.webnotes.net/、http://www.ubernote.com/)，用户可以通过他们的插件在网页上高亮文字，添加注释，然后公司服务器替用户保存该网页，建立用户网页档案，但是这种服务无法实现在网页上涂画的功能，无法做到个性化订制网页的效果，最重要的是，被用户涂改过的网页只是被复制了一份保存到了服务器，并没有实现用户个性化打造自己网页浏览方式的效。Googlenotebook(GNB)是google开发的协作编辑笔记系统，它的主要目的就是让组群用来收集资料，整理笔记。GNB主要用途是存储和共享，但无法直接画线条，不能实现在网页上自由的图画。 

发明内容

本发明的目的就是针对用户浏览网页的被动性，设计一个能够让用户随手涂画、在任意位置做标记、并且能够多人参与协作编辑的个性化的浏览器。利用计算机多媒体方面的WPF技术，在浏览器窗口覆盖一层透明的可以绘图编辑文字的画图层，用户可以一边浏览网页一边随手涂画或者添加文字、声音、视频等内容。 

本发明公开了一种网页批注方法，包括步骤如下： 

1).在客户端装置的网络浏览器上开启一底层网页， 

2).读取网页尺寸在所述底层网页上建立一尺寸相同透明图层， 

3).通过客户端输入设备在所述透明图层进行批注， 

4).该批注信息保存至本地主机或远端服务器。 

所述透明图层读取该网页尺寸，根据当前浏览器尺寸自适应调节。 

所述透明图层覆盖该底层网页，不遮盖网页上所显示信息。 

所述透明图层上加载交互元素用以在该透明图层上显示按钮、文本框，所述按钮、文本框为该网页批注的辅助工具，所述交互元素为该网页批注内容的入口。 

透明图层通过所述输入设备鼠标钩子特性，利用在所述透明层上的点击确定输入批注锚点并绑定批注与相应网页的相对位置，实现网页和透明图层的分层使用和叠加批注功能。 

所述批注插件输入设备包括，鼠标，键盘，麦克风、摄像头、ink笔等各种输入设备。 

所述批注信息被保存在本地主机或远端服务器的XML文件中。 

所述保存远端服务器的XML文件经过保密处理、用户授权处理后提供给运营商。 

所述XML文件中保存所述批注网页URL地址、记录时间，所述XML文件还包括保存图画批注记录isf文件、录影wav、wmv文件路径，用以实现用户端下一次访问调用。 

所述透明图层通过WPF技术实现构造，该透明图层上加载的交互元素通过WPF技术中Canvas控件对所述透明图层布局。 

所述透明图层能够实现多人协作批注，当协作人打开加载所述透明图层的相同网页，可以通过交互元素中的协作功能按钮，在各个协作人之间共同进行批注。 

本发明一种网页批注方法，克服了用户浏览网页时的被动性，设计一透明图层覆盖而不遮盖网页上的内容，能够让用户在任意网页位置上随手图画、标记增加声音、图像、文字，并且能够多人协作参与，提高浏览效率、方便用户之间的交流，更进一步，网站运营商还可根据用户对网页内容的图画行为，提供更人性化的服务和更受欢迎的内容。 

附图说明

图1是本发明网页批注方法的透明图层的界面示意图。 

图2～7是本发明网页批注方法的一实施例图画批注记录示意图。 

图8是本发明网页批注方法的一实施例中网页收藏夹功能示意图。 

图9a、9b是本发明网页批注方法的一实施例的多人协作编辑功能示意图。 

图10是本发明网页批注方法的一实施例处理网页快照的流程图。 

图11a～11c是本发明网页批注方法的一实施例进行多人协作批注时发起编辑和参与编辑的操作流程图。 

具体实施方式

实施例1 

如图1是本发明网页批注方法的透明图层的界面示意图，利用控件识别网页分辨率方法，叠加与尺寸一致的透明层，在透明层上的点击确定输入批注锚点，并绑定批注与相应网页的相对位置。1).在浏览器在打开网页时启用批注插件；2).批注插件自动获取网页的分辨率、尺寸大小等信息，在网页上建立一尺寸相同透明图层；3).通过网页批注插件中的批注功能按钮进行网页上相应位置上得批注；图下方加载了控件按钮，实现如清空、画笔、橡皮擦、复制、粘贴、删除等功能，结合图2～7，所示的批注功能，用户可以使用各种颜色、粗细的画笔和橡皮擦在画板上涂画和擦除。用户可以在下方的辅助工具栏选择笔触、颜色在网页上任意位置进行涂改，可以在键盘上按“W(并不规定只能是“W”，在键盘上任意除功能键以外的按键均可，可以通过批注插件的属性修改，由用户定义各批注功能热键，以下各键均类似处理)”键在开启文字注释功能，并在当前鼠标所处位置添加文字注释；可以按“R”键开启录音、录像功能，鼠标放置在想要进行录制的文字处，通过外置摄像头或扬声器，录音、录像结束后，在鼠标所处位置留下保存有该录音录像标记的按钮，用户可以点击此按钮播放自己记录的声音、视频。 

通过键盘上的“空格”用户可键隐藏或显示画板，或者按住键盘上的“G”键(不一定是G键，随意设定除功能键外的某个键)点击鼠标，使得鼠标的点击操作穿透画板，直接作用在网页上，这样透明画板的存在不会干扰用户在网页上的其他操作。 

如图6～7所示的用户批注页面，用户可以使用高亮的颜色将感兴趣的内容高亮，而将自己不感兴趣的内容涂黑，实现网页内容的定制和个性化，而被涂黑的部分遮住了相应的底层网页，减少了错误点击不感兴趣的内容。或者通过批注中得ink手势，通过圈定需要或者不需要的网页内容块，进行去除或者保留内容的操作。 

当用户进行完批注，可用鼠标拖动网页旁滚轴，继续浏览网页内容，当将内容下拉，此时在上一个透明图层上的批注会随着拉动网页而移开，并不遮盖下一次用户想要批注的内容，用户在透明图层所做的批注的位置与实际网页的位置是一一对应的，当用户拖动滚动条拉动网页的时候，透明图层也会随着移动，批注也网页内容保持一致。 

实施例2 

如图8是本发明网页批注方法的一实施例中网页收藏夹功能示意图。当用户编辑完毕的时候可以点击批注插件工具栏中的“保存”按钮进行保存，保存之前可以选择此页面涂改的分类，填写简单注释信息。用户在画板上的涂改被保存为单独文件，涂改、录音、录像文件 的文件名、标签、注释、时间和被涂改网页网址等内容保存在记录文件XML文件中。用户可以在上方工具栏点击“收藏夹”按钮打开收藏夹，里面分类显示了用户所有的涂改网页信息，也可以按历史记录显示，用户鼠标移入某个收藏项目时显示注释。 

如图10是本发明网页批注方法的一实施例处理网页快照的流程图，用户打开网页，输入网址时，所述透明图层会判断是否有该网页相关的画图记录，若有则在保存了用户涂改信息的记录文件的本地计算机的XML文件中搜索进行是否有关于该网页的涂画信息，是否有关于该网页的涂改记录，如果有涂改记录的话再搜索是否有保存网页快照，如果有保存网页快照且源网页与网页快照相比较有差异的情况下，系统提示用户选择打开网页快照，网页快照是由本系统通过浏览器保存的当前网页的源代码或者源网页。网页打开后，在当前画板打开相关的涂改记录文件包括各种笔迹、文字和录音录像的标记按钮，将最新的涂改结果呈现给用户，于是用户看到的是网页和涂改内容叠加起来的个性化的页面。 

实施例3 

图9a、9b是本发明网页批注方法的一实施例的多人协作编辑功能示意图。用户可以在上方工具栏点击“在线协作编辑”按钮，出现多人协作编辑窗口，图9a所示是用户可以选择“我是服务器”选项卡，新建一个多人协作编辑组，当用户作为服务器端发起一个协作编辑服务，其他用户可以作为客户端申请连接服务器参与协作编辑，服务器端审核用户的申请能连上网络的计算机，然后都安装此系统就行了，原型里面是直接输入服务器端ip，实用化的话还需要考虑更多。图9b是用户可以选择“我是客户端”选项卡，加入别人建立的多人协作编辑组作为客户端只要向服务器端发送参加申请，服务器端批准后，客户端方可参与编辑。参与共同编辑与讨论。 

图11a、11b是每个用户的编辑改动都会发送到服务器端，由服务器端审核是否采纳该客户端的改动，如果采纳，则将改动结果发送给所有客户端，同时，服务器端和客户端都保存了每次改动前的历史编辑内容记录，每条历史记录都包括时间和修改人等信息，可以让用户回退到画板的任一历史状态，历史状态会有一个列表显示，历史状态只记录批注信息，用户点击某条历史状态记录，透明画板模块就显示该条记录的信息(涂画、文字、语音等)，在实际应用上更倾向于教学用途(比如教老人网络购物)。其优势使享组群能够实现共同编辑同一个网页。 

图11c是用户参与编辑内容，等待服务器端审核，如果审核通过，则该编辑内容将被发送给其他所有客户端。当用户接收到最新编辑内容时，他可以选择是否加载，这样不会破坏用户正在进行中的编辑活动。当网页上相同内容出现冲突的批注时，此处可以用颜色等显著 差别手段呈现不同的协作者的批注内容。是否需要消除该冲突批注，有协作发起人与批注人协商后由协作发起人修改冲突批注。 

实施例4 

一种本发明的较佳实施方式为：建立底层网页使用IE网络器开启，在底层网页上建立图1的发明网页批注方法的透明图层的界面图层，获取当前浏览网页的尺寸，然后根据获得的数据建立一个新窗口，恰好覆盖浏览器的浏览区域，运用WPF技术Canvas控件的透明属性实现透明和各种涂画功能，通过动态加载控件的方式实现文字、语音等标注功能。批注将会使用到鼠标、键盘、麦克风、摄像头、ink等电脑输入装置。透明图层覆盖该底层网页，不遮盖网页上所显示信息，这样用户进行的涂画才会与网页内容一一对应，透明层窗口分辨率与浏览器网页分辨率一致，与当前屏幕大小无关，叠加显示在网页上方。 

用户可以一边浏览网页一边随手涂画或者做文字、声音、录像记录，画板的涂写内容以及各种记录标识与浏览器的网页显示叠加在一起，从用户的角度看就像是自己亲手订制的网页，增强了用户网页浏览的体验，提高了用户上网的效率，更重要的是便捷的留下了用户在当前网页此时此刻的想法。 

尽管为说明目的公开了本发明的实施例和附图，但是本领域的技术人员可以理解：在不脱离本发明及所附的权利要求的精神和范围内，各种替换、变化和修改都是可能的，因此，本发明的权利范围不局限于实施例和附图所公开的内容。 

Claims (10)

1.一种网页批注方法，包括步骤如下：

1)在客户端装置的网络浏览器上开启一底层网页；

2)读取网页尺寸在所述底层网页上建立一尺寸相同透明图层；

3)通过客户端输入设备在所述透明图层进行批注；

4)该批注信息保存至本地主机或远端服务器。

2.如权利要求1所述的网页批注方法，其特征在于，所述透明图层读取该网页尺寸，根据当前浏览器尺寸自适应调节。

3.如权利要求1所述的网页批注方法，其特征在于，所述透明图层覆盖该底层网页，不遮盖网页上所显示信息。

4.如权利要求1所述的网页批注方法，其特征在于，所述透明图层上加载交互元素用以在该透明图层上显示按钮、文本框，所述按钮、文本框为该网页批注的辅助工具，所述交互元素为该网页批注内容的入口。

5.如权利要求1所述的网页批注方法，其特征在于，透明图层通过所述输入设备鼠标钩子特性，利用在所述透明层上的点击确定输入批注锚点并绑定批注与相应网页的相对位置，实现网页和透明图层的分层使用和叠加批注功能。

6.如权利要求1所述的网页批注方法，其特征在于，所述批注信息被保存在本地主机或远端服务器的XML文件中。

7.如权利要求6所述的网页批注方法，其特征在于，所述保存远端服务器的XML文件经过保密处理、用户授权处理后提供给运营商。

8.如权利要求6所述的网页批注方法，其特征在于，所述XML文件中保存所述批注网页URL地址、记录时间，所述XML文件还包括保存图画批注记录isf文件、录影way、wmv文件路径，用以实现用户端下一次访问调用。

9.如权利要求1所述的网页批注方法，其特征在于，所述透明图层通过WPF技术实现构造，该透明图层上加载的交互元素通过WPF技术中Canvas控件对所述透明图层布局。

10.如权利要求1所述的网页批注方法，其特征在于，所述透明图层能够实现多人协作批注，当协作人打开加载所述透明图层的相同网页，可以通过交互元素中的协作功能按钮，在各个协作人之间共同进行批注。

Images