CE-HTML演示PPT

1、CE-HTML(Consumer Electronics Hypertext Markup Language)學(xué)習(xí)匯報什么是CE-HTML？CE-HTML就是Consumer Electronics Hypertext Markup Language，直譯作“消費電子用超文本標(biāo)記語言”。雖然名字叫做語言，但是CE-HTML其實是一套標(biāo)準，而不是一種語言。CE-HTML和HTML有什么關(guān)系？CE-HTML包含HTML，因為CE-HTML是一套為消費類電子產(chǎn)品定義的，包含一系列語言和擴展定義的標(biāo)準。嚴格的說，CE-HTML包含的是XHTML，一種更加嚴謹純凈的HTML語言。因為XHTML能夠更好的

2、被手機電視等設(shè)備的瀏覽器所支持。為什么要叫做CE-HTML？ 首先明確Consumer Electronics（CE）即消費電子產(chǎn)品，是指滿足消費者娛樂需求的電子產(chǎn)品，主要指音視頻產(chǎn)品（例如手機、電視）。 其次，我們需要知道互聯(lián)網(wǎng)是在電腦設(shè)備上發(fā)展起來的，并且發(fā)展至今已經(jīng)比較成熟，近年來隨著科技發(fā)展，硬件處理速度和效率也大幅提升，例如手機和電視這樣的CE設(shè)備也具有了解析網(wǎng)頁的硬件處理條件。因此也就產(chǎn)生了大量CE設(shè)備訪問互聯(lián)網(wǎng)網(wǎng)頁的需求。 隨著大量CE設(shè)備開始解析顯示網(wǎng)頁，舊的網(wǎng)頁代碼編寫規(guī)范就體現(xiàn)出了很多缺陷點。因此CE-HTML這個標(biāo)準就是在現(xiàn)有的網(wǎng)頁代碼編寫規(guī)范上添加了很多專門為CE設(shè)備規(guī)

3、定的條款的一個規(guī)范。傳統(tǒng)網(wǎng)頁在CE設(shè)備上有什么缺陷？傳統(tǒng)網(wǎng)頁的字體小、圖片也小，不適宜在電視或機頂盒中顯示。傳統(tǒng)網(wǎng)頁只支持鼠標(biāo)鍵盤操作，不支持遙控操作。沒有高亮的焦點導(dǎo)航，用戶不知道自己選擇的焦點在哪個網(wǎng)頁元素上。存在很多不可移植的瀏覽器擴展(DOM level 0/legacy DOM)沒有標(biāo)準的audio/video 對象實現(xiàn)。存在許多商業(yè)的有版權(quán)的、CE設(shè)備不兼容的擴展（例如Adobe Flash插件）使用CE設(shè)備顯示HTML內(nèi)容還可能因為CE設(shè)備具有不同的分辨率、遙控方式和音視頻解碼而產(chǎn)生問題。CE-HTML具體包括哪些東西？1. ECMAScript 262, 3rd edition

4、2. XHTML 1.0 transitional/strict3. CSS TV Profile 1.04. XMLHttpRequest object5. DOM level 2.0 6.大量針對CE設(shè)備的擴展。CE-HTML具體包括哪些東西？1.ECMAScript 262, 3rd edition 這是一種由Ecma國際通過ECMA-262標(biāo)準化的腳本程序設(shè)計語言?？梢岳斫鉃镃E-HTML包含了一份網(wǎng)頁腳本設(shè)計規(guī)范，著名的JavaScript腳本語言就是這份標(biāo)準的實現(xiàn)和擴展。基于ECMA-262,edition3的腳本語言：Application-implementationImple

5、mentation and latest versionECMAScript editionKHTML layout engine, KDEs Konqueror, and Apple Inc.s Safarid 8JavaScriptd 2ECMA-262, edition 3Appweb Web Server, Samba 4Ejscript 0.9.9ECMA-262, edition 3d 9Microsoft .NET FrameworkJScript .NET 8.0ECMA-262, edition 3d 10Adobe Flash and Adobe FlexActionScr

6、ipt 3ECMA-262, edition 3d 11Adobe AcrobatJavaScript 1.7d 12ECMA-262, edition 3Adobe Creative Suite products: InDesign, Illustrator,Photoshop, Bridge, After Effects, Premiere ProExtendScriptECMA-262, edition 3citation neededGeneral purpose scripting languageDMDScript 1.15ECMA-262OpenLaszloJavaScriptd

7、 13ECMA-262, edition 3d 14CriScript, JScript for game platformsCriScript 0.91.0ECMA-262, edition 3iCabInScript 3.22 (abandoned) ECMA-262, edition 3Max/MSPJavaScript 1.5d 2ECMA-262, edition 3ANT Galio 3JavaScript 1.5d 2d 15ECMA-262, edition 3KDEQtScriptECMA-262, edition 3CajaECMA-262, edition 3d 16Ob

8、jective-JECMA-262, edition 3WMLScriptECMA-262, edition 3JavaScriptTypeScript11ECMA-262, edition 3, 5 and features from upcoming 6.Node.jsJavaScriptECMA-262, edition 5JavaScript代碼示例：function disp_prompt()var name=prompt(請輸入您的名字,Bill Gates) if (name!=null & name!=) document.write(你好！ + name + 今天過得怎么樣？

9、) CE-HTML具體包括哪些東西？2.XHTML 1.0 transitional/strict XHTML是可擴展超文本標(biāo)識語言,表現(xiàn)方式與超文本標(biāo)記語言（HTML）類似，不過語法上更加嚴格。 XHTML是當(dāng)前HTML語言的繼承者。HTML語法要求比較松散，這樣對網(wǎng)頁編寫者來說，比較方便，但對于機器來說，語言的語法越松散，處理起來就越困難，對于傳統(tǒng)的計算機來說，還有能力兼容松散語法，但對于許多其他設(shè)備，比如手機或電視，處理速度同傳統(tǒng)計算機相比還有較大差距，兼容松散語法難度就比較大。強行處理會導(dǎo)致解析速度過慢，用戶體驗差。 因此CE-HTML規(guī)定了使用XHTML標(biāo)準，以使網(wǎng)頁能夠被瀏覽器正確

10、及較快的解析并顯示。CE-HTML具體包括哪些東西？舉例來說：XHTML屬性名稱必須為小寫HTML寫法： XHTML寫法：屬性值使用雙引號HTML寫法： XHTML寫法：屬性簡寫是不允許的HTML寫法： XHTML寫法： 用id屬性來替代name屬性HTML寫法： XHTML寫法：所有的標(biāo)記都必須要有一個相應(yīng)的結(jié)束標(biāo)記，特殊的不成對的標(biāo)簽必須要在標(biāo)簽尾部寫/號結(jié)束。HTML寫法： XHTML寫法： CE-HTML具體包括哪些東西？3.CSS TV Profile 1.0 級聯(lián)樣式表（CSS）技術(shù)是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。相對于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中

11、的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力，并能夠進行初步交互設(shè)計，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計語言。一個簡單的CSS例子： p text-align:center; color:red; 這單獨的一行就可以是一個CSS文件。隨后在HTML網(wǎng)頁中只要簡單的寫明link到這個css文件，網(wǎng)頁中的所有標(biāo)簽之間的文字都會變成居中紅色。 CSS TV Profile 1.0 是一個規(guī)范，它是CSS3模塊（級聯(lián)樣式表）規(guī)范的一個子集。 它是根據(jù)電視或機頂盒設(shè)備的顯示特點和限制條件刪除了CSS3規(guī)范中的一些內(nèi)容定制而成。 CSS TV pro

12、file 1.0與CSS3的區(qū)別主要在于，CSS TV profile1.0 是一個輕量化的CSS3規(guī)范，它根據(jù)電視的特點去除了一些電視中不會用到的元素，并根據(jù)電視設(shè)備處理效率比個人電腦低的特點去除了一些高級特效，使網(wǎng)頁效果變得簡潔高效。舉例來說： CSS TV profile 去除了“E:hover”選擇器。因為CE-HTML規(guī)范中默認不使用鼠標(biāo)操作瀏覽器，而這個選擇器的意義是，選擇器的內(nèi)容會在鼠標(biāo)光標(biāo)懸停的時候被觸發(fā)（例如文字在鼠標(biāo)懸停時變成另一種顏色），因此這個選擇器對CE-HTML標(biāo)準來說就不必要存在。 CSS TV profile 去除了元素的“cursor”屬性，這個屬性的含義是規(guī)

13、定鼠標(biāo)光標(biāo)停留在這個元素上時的式樣（例如輸入框可規(guī)定鼠標(biāo)光標(biāo)停留在其上時變成輸入的形狀），由于CE-HTML沒有鼠標(biāo)的原因，這個屬性也不需要。區(qū)別：CE-HTML具體包括哪些東西？4. XMLHttpRequest object CE-HTML標(biāo)準中規(guī)定包含XMLHttpRequest object，它可以提供不重新加載頁面的情況下更新網(wǎng)頁，在頁面加載后在客戶端向服務(wù)器請求數(shù)據(jù)，在頁面加載后在服務(wù)器端接受數(shù)據(jù)，在后臺向客戶端發(fā)送數(shù)據(jù)。XMLHttpRequest 對象提供了對 HTTP 協(xié)議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。 Username:

14、 var XMLHttp = new XMLHttpRequest();xmlhttp.onreadystatechange=function() if (xmlhttp.readyState=4 & xmlhttp.status=200) document.getElementById(myDiv).innerHTML=xmlhttp.responseText; xmlhttp.open(GET,/ajax/demo_get2.asp?fname=Bill&lname=Gates,true);xmlhttp.send();CE-HTML具體包括哪些東西？5.DOM level 2.0 文件對

15、象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展置標(biāo)語言的標(biāo)準編程接口,可以以一種獨立于平臺和語言的方式訪問和修改一個文檔的內(nèi)容和結(jié)構(gòu)。CE-HTML標(biāo)準中規(guī)定包含DOM。 文檔標(biāo)題 我的標(biāo)題 我的鏈接Javascript代碼：var x = document.getElementById(mytitle);x.style.color=blue“;x.parentNode.removeChild(x);CE-HTML具體包括哪些東西？6. 對CE設(shè)備的一系列擴展除了上述的幾個基本要素之外，CE-HTML標(biāo)準還針對CE設(shè)備做了一系列的擴展規(guī)定：1）對

16、Multi-tap或其他CE數(shù)字字母輸入的支持。由于CE設(shè)備默認不使用鍵盤和鼠標(biāo)，網(wǎng)頁中的輸入框需要支持CE設(shè)備上常用的數(shù)字字母輸入。如Multi-tap（即通常說的9鍵輸入系統(tǒng)）。2）通過audio/video 腳本對象的使用來支持媒體播放。一個典型的CE-HTML代碼例子如下： CE-HTML CE-HTML a/v object: CE-HTML具體包括哪些東西？3) 通過遙控的上下左右和OK鍵控制。 CE-HTML標(biāo)準規(guī)定使用遙控器（方向鍵）操作網(wǎng)頁，因此標(biāo)準中規(guī)定要支持方向鍵和OK進行網(wǎng)頁的導(dǎo)航和操作。 一個典型的實現(xiàn)是利用焦點的概念（我們的電視就是這種做法），在網(wǎng)頁中使用方向鍵和O

17、K鍵切換和確認焦點。4) 客戶端能力匹配。 由于CE設(shè)備的設(shè)備能力（處理速度，屏幕大小等）各有不同，CE-HTML標(biāo)準規(guī)定，沒有兼容CE-HTML的客戶端（瀏覽器）都要提供一個自身能力簡述信息。這個信息在向服務(wù)端（網(wǎng)站服務(wù)器）發(fā)請求的時候會被附加在客戶端的UserAgent String中。服務(wù)端會根據(jù)這些信息，在一個被稱為XML UI Listing的列表中切換以提供給不同設(shè)備不同的UI界面，這樣就實現(xiàn)了客戶端能夠在服務(wù)端提供的幾個不同的UI中選擇適合自己的UI。標(biāo)準UA String 例子：“Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; e

18、n-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B367 Safari/531.21.10”+ “TCL-TV 32Inch 1920*1080 CPU XXXXXXX”CE-HTML具體包括哪些東西？5) “10英尺 UI” 對于提供給大屏幕設(shè)備（典型例子：電視機）的UI，需要符合“10英尺 UI”的設(shè)計標(biāo)準。 10英尺表示：UI元素如菜單，按鈕，字體和其他的一些元素，在人體工程學(xué)原理上要足夠大以讓用戶在距離屏幕10英尺（3M外）也能容易閱讀。為了避免讓用戶在理解UI上花費不必要的注意力，10英尺UI也趨向于非常簡單并且通常只有必要的幾個核心按鈕。 一個典型的10英尺UI的設(shè)計：CE-HTML具體包括哪些東西？6) 允許客戶端從一個額外的服務(wù)器上獲取第三方通知信息，不管當(dāng)前UI呈現(xiàn)情況如何，直接顯示給用戶。典型的應(yīng)用場景例如廣告。 7)一種為CE-HTML內(nèi)容提供的MIME-type：application/ce-html+xml.CE-HTML解決的問題：傳統(tǒng)網(wǎng)頁的字體小、圖片也小，不適宜在電視或機頂