IE 8 Shining Features

          Posted on 2008-07-22 20:51 nemo 閱讀(1735) 評論(7)  編輯  收藏 所屬分類: Tech ThoughtFeelingsIE 8

          IE 8 Beta 1 出來好久了,由于對IE7的使用仍然心有余悸(之前曾裝了IE7又馬上轉向了Firefox陣營),我這次IE8的安裝仍然忐忑不安。無奈經常需要使用代理瀏覽,而不知怎么搞的使用Firefox的about:config配置了N多遍了怎么也配置不好,每當別人嘲笑我說怎么還用老古董的IE6時,我就無可奈何。。。今天也要嘗嘗鮮了!
          image
          不看不知道,發現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的調試。有人說:這有image什么稀奇的呢?先別急,我們先看看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去掉,就可以立即在原始網頁中觀察到效果!

          image image

          除此以外,Developer Tools提供了View和OutLine兩個Menu,OutLine菜單提供了對不同的HTML元素的高亮顯示(同FireFox提供的功能類似),而View菜單對于網站設計者非常有用,提供了"IE5”,"IE7","IE8"3種不同的模式預覽頁面。開發者可以快速的檢測頁面的IE兼容性。(唉,如果IE或Firefox能夠提供對對方產品的兼容性就更好了。。。不過應該是遙遙無期的事情)


           

          2. Web Castimage
          在淘寶的這個頁面中,當鼠標移動到列表中的商品時,在左上方會出現一個小圖標image ,該小圖標提示使用者可以將此條目加入Web剪輯中。鼠標選擇該條目,會彈出Web Slice的提醒頁面,選擇“Add”之后,在IE中便可以在Favorites中看到該Web Slice的導航標簽了。單擊該標簽,便可以看到商品的信息。

          這是怎么做到的呢?我們使用Developer Tools來查看一下HTML代碼,發現所有的商品表格中都有類似這樣的屬性:image

           

           

           

           

          <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">
                  
          <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>
                  
          <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,image然后查找QQ用戶,輸入QQ號碼,得到搜索結果之后才能查看用戶信息。。。

          IE 8的Activities特性使用戶不再如此繁瑣。如果服務提供商能夠遵循“OpenService 活動”XML格式來指定HTTP請求的格式,并且在網站中加入活動安裝按鈕,則不需要用戶訪問相應的網站,便可以使用服務了。

          在淘寶IE8的頁面中,選擇右側的安裝Taobao Activity按鈕,安裝淘寶商品搜索Activity。然后,當選中某些相關的內容后,會出現Activity浮動Toolbaractivity_icon,選擇該浮動Toolbar,下拉列表中將出現所有可用的服務。將鼠標移到“淘寶搜索”Item上,將會自動彈出前12個搜索結果的圖片。可以直接點擊圖片以查看內容。

          這是怎么實現的呢?同樣非常簡單。只要在原來已有服務的基礎上,按照OpenService 活動XML格式來描述服務,并提供發布活動的方法就可以了。下面為淘寶的Open Service Definition代碼:

           

          <?xml version="1.0" encoding="UTF-8" ?>
          <openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
              
          <homepageUrl>http://www.taobao.com</homepageUrl>
              
          <display>
                  
          <name>淘寶搜索</name>
                  
          <icon>http://www.taobao.com/favicon.ico</icon>
              
          </display>
              
          <activity category="查找">
                  
          <activityAction context="selection">
                      
          <preview action="http://ie8.taobao.com/activities/preview.php?query={selection}" />
                      
          <execute method="get" action="http://ie8.taobao.com/list.php?query={selection}" />
                  
          </activityAction>
              
          </activity>
          </openServiceDescription>


          如果要發布活動,需要運行如下javascript代碼:window.external.addService('<path> /GetMap.xml');
          淘寶是通過如下方法加入的:

          1 <script type="text/javascript">
          2 function addActivity() {
          3     if (navigator.userAgent.indexOf('MSIE 8') == -1) {
          4         alert('請首先安裝IE8.');
          5     } else {
          6         window.external.addService('activities/taobao-search.xml');
          7     }
          8 }
          9 </script>


          <!--HTML TAG-->
          <button type="button" onclick="addActivity();">安裝 Taobao Activity</button>
           


          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能走的更遠。我們不希望一家公司壟斷某個產品,我們希望的是,在互相的競爭中,能夠最終給使用者帶來更多的愉悅,實現軟件本應實現的價值。

          Feedback

          # re: IE 8 Shining Features  回復  更多評論   

          2008-07-22 22:02 by 很暴力
          “其中最為耀眼的便是其強大的代碼調試工具,火狐在此面前也甘拜下風了”---兄弟沒怎么用過firebug吧?

          # re: IE 8 Shining Features  回復  更多評論   

          2008-07-22 22:20 by nemo
          @很暴力
          用過,但是只用過最基本的功能,沒有進行過調試。文章中已修改。多謝提醒:)

          # re: IE 8 Shining Features  回復  更多評論   

          2008-07-22 22:26 by 隔葉黃鶯
          我一直在用老古董,IE下可以安裝那個 Developer Tools

          # re: IE 8 Shining Features  回復  更多評論   

          2008-07-23 09:32 by 44you
          沒什么感覺

          # re: IE 8 Shining Features  回復  更多評論   

          2008-07-23 09:47 by Robin's Java World
          用了IE7之后,很多依賴IE6的軟件用不了啦。

          # re: IE 8 Shining Features  回復  更多評論   

          2008-07-23 10:17 by andy 林
          堅決支持ff 嘿嘿

          # re: IE 8 Shining Features  回復  更多評論   

          2008-07-23 10:35 by MIC
          IE8 的javascript解釋器還得好好改進也許是測試版的原因吧,你試下EXTJS、JQUERY

          posts - 21, comments - 74, trackbacks - 0, articles - 3

          Copyright © nemo

          主站蜘蛛池模板: 华亭县| 寿阳县| 福鼎市| 冕宁县| 磐安县| 平乐县| 拜城县| 兰坪| 利川市| 泰兴市| 安陆市| 镇坪县| 鄂托克旗| 正宁县| 藁城市| 平湖市| 太湖县| 松阳县| 信丰县| 汾西县| 呼伦贝尔市| 嵊州市| 监利县| 鱼台县| 彭州市| 三门峡市| 上犹县| 门源| 浪卡子县| 隆德县| 漳平市| 霍城县| 治县。| 静宁县| 涞源县| 通许县| 泸定县| 北辰区| 普兰店市| 湘潭市| 兴宁市|