<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    IE 8 Shining Features

    Posted on 2008-07-22 20:51 nemo 閱讀(1730) 評論(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

    主站蜘蛛池模板: 亚洲大香人伊一本线| 一级做a爰黑人又硬又粗免费看51社区国产精品视| 野花视频在线官网免费1| 一二三四视频在线观看中文版免费| 国产网站免费观看| 亚洲精品乱码久久久久久V | 亚洲精品国产精品乱码不卡| 亚洲免费在线播放| 永久在线观看www免费视频| 国产成人免费a在线资源| 亚洲a∨国产av综合av下载| 免费在线观看视频a| 国产人成网在线播放VA免费| 亚洲无线码在线一区观看 | 亚洲AV无码专区电影在线观看 | 中文字幕一精品亚洲无线一区| 中文字幕亚洲第一在线| 精品国产污污免费网站aⅴ| 亚洲综合在线另类色区奇米| 中国精品一级毛片免费播放| 国产AV无码专区亚洲AVJULIA | 亚洲精品国精品久久99热一| a级毛片免费观看视频| 亚洲综合视频在线| 日韩毛片免费无码无毒视频观看| 亚洲AV无码码潮喷在线观看| 又大又硬又粗又黄的视频免费看| a级毛片无码免费真人| 久久精品国产亚洲av品善| 中文字幕在线亚洲精品| 日韩在线观看免费| 亚洲一级二级三级不卡| 久久久久国色AV免费观看| 亚洲精品白色在线发布| 国产男女猛烈无遮挡免费视频网站 | 久久久久亚洲精品无码蜜桃| 亚洲色欲一区二区三区在线观看| 激情小说亚洲图片| 亚洲精品无码久久一线| av午夜福利一片免费看久久| 亚洲视频一区二区三区|