HTML5在豆瓣的各種應用

下面我們給大家介紹一下HTML5在豆瓣吧!作為處於發展階段的新一代Web開發標准，HTML5正以其簡潔的書寫規范、良好的兼容性以及務實的原則為越來越多的網站所接受，這是WHATWG與W3C共同努力的結果，作為標准的參與制訂者，各浏覽器廠商也在積極地為其提供支持。豆瓣一向熱衷於新技術的探索和創新，前端團隊在HTML5與CSS3方面也有過很多嘗試，從視覺效果到富媒體內容再到本地存儲等等，其中一部分已經應用於線上產品，還有一部分以浏覽器擴展、客戶端、手持設備應用等形式服務於不同需求的用戶。下面我就來簡單介紹下：

在線上產品中的應用

豆瓣目前主要的流量來源依然是PC端的IE6，這是個頗具中國特色的無奈事實，但我們同時發現，豆瓣的Chrome和Firefox用戶量在不斷增長，特別是Chrome，目前已超過Firefox位居第二，這讓我們有了充足的理由在產品中加入 HTML5特性來提升用戶體驗。

勸導用戶升級浏覽器是個需要耐心的工作，一般用戶並不會因只停留在單方游說層面的所謂更快、更安全、更符合標准做出任何反應，畢竟改變習慣是個痛苦的決定，引導方式不正確會讓用戶煩躁，甚至對標准浏覽器反目成仇。那何不換個思路，先為一部分勇於嘗試新鮮事物的用戶提供更為友好的視覺、交互體驗，在他們享用的同時自然會對身邊使用過時浏覽器的朋友產生一種更為直觀的影響。這雖然沒有游戲玩家在比對速度與3D特效後產生為電腦更新換代的念頭來得迅猛，但畢竟是種積極而不唐突的方式。

豆瓣確實這麼做了。細心留意可以發現，在近期的產品UI中，圓角、陰影、背景漸變均由CSS3來完成，這也是視覺設計師與前端工程師加深交流的意義所在，使用CSS3來繪制界面節省了大量代碼與圖片，從而降低了工作量，也為公司節省了帶寬，設計師在設計的同時也考慮了在無法識別 CSS3 的浏覽器下元素對應的樣式，讓低端浏覽器用戶感受到另一種簡約的風格。

表單驗證方面，我們優先判斷Form 2.0中新增元素的默認屬性，比如type、placeholder、pattern、required等，腳本中對於類型、驗證規則的處理只在不支持這些屬性的浏覽器中生效，讓高級浏覽器用戶體會到原生的執行效率。在讀書、電影條目方面我們也開始加入Microdata來實現強大的語義結構，讓豆瓣不僅能夠提供數據，還能提供數據定義。

HSL是一個全新的色彩空間，它可以方便地定義色彩的色相、亮度、飽和度，這種定義方式對稱於亮與暗，更類似於人類感覺顏色的方式。豆瓣小站的風格是用戶自定義的，比如導航欄標簽的背景色，但標簽懸停時的顏色是由系統生成的，生成的規則便是增加當前背景色的飽和度，使其顏色比默認狀態下更深，這在傳統RGB色彩空間中是不方便做到的。

除此之外，豆瓣還在桌面客戶端、浏覽器擴展、手機應用等方面大量使用了HTML5與CSS3特性，相較於傳統開發方式，這種利用前端技術實現的跨平台跨設備的開發思路有其明顯的優勢：學習成本低(HTML & CSS & JS)、開發周期短(類似於網站前端開發)、代碼復用性強(除了針對不同設備的接口調用外，界面、邏輯部分大多可以復用)，這也得益於浏覽器廠商、手機廠商對於 HTML5 的充分肯定與積極支持。當然，Webkit這個優質的浏覽器引擎功不可沒。

桌面客戶端

OneRing是由豆瓣首席架構師洪強寧開發的一款跨平台桌面應用框架，它支持使用前端技術開發桌面客戶端。即將發布的豆瓣電台桌面版(PC/Mac)便是基於OneRing 完成的，HTML5 新增的元素與相應的API在其中發揮了重要的作用，相信很快就會和大家見面。

浏覽器擴展

Douban Pulse是一個 Chrome 浏覽器的豆瓣擴展，它可以讓用戶隨時關注友鄰動態、參與互動，同時收聽“豆瓣電台”。整個擴展完全基於豆瓣API並結合HTML5與CSS3特性完成，除了使用代碼繪制界面，CSS Animation完成簡單動畫、元素實現電台外，還使用了Web Storage與Web Database進行持久化本地存儲。

比如利用Local Storage來保存登錄信息與各種狀態，用以再次開啟擴展時迅速恢復關閉前的界面;之外還用於實時保存用戶輸入的文字信息，確保信息不會因網絡中斷、浏覽器崩潰而丟失。比起Cookie，Local Storage的優勢顯而易見：存儲空間大、數據不會隨請求發送至服務器，存儲空間獨立等等，你還可以利用浏覽器原生的 JSON 支持，用它來保存結構化對象。

以上就是我們給大家介紹的HTML5在豆瓣的表現了。希望大家繼續關注我們的網站!