HTML5新的元素和屬性對設計師來說是冒險又是機遇

2020-03-24 18:27:02

字體：大中小

來源：轉載

供稿：網友

HTML5，被傳為Flash 的殺手，是一種用于web html' target='_blank'>應用程序開發(fā)、具有變革意義的網絡技術。HTML 5提供了一些新的元素和屬性，其中有些是技術上類似 div 和 span 標簽，但有一定含義，例如 nav 和 footer 。這種標簽將有利于搜索引擎的索引整理、小屏幕設備和視障人士使用。同時為其他瀏覽要素提供了新的功能，通過一個標準接口，如 audio 和 video 標記。
除了原先的DOM接口，HTML5增加了更多樣化的API：實時二維繪圖 Canvas API：有關動態(tài)產出與渲染圖形、圖表、圖像和動畫的API。定時媒體播放 HTML5 音頻與視頻：HTML5里新增的元素，它們?yōu)殚_發(fā)者提供了一套通用的、集成的、腳本式的處理音頻與視頻的API，而無需安裝任何插件。離線存儲數(shù)據(jù)庫（離線網絡應用程序）跨文檔通信通信／網絡 Communication APIs：構建實時和跨源（cross-origin）通信的兩大基礎：跨文檔通信（Cross Document Messaging）與 XMLHttpRequest Level 2。瀏覽歷史管理 MIME和協(xié)議處理程序時表頭登記微數(shù)據(jù) 以上技術說明存在于WHATWG HTML說明文檔中，但并沒有全部包含在W3C HTML5的說明文檔里；W3C另對一些技術做了單獨說明，此文不再一一贅述。聽起來略有些太過技術了，那么HTML5對設計將會有哪些影響呢？這是網頁設計師和開發(fā)人員不厭其煩討論了編程代碼后不得不考慮的問題。HTML5及web app 的優(yōu)勢以移動互聯(lián)網領域為例，面對眾多的終端設備和平臺，設計師和開發(fā)人員不得不在產品的展現(xiàn)和體驗的一致性方面做出妥協(xié)舉措，并在疲于填鋪平臺的過程中浪費了我們如此多的精力。產品本來可以達到更高的水準，但移動終端碎片化（包括硬件和軟件）的現(xiàn)實將美好的愿望阻攔在外。當前主流的手機開發(fā)平臺有：iOS、Symbian、Linux、Palm、BlackBerry、Windows Mobile、Android等。其中，iOS平臺需要針對480*320、960*640及1024*768的分辨率分別設計；Android平臺中QVGA分辨率為240*320，WQVGA分辨率為240*400，HVGA分辨率為320*480，WVGA分辨率為480*800，F(xiàn)WVGA分辨率為480*854等等；Symbian系統(tǒng)可謂歷史悠久，現(xiàn)在開發(fā)主要針對S60 V3和V5兩個版本，分辨率仍有176*208、208*208、240*320/320*240、352*416/416*352及800*352等眾多種類。即使同一個平臺，分辨率不同設計也就會有相應的差異。加之客戶端產品需要不斷的更新迭代，從1.0版本、2.0版本一直到N.0版本；每開發(fā)一次native app 就需要鋪一次平臺。并且現(xiàn)實狀況是并非所有用戶都會積極更新新版本，所以設計師和開發(fā)人員在研發(fā)新功能的時候還要顧忌之前的舊版本會不會支持等問題。不同的平臺乘以不同的版本，人力物力被投入到了鋪設平臺的工作中，提高產品用戶體驗的精力比較有限。于是人們受夠了終端設備碎片化的折磨，開始期盼著一種有別于native app的事物出現(xiàn)。由HTML5技術開發(fā)的web app的出現(xiàn)給予了設計師和開發(fā)人員美好愿景。HTML5技術的渲染過程主要是由瀏覽器、內嵌HTML5解析器的應用程序、支持書簽打開方式的應用程序抑或是移動手機產品進行的。如此，產品的上線和版本更新不再需要花費那么長時間來鋪平臺， Appcelerator的內部邏輯會將產品的UI轉換為iOS或Android等平臺的原生界面。同時，web app形式的產品不需要用戶下載更新，通過網絡即可以訪問最新版本；也便于設計師和開發(fā)人員調試和修正錯誤，不再存在同時兼顧新舊版本的問題。HTML5可以實現(xiàn)的效果 HTML5威力如此強大，確實擁有提高互聯(lián)網產品質量、改善開發(fā)人員現(xiàn)實環(huán)境的潛力。因此設計師和開發(fā)人員需要對它進行必要的了解。但這并不意味著設計師就要放下自己手中的工作開始學習編程技術了，而是應當考慮HTML5對具體的設計將會有哪些明顯的改變，HTML5技術可以實現(xiàn)什么樣的設計效果？在蘋果、谷歌及微軟等巨頭公司的積極倡導下，HTML5技術進步神速，web app可以實現(xiàn)的效果愈來愈豐富。很多web app確實已經可以和native app相媲美了。對HTML5支持最好的瀏覽器是Safari和Chrome，F(xiàn)irefox和 Opera差強人意，IE瀏覽器支持度最低。如下圖所示：現(xiàn)在網絡上常常會見到類似《使用HTML5開發(fā)的19個網站》、《25款超棒的 HTML5 Canvas 游戲》等相關介紹文章，設計師可以時常拿來把玩體驗一番。本文囿于篇幅限制，在此只舉幾個應用HTML5技術比較典型的網站產品進行示例說明。1.Gmail
2.Youtube
3.Vesseltracker
4.GeoCongress
5.BusinessesForSale.com
6.TriOut Mobile
7.ING Direct
8.AOI
9.Naver
10.百度無線小說html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：html導航欄下拉菜單怎么制作？這里有詳細的代碼

下一篇：html的圖片怎樣使用base64編碼來代替