從TaskBox協作平臺看HTML5技術的應用與發展
HTML 5草案的前身名為Web Applications 1.0,是近十年來Web開發標準最巨大的飛躍。和以前的版本不同,HTML 5并非僅僅用來表示Web內容,它的新使命是將Web帶入一個成熟的應用平臺,在HTML 5平臺上,視頻,音頻,圖象,動畫,以及同電腦的交互都被標準化。
TaskBox是一個基于云計算的面向企業及各類組織團體的可跨部門、跨公司、跨地域的辦公自動化協作平臺。以企業日常工作為基礎,實現企業各種工作的規范性發布、接收及記錄,并對所有工作進行跟蹤存檔等,以達到提高企業整體運作效率的目的。您可以在不需要額外投入硬件及軟件的情況下使用各種所需的應用程序。
本文以TaskBox協作平臺為案例,將帶您詳細體驗HTML 5,深入了解下一代Web開發標準。
TaskBox目前應用到的部分HTML5技術:
1、CSS3和HTML新元素和屬性
2、本地儲存 - Local Storage
3、本地數據庫 - Web SQL Database
4、應用程序緩存/離線應用 - Application Cache API
5、雙向信息傳輸 - Web Sockets
6、桌面提醒 - Desktop Notifications
一、HTML+CSS3
HTML5提供了一些新的元素和屬性,例如<nav>(網站導航塊)和<footer>。這種標簽將有利于搜索引擎的索引整理,同時更好的幫助小屏幕裝置和視障人士使用,除此之外,還為其他瀏覽要素提供了新的功能,如<audio>和<video>標記。目前TaskBox平臺上并沒有運用太多的HTML5的新標簽,倒是用了不少CSS3的新元素,例如圓角、陰影等,這個就不深入去介紹了,大家可以自己登陸TaskBox瀏覽。
TaskBox界面截圖
二、本地儲存 - Local Storage
Local Storage(本地存儲)提供了一種方式讓網站能夠把信息存儲到你本地的計算機上,可以在你不小心關閉瀏覽器或者崩潰等其他需要的時候進行獲取。這個概念和Cookie相似,區別是它是為了更大容量存儲設計的。Cookie的大小是受限的,并且每次你請求一個新的頁面的時候cookie都會被發送過去。目前TaskBox將這一項技術運用到了發布任務和編輯任務環境之上,你想想,當你在聽著音樂、喝著咖啡、撰寫著工作內容的時候,電腦突然死機……這種情況遇到過吧?而借助Local Storage(本地存儲)技術,TaskBox會自動幫你保存所編輯的內容,它會在你下次打開發布框的時候神奇的出現在文本框內,讓你即使沒有CTRL+S的情況下依然將風險降低到0。
三、本地數據庫 - Web SQL Database
除了 DOM Storage 以外,HTML5 中還有另外一種數據存儲方式 Web SQL Database。它提供了基本的關系數據庫功能,支持頁面上的復雜的、交互式的數據存儲。它既可以用來存儲用戶產生的數據,也可以作為從服務器獲取數據的本地高速緩存。例如可以從遠程服務器把電子郵件、日程等數據存儲到本地數據庫中。Web SQL Database 支持數據庫事務的概念,從而保證了即使多個瀏覽器窗口操作同一數據,也不會產生沖突。
***版本的Chrome,Safari和Opera瀏覽器都支持Web SQL數據庫。據介紹,目前TaskBox對Web SQL Database 和Application Cache API的應用仍處于內測開發中,但是可以確定的是,TaskBox正在通過整合Web SQL Database、Application Cache API等技術構建一個能夠讓用戶在網絡故障及延遲和離線等情況仍然能繼續使用的Web應用程序。
四、應用程序緩存/離線應用 - Application Cache API
云計算存在這么一個問題,以SaaS(Software-as-a-service)應用為例(SaaS是云計算上的應用表現),當企業將管理運營等應用部署到云端的時候,除了面臨安全性(其實云計算的安全性比企業自主部署的更加安全)問題外還有就是穩定性。云計算服務提供商必須保障為客戶能夠7*24小時不間斷的運營服務,那么如何保障讓客戶端網絡延遲或者出現故障的情況下仍然能夠正常的使用Web應用進行日常的工作呢?
前面所述,雖然目前TaskBox對Web SQL Database 和Application Cache API的應用仍處于內測開發中,但是我們從TaskBox的官方網站中我們可以看出部分離線應用的雛形。TaskBox的官方網站目前就采用了Application Cache API應用程序緩存的技術;通過該技術,我們在正常情況下訪問TaskBox官網,然后在斷網的情況下我們仍然能夠正常的瀏覽使用該網站(不信?那你使用支持HTML5的瀏覽器,推薦使用谷歌瀏覽器,然后斷掉網絡再訪問TaskBox官網是否很正常?),很奇妙吧?
采用了Application Cache API應用程序緩存技術的TaskBox官網,在斷線后仍然能夠正常訪問.
五、雙向信息傳輸 - Web Sockets
Web Sockets被譽為下一代Web通信革命,Web Sockets要比現在廣泛使用的XMLHttpRequest簡單,通過XHR進行雙向通信需要一些特別的技巧(例如長連接,輪詢等),而Web Sockets為瀏覽器提供了真正的雙向通信通道。一旦得到一個Web Socket連接,調用 send()方法就可以直接從瀏覽器發送數據到服務器,同時瀏覽器通過一個onmessage事件處理函數接收從服務器傳來的數據。
TaskBox基于雙向信息傳輸(Web Sockets)技術開發出了“即時交流”App,據介紹“即時交流”App可以實現多人在線互動交流,可用于進行任務相關討論或者即時會議、討論等,極大限度地降低溝通成本,提高工作效率。
TaskBox“即時交流”App界面
六、桌面提醒 - Desktop Notifications
使用 Web應用的其中一個比較麻煩的問題是什么?恐怕很多人都會說是信息的即時提醒吧?這一直都是Web應用的缺陷,現在使用 Chrome 的桌面提醒(Desktop Notifications) API 終于可以彌補這個缺陷了。
Chrome Desktop Notifications API(桌面提醒)不過很遺憾,目前這個API僅支持Chrome 而已。
總結:對于TaskBox所應用到的HTML5技術暫時就介紹到這里,TaskBox確實是一個很不錯的平臺。我們發現我們不僅可以在支持HTML5的PC端能夠正常的使用TaskBox應用,而在當前最熱門的兩大移動終端IOS、Android中也有非常好的使用體驗,我想,這就是標準所帶來的好處。
就像HTML 5草案的前身名為Web Applications 那樣,HTML5正在往Web應用程序的方向在發展,未來,我們將會看到越來越多的基于Web的應用程序,而這一切,都是HTML5所帶來的變革。
【編輯推薦】