通過HTML5來改進微博手機版本的體驗

0 評論 7168 瀏覽 1 收藏 7 分鐘

HTML 5 引入并加強了一系列功能, 包括表單控制, 應(yīng)用程序接口(APIs),多媒體,結(jié)構(gòu)化和語義化。都說html5+javascript是flash或者silverlight這類客戶端執(zhí)行環(huán)境的殺手,html5推出的最炫的一個功能是標簽(cavans),還有視頻(video)和音頻(audio)等?,F(xiàn)在頁面版的都還在用flash,flash對于手機來說,速度和資源消耗都成問題。但是利用html5,可以順利地在iPhone等不支持Flash的平臺上將swf顯示了出來,盡管并不是所有Flash都能放,但足以證明javascript+SVG的威力了吧。利用html5不但能夠更好的完善微博的現(xiàn)有功能,還能結(jié)合其他的一些功能,進一步的提升使用體驗。

一、功能改善

1.結(jié)構(gòu)元素

利用html5新增的更具語義化的標簽,來改善微博的標簽結(jié)構(gòu),比如

表示頁面的頭部,表示底部,表示一個鏈接導(dǎo)航集合等。這種標簽將有利于搜索引擎的索引整理、小屏幕裝置和視障人士使用。內(nèi)容修飾標簽將被剔除,而使用 CSS樣式實現(xiàn)。

2. 交互元素

HTML5的前身名是Web Applications 1.0。所以HTML5當然不只是隨便加幾個標簽,讓代碼結(jié)構(gòu)更具語義化這么無聊。另外一些新增的元素,諸如, 等,可以實現(xiàn)控制數(shù)據(jù)和內(nèi)容展示等交互能力。input元素的新屬性:日期和時間,email, url,可以輕松制造一個Webforms 2.0。

例如,details用來表示一段具體的內(nèi)容,但是內(nèi)容默認可能不顯示,通過某種手段(如點擊)與legend交互才顯示出來。這跟現(xiàn)在各種通過JavaScript隱藏一段內(nèi)容,在點擊后才顯示出來的做法有些類似。

3. 風格元素

雖然我們現(xiàn)在已經(jīng)普遍使用了HTML4和CSS2.1,但是我們還可以做得更好!我們可以重組我們代碼的結(jié)構(gòu)并能讓我們的頁面代碼更富有語義化特性。我們可以縮減帶給頁面美麗外觀樣式代碼量并讓他們有更高的可擴展性。現(xiàn)在,HTML5和CSS3將會真正將我們的設(shè)計提升一個高度。

4. 本地數(shù)據(jù)庫

HTML 5得以在智能手機上普及的理由之一,在于其功能。特別是由于可在本地數(shù)據(jù)庫中保存數(shù)據(jù),因此,即便在未接入網(wǎng)絡(luò)的情況下,應(yīng)用程序仍可運行。所以基于此不用擔心錯過離線信息,可以通過選項決定是短信提醒還是定時打包下載。

二、功能擴充

1. 視頻和音頻

近些年視頻網(wǎng)站發(fā)展勢頭較好,隨著硬件條件提升、帶寬增加,基于網(wǎng)絡(luò)的視頻、音頻服務(wù)越來越惹人注目,像國外的Youtube,國內(nèi)的優(yōu)酷、土豆等,還有其他很多可以讓任何一個人更容易的發(fā)布視頻和音頻的網(wǎng)站。然而, 因為當前的HTML缺少必要的方法順利的插入并控制多媒體, 很多網(wǎng)站都依賴Flash來提供這樣的功能. 盡管可能可以用各種各樣的插件 (就像是QuickTime, Windows Media等等) 嵌入多媒體, 但是Flash是當前唯一被廣泛應(yīng)用的,提供了開發(fā)者們所渴望的跨瀏覽器兼容解決方案的插件。

視頻和音頻的新元素讓這個工作變得更加簡單。這兩者之間的大部分API都是共享的, 唯一區(qū)別就關(guān)系到可視和不可視媒體之間的固有區(qū)別。Opera和Webkit已經(jīng)放出了一個部分支持視頻元素的版本,Webkit支持所有QuickTime支持的媒體格式, 包括第三方的解碼器。

隨著Html5的發(fā)展,插入視頻變得越來越簡單了,使用video元素, 它會允許瀏覽器提供一個默認的用戶界面,以后微博用戶利用手機端上傳視頻、音頻的接口也肯定呼之欲出。

2. 快捷鍵

通過快捷鍵來進行一些發(fā)微博、發(fā)評論、轉(zhuǎn)發(fā)、刪除、更多等操作。

3. 手繪表情

作為HTML5標準的一部分,Canvas元素允許腳本動態(tài)渲染點陣圖像。這個 HTML 元素是為了客戶端矢量圖形而設(shè)計的。它自己沒有行為,但卻把一個繪圖 API 展現(xiàn)給客戶端 javascript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。HTML 5 canvas 提供了通過 JavaScript 繪制圖形的方法,此方法使用簡單但功能強大。每一個 canvas 元素都有一個“上下文( context )” (想象成繪圖板上的一頁),在其中可以繪制任意圖形。

微博用戶可以用手寫輸入的方式繪制個性化表情,使發(fā)表或回復(fù)內(nèi)容形式感更強,風格更多樣。

4. 標簽訂閱

根據(jù)關(guān)鍵詞來訂閱信息,使信息的瀏覽和呈現(xiàn)方式更加多樣化。

5. 在線筆記

在微博中可以直接進行標記,并選擇是以筆記的形式記錄在線上,還是拷貝一個鏡像保存到線下。

6. 地理位置

通過地理位置API實現(xiàn)發(fā)微博顯示我所在的位置的功能,并且基于該功能,可以和商家合作,提供優(yōu)惠券下載、打折信息發(fā)布等服務(wù)。

理論上講,HTML 5 將培育新 Web 標準的土壤,讓各種設(shè)想在他的組織者之間分享,但 HTML 5 目前仍處于試驗階段。

來源:http://elya.cc/mobile/657.html

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!