IE 8 Beta 1 出来好久了,由于对IE7的使用仍然心有余悸(之前曾装了IE7又马上转向了Firefox阵营),我这次IE8的安装仍然忐忑不安。无奈经常需要使用代理浏览,而不知怎么搞的使用Firefox的about:config配置了N多遍了怎么也配置不好,每当别人嘲笑我说怎么还用老古董的IE6时,我就无可奈何。。。今天也要尝尝鲜了!
不看不知道,发现IE8的功能非常强大,其中最为耀眼的便是其强大的代码调试工具,同火狐的Firebug的距离又缩小了一大步。除此之外,IE8还有两个令人眼睛一亮的功能:WebCast和Activity(为方便尝试,本文采用http://ie8.taobao.com/list.php作为示例,这是淘宝针对IE8New Features 提供的Preview 页面,支持Web Cast和Activity。)。
1. Developer Tools
Developer Tools 提供了三个Tab, HTML/CSS/Script,其中,HTML Tab显示DOM树,CSS Tab显示CSS样式表,Script Tab会提供页面源代码,并方便我们对JavaScript的调试。有人说:这有什么稀奇的呢?先别急,我们先看看Debug的功能:
当我们点击了"Start Debugging"的按钮后,就可以设置在Javascript脚本中设置断点了,这令在IE中调试动态语言的梦想变成了现实。然后可以在右侧的窗口中查看系统中Local变量当前的值。同其他程序语言的调试工具一样,可以Step into, Step over, 查看调用栈以及添加查看的变量等。另外,Developer Tools还提供了Immediate Window允许开发者在当前的上下文环境中撰写Script代码并立即显示结果。
更为神奇的是HTML Tab。HTML Tab除显示DOM树之外,在其右侧窗口还会根据选择的DOM节点,显示每个标签使用的CSS样式表,当前标签的Layout模型,每个样式继承自何处,都可以非常直观的看到。而且,当我们想知道去掉某个CSS样式后的网页效果时,只需要将CSS表中相应项的check去掉,就可以立即在原始网页中观察到效果!
除此以外,Developer Tools提供了View和OutLine两个Menu,OutLine菜单提供了对不同的HTML元素的高亮显示(同FireFox提供的功能类似),而View菜单对于网站设计者非常有用,提供了"IE5”,"IE7","IE8"3种不同的模式预览页面。开发者可以快速的检测页面的IE兼容性。(唉,如果IE或Firefox能够提供对对方产品的兼容性就更好了。。。不过应该是遥遥无期的事情)
2. Web Cast
在淘宝的这个页面中,当鼠标移动到列表中的商品时,在左上方会出现一个小图标 ,该小图标提示使用者可以将此条目加入Web剪辑中。鼠标选择该条目,会弹出Web Slice的提醒页面,选择“Add”之后,在IE中便可以在Favorites中看到该Web Slice的导航标签了。单击该标签,便可以看到商品的信息。
这是怎么做到的呢?我们使用Developer Tools来查看一下HTML代码,发现所有的商品表格中都有类似这样的属性:
<tr class="hslice" id="item_5"> <td width="20%" valign="middle" align="center" height="90" class="entry-content"> <img src="http://img08.taobaocdn.com/bao/uploaded/i8/T1n8RbXb0n_QxtXcfX_114424.jpg_sum.jpg" border="0" title="装饰画/无框画/客厅/ 手绘油画/版画//客厅/ 0705DM1314" /></td> <td width="60%" height="90" class="entry-title"> <a target="_blank" href="http://auction1.taobao.com/auction/0/item_detail-0db2-ccabd3de2b21ee9744c062589e5be157.jhtml">装饰画/无框画/客厅/ 手绘油画/版画//客厅/ 0705DM1314</a> </td> <td width="20%" height="90" align="center" class="entry-content"> 一口价 <span class="price"><sup style="color:#111;">¥</sup>59.00</span> <a style="display:none;" rel="feedurl" href="webslice/feed.php?itemID=ccabd3de2b21ee9744c062589e5be157&xID=0db2">订阅到 WebSlice</a> </td> </tr> |
支持Web Slice Support的关键的属性为class="hslice", class="entry-content", class="entry-title"。 WebSlice 使用 hAtom Microformat 和 WebSlice 格式的组合来描述 Web 页面的可预订部分。订阅WebSlice后,WebSlice标签显示的标题为entry-title中注明的标题,在该例中,预览后显示的内容为entry-content链接的feed中最新的内容。请注意:Web Slice会自动更新状态。比如,拍卖的商品剩余时间会由于点击Web Slice的时间不同而自动更新。
3. Activities
在以前,我们使用复制和粘贴技术将一个网站有用的信息复制到另外一个网站。
比如,我们在网上看到了一个朋友的联系地址,想要使用Google Map的服务,我们的做法是这样:复制这个地址,打开google map,然后粘贴该地址用于检索。当我们想要再次进行查找时,又要重复一遍这样的过程。
再比如,我们在网上看到了一个QQ号,想要了解该QQ号的主人的相关信息。那么我们需要首先打开QQ,然后查找QQ用户,输入QQ号码,得到搜索结果之后才能查看用户信息。。。
IE 8的Activities特性使用户不再如此繁琐。如果服务提供商能够遵循“OpenService 活动”XML格式来指定HTTP请求的格式,并且在网站中加入活动安装按钮,则不需要用户访问相应的网站,便可以使用服务了。
在淘宝IE8的页面中,选择右侧的安装Taobao Activity按钮,安装淘宝商品搜索Activity。然后,当选中某些相关的内容后,会出现Activity浮动Toolbar,选择该浮动Toolbar,下拉列表中将出现所有可用的服务。将鼠标移到“淘宝搜索”Item上,将会自动弹出前12个搜索结果的图片。可以直接点击图片以查看内容。
这是怎么实现的呢?同样非常简单。只要在原来已有服务的基础上,按照OpenService 活动XML格式来描述服务,并提供发布活动的方法就可以了。下面为淘宝的Open Service Definition代码:
<?xml version="1.0" encoding="UTF-8" ?> |
如果要发布活动,需要运行如下javascript代码:window.external.addService("<yourpath>/GetMap.xml");
淘宝是通过如下方法加入的:
<script type="text/javascript"> <!--HTML TAG--> |
IE8当前已经支持的有下面这些活动服务(你可以很容易的用上面的方式添加自己的活动服务):
map:Windows Live Map、Google Maps、Yahoo!Maps、Mapquest
blog:Windows Live Spaces、Windows Live Writer、Blogger
define:Encarta、Wikipedia、Dictionary.com
add:Del.icio.us、Reddit、Google Reader
translate:Windows Live Translation、Babelfish、Google Translation
IE8中还提供了活动本地化的方法,可以根据用户的地域来提供不同内容的活动。
可从这个网站查看现有IE8支持的中文顶级活动:http://ie.microsoft.com/activities/zh-chs/default.aspx
该网站为IE8支持的英文顶级活动:http://ie.microsoft.com/activities/default.aspx
后记
IE8 Beta2在8月份就要出来了,不知会有什么更新更Shining的特性。但无论如何,从IE8 Beta1来看,IE8的整体设计中,对用户、代码开发人员以及服务提供商都提供了更为强大的支持,有理由期待IE8能走的更远。我们不希望一家公司垄断某个产品,我们希望的是,在互相的竞争中,能够最终给使用者带来更多的愉悦,实现软件本应实现的价值。