首 页 | 网络测试 | 网络市场 | 网络技术 | 业界动态 | IT文摘 | 服务中心 | 网速测试 | IP查询 | 发布广告 | 什么是测试点

首页  -> 网络技术  -> 网络系统集成 -> 正文

 

全面认识浏览器工具条


2006年6月26日 作者:世界网络教研室

随着互联网的迅速普及,网络用户在网上冲浪访问网站时,享受着网络带来的各种体验,工具条也越来越成为这种体验不可或缺的重要组成部分。有的用户安装某个工具条软件后,享受着工具条软件带来的便捷和易用;也有的用户计算机被莫名其妙地安装了自己并不喜欢的工具条软件,而带来不少痛苦。那么工具条是什么,这其中的奥妙又是什么,世界网络教研室方体先生为您全面解说浏览器工具条。

三. 如何制作工具条

在了解了以上工具条特征和作用以后,我们可以考虑开始制作一个工具条。在制作工具条前,我们先需要明确一个问题,我们制作什么类型的工具条?

1. 如何开始准备

在准备开发工具条前,需要进行三方面的准备:功能需求准备、图标准备、程序接口准备。下面分别就这三方面的准备分别介绍。

首先是工具条功能需求准备。在安排软件工程师进行工具条开发前,需要提交给软件工程师一份《工具条软件需求说明书》。不同类型的工具条,其功能设计的原则也不大一样。可以参考本文“工具条类型”章节的描述。

有个很有效果做法就是:用表格设计工具条的按钮及功能,用表格描述下拉菜单的名称及对应的链接或功能,再加一张工具条效果图。这样有两个好处:一是自己很对工具条需求和功能布局很清楚,另外就是交给软件工程师进行开发时,开发人员很容易理解。

其次是工具条图标准备。工具条的图标包括工具条Logo图标、按钮图标以及下拉菜单图标。工具条上的按钮图标一般默认的高度都是16像素,所以在准备图标时,建议把高度调整为16像素。对于图标类型,一般不外乎ICO、BMP、GIF格式。JPEG格式在工具条上很少用,因为工具条对颜色的要求不是很高,主要是清晰。不同的图标格式,对工具条开发时要求是不一样的,在准备图标时,建议最好先咨询软件工程师。

一般在工具条上使用最多的是ICO格式图标,ICO格式文件通常要比BMP格式文件小很多。在所有开发工具条的开发语言中,对ICO格式支持最好。笔者曾经选用了一些图标制作工具,还是觉得IconCool Editor比较不错。IconCool Editor是一款国外提供的软件,网上也有其汉化版。

在准备工具条图标时,有两点非常重要:

1) 把图标处理成透明背景。如果不是为了特殊效果,把图标处理成透明背景,这样图标就可以清晰地融合在工具条上。

2) 用24位真彩色或其以下的颜色深度。可以使用256色、16位增强色、24位真彩色,但最好不要使用32位真彩色,否则工具条不做特殊处理不能支持,显示不出图标。

在IE秀网站制作工具条的过程中,提供了不少多种类型的图标库,对于想偷懒一下,是个不错的选择。幸好上面的图标可以直接保存到本地使用。

最后是程序接口准备。程序接口不是工具条本身的接口,而是工具条上按钮或菜单对应的网页链接或功能。也有的人会问,我们的网站都是现成的,还需要准备程序接口吗?其实不然,因为网站开发时使用的URL地址或参数都是为网站服务的,网站中各个不同页面之间有很多关联,当时网站开发时并没有考虑到工具条的需要。

工具条上使用的网页链接最好使用比较固定不变的地址,否则网站修改后工具条上的链接就会出错。我们在准备过程中可能碰到以下三种不同的情况:

1) 有些功能需要重新组织。比如:网站提供了多种查询,这些查询页面分布在不同的位置,如果工具条直接采用这些查询地址,就难以维护,而且参数都有比较大的差异,如果能提供为工具条上的搜索提供统一的一个查询接口,再由这个接口调用不同的查询地址,这样就有利于维护。

2) 有些已有的网站程序需要调整。比如:工具条提供会员查询自己商品订购功能,在网站设计中,如果用户没有登录直接输入地址访问此页面,一般会提示用户“您尚未登录,请重新登录”字样,因为这样的操作一般是不允许的。然后在工具条上提供此功能,就最好不要给出此提示,而应该引导用户到一个登录页面。

3) 有些功能需要开发。比如:工具条上提供的滚动新闻、RSS等动态内容,可能没有现成的程序,需要进行设计开发。在这类功能设计开发前,需要和工具条程序所要求的接口一致,否则无法调用或者不能正常使用。

2. 如何开发工具条

由于目前用户使用的Web浏览器包括IE、Mozilla Firefox、Maxthon、腾讯TT等,不同浏览器的工具条开发技术差别很大。所以我们需要确定制作的工具条在什么浏览器上运行。目前在国内几乎95%以上的网络用户都是使用Internet Explore浏览器,下面以在IE上开发工具条为例进行说明。本文不就具体开发过程描述,主要对工具条的相关开发知识做些简要介绍。

浏览器有两种主要的插件技术:一是浏览器辅助对象(BHO)插件;二是浏览器栏对象(Band)插件。各个浏览器对BHO和Band的支持方式也差别很大。

BHO是依托于浏览器主窗口,和浏览器实例的生命周期一致的组件。在组件内,可以接收浏览器的动作事件,同时,在这些事件的响应中实现与浏览器的交互。

Band和BHO有些类似,Band需要比BHO实现某些Band接口,从而可以创建窗体。由于Band也是一类组件,所以Band也需要放到一个容器(即浏览器)中去使用。Band 对象分三种类型:浏览器栏(Explorer Bands)、工具栏 Band(Tool Bands)和桌面工具栏(Desk Bands)。

浏览器工具条也就是工具栏,是浏览器Band插件。IE浏览器工具条的默认显示需要借助BHO的ShowBrowserBar方法来实现。因此,开发工程师在准备开发IE工具条前,首先需要了解Band和BHO的相关知识。

对开发人员,有一个必须面队的问题就是选用什么开发语言开发工具条。VB、VC、Delphi、C++.NET、C# 都可以用来开发浏览器工具条。无疑VC是开发语言首选,也许有人会问,用C++.NET托管代码开发不好吗?那当然不行,托管代码需要有Microsoft .NET Framework支持才能运行,我们不能都让Windows 2000、Windows XP的用户去下载安装Microsoft .NET Framework吧。VC是开发语言首选的原因主要有三个:一是VC运行效率高;二是VC发布的程序包最小;三是VC可以很好地进行ATL组件开发。以上前两个原因是互联网用户使用浏览器工具条的两个重要因素。

在实现IToolBar接口的ATL组件内,工具条按钮的创建是通过对TBBUTTON结构的设置来决定每一个工具条按钮的信息。TBBUTTON结构的数据成员包含了工具条按钮的图标、标题、类型、状态等相关信息。通过创建工具条的窗口句柄,并向工具条发送TB_ADDBUTTONS消息来完成工具条按钮的创建。对于工具条上的非按钮控件(比如输入框、滚动新闻、音乐播放等),则需要特殊处理。

工具条看起来占的位置不大,开发工作量确是很大。除了以上提到的Band和BHO技术,软件工程师还需要面对文件、注册表、图片、输入框、下拉菜单、事件响应、浏览器操作、中文支持等重重挑战。

3. 如何发布工具条

工具条开发完成并不能直接提供给用户使用,只有把工具条组件及相关文件打包成用户可以直接使用的安装包后,用户才可以直接使用。这个过程通常被称为工具条打包发布。

完成《工具条软件需求说明书》中所描述的功能开发,同时打包发布工具条后并在Windows 98、Windows 2000、Windows XP、Windows 2003下测试通过并后,软件工程师才算最终修得正果。

IE浏览器工具条发布有两种方式:一种是打包成EXE或MSI安装执行文件进行发布,另一种是打包成CAB包实现Web自动下载安装。软件工程师在制作这两种安装包时,所需要的打包软件是不一样的。在制作安装执行文件时,我们可以使用Install Shield、Wise等专业打包软件制作。在制作CAB自动下载安装时,我们可以使用Cabinet Manager、WinCAB等CAB打包工具。Windows在系统目录自带了一个CAB制作工具IExpress(下图是IExpress启动后的界面),网络上也可以下载IExpress 中文汉化版本。如果对命令行操作情有独钟,我们可以使用Windows自带的makecab.exe命令。

那么这两种安装方式除了制作过程不一样之外,在使用过程中有什么差异呢?下面我们来了解一下这个问题。

对于第一种安装执行文件方式,就像QQ、BitComet等软件一样,用户需要从网络上下载并运行安装才可以进行,在安装过程中会有安装提示界面,用户通过点击“下一步”根据安装向导完成工具条的安装。

使用第二种安装方式时,CAB文件需要通过Object元素内嵌到网页代码中。当用户浏览这个页面的时候,CAB将根据IE的安全设置规则进行提示或自动下载安装。在有安装提示的时候,用户只要点击安装ActiveX控件即可完成安装,整个下载安装过程没有下载进度条,也没有安装向导,自动完成下载安装。那么有的读者会问,自动下载安装什么时候有提示?什么时候没有提示?能不能不提示就自动下载安装?这个我们留待“代码数字签名”章节描述。

这两个打包发布方式的安装方式有比较大的区别。主要表现在以下几个方面:

1) 用户体验是不一样的。对用户而言,安装执行文件方式是个主动的过程;而自动下载安装方式更多是被动接受的过程。

2) 被安装的机会是不一样的。由于安装执行文件方式是主动的过程,用户只有了解后才会安装;而自动下载安装方式有如其名,很容易在用户不知情的情况下安装。

3) 安装过程是不一样的。安装执行文件方式往往提供了傻瓜安装向导;而自动下载安装方式则一般没有任何显式安装过程。

4) 卸载难易程度是不一样的。一般安装执行文件方式可以在程序菜单或删除程序中将安装的工具条卸载掉;而自动下载安装方式往往不在删除程序中提供删除方式,需要手动通过IE本身提供的功能进行删除。

5) 文件大小是不一样的。由于安装执行文件方式包含了安装过程,其包含安装向导需要的内容,所以此类工具条安装文件的大小要比CAB格式的文件大一倍或以上。

6) 对代码数字签名的依赖是不一样的。安装执行文件方式是主动的过程,不需要代码数字签名也没有影响;而自动下载安装方式在目前操作系统应用情况下,必须依赖有效的合法数字签名才可以进行,否则对Windows大多数操作系统而言,则安装不了。

当然,越来越多的工具条发布者更乐意同时选择两种工具条打包发布方式,让用户自由选择。

发布工具条前,有一件必须高度重视的事情需要去做。那就是把打包完成的安装包在不同操作系统、不同补丁、不同IE版本下进行严格测试。笔者在Windows 2000 Professional操作系统上以及IE 5.0版本下安装一个非常知名网站工具条时,一启动IE浏览器就导致系统崩溃。对于用户而言,这是多么致命的伤害啊!

4. 代码数字签名

什么是代码数字签名?代码数字签名软件开发商使用自己的合法数字证书添加一个数字签名在其代码上,签名后的代码不能被篡改或破坏,否则已有的签名失效。这样,用户下载或安装时就可以确信此代码开发者的真实身份,并且确信此代码没有被非法篡改和被破坏。代码数字签名相当于纸面合同签字,但谁来认证我们签字的真假呢,这就需要有权威的证书机构给我们颁发合法的数字证书。

软件开发商可以使用代码签名证书来签名EXE、DLL、CAB、OCX、CLASS、Java Applets 等多种代码。

IE浏览器怎么和工具条CAB安装包的代码签名结合起来呢?首先,IE浏览器判断此CAB安装包是否有数字签名标志;如果有数字签名,则验证签名时用的数字证书是否是IE认可的数字证书链上的证书,如果不是,则等同认为是没有数字签名。

然后IE查找当前站点所在的安全区域,读取Internet选项中安全区域关于“下载未签名的ActiveX控件”、“下载已签名的ActiveX控件”、“运行ActiveX控件和插件”的设置(如下图所示)。根据这些设置分别执行禁用、提示或启用的动作。我们也许会问,能否不提示用户而直接安装CAB安装包呢?实际上这就和上面所说的数字签名和IE安全设置有关,如果用户当前访问网站的安全区域设置为“启用”,则就不会有提示。

这里面有个很有意思的事情。默认安装后的IE浏览器认可哪些机构颁发的数字证书?我们通过IE的Internet选项下的内容中,点击证书按钮,我们可以看到IE浏览器默认的受信任的根证书颁发机构名单。那么如果我们用北京数字证书认证中心、广东省数字证书认证中心颁发的数字证书对IE工具条代码进行数字签名,IE能否认可?目前情况下,默认安装后的IE是不认可的。所以,对IE工具条进行代码数字签名,国际上用的最多的是Verisign颁发的数字证书。

那么,我们得到Verisign颁发的数字证书后,我们怎么对代码进行签名。微软提供了专用的文件签名工具(Signcode.exe)。运行Signcode.exe 后,进入代码数字签名向导界面,按照界面提示即可完成数字签名。我们可以使用Windows命令程序chktrust.exe来查验已经签名的代码信息。对经过合法数字签名后的代码进行验证,其提示信息包括软件名称、发行者信息、数字证书颁发者等信息(如下图所示)。

5. 工具条制作软件

如果自己安排人员开发浏览器工具条,开发成本是非常高的,并且由于开发经验的缘故导致开发风险也非常高。工具条的开发涉及面很广,而且又要适应不同操作系统平台的需要,要求开发人员有非常丰富的经验。

非常庆幸的是目前市场上已有不少现成的软件可以帮忙我们很轻松地制作浏览器工具条。

第一个就是IE秀(http://www.ieshow.net/)。这不是一个软件,而是一个中文网站,网站上提供了一个“在线制作工具条”的功能。这个网站最大的特色不需要下载安装软件,直接在线制作工具条。“免费”和“自己动手制作工具条”也是IE秀比较有吸引力的特色。我们只要通过简单的几个步骤就可以制作出自己的工具条,网站上生成的安装包是EXE安装执行文件格式。美中不足的是没有直接提供CAB自动下载的安装方式。一个按钮设置页面效果如下。

IE秀为每个工具条用户提供了“管理我的工具条”功能。可以用来在线查看、修改、定制自己的工具条。基本上实现了DIY工具条的功能。

第二个就是Best Toolbar(http://www.besttoolbars.net/)。Best Toolbar提供了一个ToolbarStudio软件,下载安装后就可以开始使用这个软件了。这个是客户端,可以同时生成EXE安装执行文件方式和CAB自动下载安装方式。定制功能还是不错,在国内也好象开始提供中文版,没有购买此软件制作的工具条后面带有BestToolBars.Net图标。软件操作界面图如下:

第三个就是Alexa定制Logo服务(http://pages.alexa.com/prod_serv/associatetoolbar.html)。Alexa提供了一个在现有的Alexa工具条上更换网站图标的功能。对上传的图标有一定的要求,具体可以参考Alexa的图标要求。Alexa定制服务仅仅只能更换Logo,不是真正意义上的制作自己的工具条,在此列出仅供读者参考。下面是中国同学录快捷工具条,就是通过Alexa定制自己Logo的一个效果图。

6. 如何推广工具条

制作完工具条后,如果是网站型工具条,我们需要把网站工具条提供给用户下载使用。目前,有不少的网站推广人员总是希望自己的工具条在用户不知情的情况下强制安装到用户浏览器上,这种方式会有什么效果?

我们先来探讨一下强制安装的方式。强制安装无非有三种方式,一种是在IE安全级别许可的情况下通过数字签名后的CAB方式自动下载安装;第二种是利用IE的漏洞伪装成木马方式进行自动安装;第三种是捆绑在其他软件中一并安装。

网站工具条是一个浏览器栏对象插件,安装后必然在IE浏览上显示出来,如果采用第二种和第三种安装方式,必然引起用户反感。所以从效果上来说,只能是适得其反。如果不是工具条,而是类似的3721的地址栏插件,因为没有任何显示窗体表现,从推广效果上来说,可能短期会有一定的效果,但长期只能是落得3721类似的下场。

今年3月初,腾讯公司刚刚推出搜索网站SOSO(soso.com)后,就被用户指责在QQ、QQ游戏软件中捆绑强制安装QQ搜索工具条软件。腾讯公司随即发表声明称,用户在安装QQ的过程中,用户可以选择是否安装搜搜地址栏软件,同时腾讯搜索和地址栏搜索插件并没有强制用户安装,也可以完全卸载。

所以,从强制安装的方式来说,采用合法数字签名的Web自动下载安装方式来说是一种最有效的方式。当然这种方式也不适于在网站的每个页面部署,笔者推荐在一个工具条介绍的页面部署即可。建议最好不要在主页部署,在主页部署会影响主页的下载显示速度。做网站优化的专家们知道,主页的下载显示速度是影响用户访问网站的一个重要指标。

那么我们有哪些途径可以让用户下载并使用我们的网站工具条呢?笔者提供以下一些建议,以期抛砖引玉。

1) 与其单一推广工具条,不如把网站做好。网站工具条往往是网站的忠实用户安装使用,可以便捷地使用网站的功能。

2) 设计一个专门的工具条介绍页面。用户只有充分了解了工具条的功能后,才能决定是否安装使用。

3) 结合网站的行业特点,在行业相关的专门论坛介绍工具条,提高工具条的暴光度。

4) 在相关的搜索引擎、软件下载、工具条站点提交网站工具条的安装软件。在IE秀网站的IE秀场中有不少工具条可供下载。

5) 邮件给网站的会员,并说明此工具条的重要功能。

6) 如果还不能有效地推广工具条,那么适当地调整工具条功能,研究用户访问这个领域哪些网站,适当地增加这些网站链接或功能。与其说我们在宣传竞争对手,不如说我们搭上了人家的高速列车。

7. 制作工具条双十原则

结合上面所述,笔者把制作浏览器工具条需要注意的事项概括并补充为十个不原则:

1) 工具条整个宽度不宜太长。参考IE秀提供的建议,推荐工具条的最大长度为800px。

2) 工具条的下拉菜单不要太长。一般不要超过10个菜单项。

3) 不应该把网站的栏目原样照搬到工具条上。

4) 工具条上使用的多个图标的颜色色系不宜差别太大。

5) 不要使用不清晰的图标。与其使用不太清晰的图标还不如不用图标。

6) 不要使用IE默认安装后不认可的证书对代码进行签名。

7) 不要把工具条做成流氓软件。这样会导致用户反感。

8) 工具条上提供滚动新闻时,滚动不宜太快或太慢。

9) 不要在网站的每个页面提示用户下载安装工具条。

10) 不要不经过严格测试就直接发布给用户使用。

 

同时,笔者提供制作浏览器工具条中的十个小技巧,以供大家借鉴:

1) 把工具条按钮和功能分组,不同组之间用分隔符隔开。

2) 在制作工具条下拉菜单时,为每个子菜单项定义快捷键。

3) 为工具条上每个按钮或功能增加简洁易懂的文字提示。

4) 在工具条上使用透明背景的ICO格式图标。

5) 在工具条上提供用户一些个性化的功能。

6) 在设计搜索输入框时,使用下拉式的输入框并且可以记忆。

7) 如果工具条本身不能自动升级,增加在线升级功能。

8) 在制作网站型工具条时,适当增加此类用户经常访问的其他网站链接或功能。

9) 设计一个独立的页面介绍工具条功能,并在主页做好链接。

10) 提供两种工具条安装方式,让用户自行选择。

下一页  上一页

本专题相关文章

全面认识浏览器工具条(一):什么是工具条

全面认识浏览器工具条(二):工具条有什么用

全面认识浏览器工具条(三):如何制作工具条

全面认识浏览器工具条(四):如何使用工具条

全面认识浏览器工具条(五):工具条大巡礼

全面认识浏览器工具条(六):总结

本专题文章于 TOM 等网站均有转载