HTML5之美

作者: 蔣宇捷  發布時間: 2011-07-02 17:35  閱讀: 3458 次  推薦: 1   原文鏈接   [收藏]  

　   從HTML4誕生以來，整個互聯網環境、硬件環境都發生了翻天覆地的變化，開發者期望標準統一、用戶渴望更好體驗的呼聲越來越高。20年磨一劍，HTML5作為下一代Web標準，它的新特性正在每個新式瀏覽器的版本中快速的得到支持和體現。隨著HTML5和CSS3的發展和完善，Web應用程序正在逐漸的表現出桌面應用的性能和功能，和桌面應用之間的區別將越來越模糊。未來不能用HTML5來實現的功能將越來越少，未來繪圖、視頻編輯、3D建模等也將從單機軟件轉到瀏覽器上通過Web應用程序來實現。

　　下文，我將結合實例，談談激動人心的HTML5之美。

　　1、語義之美

　　語義化很美，在合適的地方使用合適的標簽，把人和機器一視同仁。書寫語義化的頁面就像建造符合工業標準的建筑，閱讀語義化的頁面像閱讀一本你熟識的優美著作。

　　HTML5的語義化標簽包括：

  • <section> - 代表文檔中的一段或者一節；
  • <nav> - 用于構建導航；
  • <article> - 表示文檔、頁面、應用程序或網站中一體化的內容；
  • <aside> - 代表與頁面內容相關、有別于主要內容的部分；
  • <hgroup> - 代表段或者節的標題；
  • <header> - 頁面的頁眉；
  • <footer> - 頁面的頁腳；
  • <time> - 表示日期和時間；
  • <mark> - 文檔中需要突出的文字。

　　和采用css+div進行頁面布局的方式相比，這些新標簽明確的表現了頁面元素的結構和含義。下面的代碼展示了這樣的一個示例：

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">
</head>
<header>
<h1>Title</h1>
<h2>Subtitle</h2>
</header>
<aside>
<nav>
<h2>Nav1</h2>
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</nav>
<nav>
<h2>Nav2</h2>
<ul>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
</aside>
<article>
<header>
<hgroup>
<h1>HTML5 is beautiful</h1>
<h2>Semantic, Natural, Simple and Useful</h2>
</hgroup>
</header>
<section>
<h2>Semantic</h2>
<p>HTML5 is Semantic.</p>
</section>
<section>
<h2>Natural</h2>
<p>HTML5 is Natural.</p>
</section>
</atricle>
<footer>
<a href="http://www.w3.org/TR" mce_href="http://www.w3.org/TR">W3C</a>
</footer>
</html>

　　相當簡單和清晰，我可以不添加任何注釋，人和機器都明白它所要構建的結構和內容。

　　目前主要瀏覽器的新版本都支持HTML5語義化標簽（下圖從左到右依次為IE、Chrome、Firefox、Opera、Safari、QQ瀏覽器5）。

　　2、人性之美

　　HTML5設計理念中的通用訪問體現了人性化之美。通用訪問包括可訪問性、媒體中立和國際化支持三個概念。可訪問性考慮了對殘障用戶的支持，媒體中立為所有的平臺和終端上（例如Android和iPhone的平臺上）建立統一標準；而國際化的支持體現在不同的語言和書寫習慣上。

　　就像CSS3中對國際化的支持體現在padding-start, padding-end（在Chrome新版本的設置中心中可以看到它的應用）等新屬性一樣，HTML5引入了Ruby標簽。Ruby標簽允許為一個或者多個文本添加附加注釋（其命名來源于Ruby字符），例如下面的代碼：

 
<p>Hello,
<ruby>
<rb>HTML5</rb>
<rp>(</rp>
<rt>Hyper Text Mark-up Language 5</rt>
<rp>) </rp>
</ruby>
</p>

　　顯示的文本如下：

　　Ruby標簽在中文、韓文和日文教科書和古文中非常有用，讀者們可以方便了解文本的詳細讀音和含義。下面的詩句很美，而HTML5更美。

　　有趣的是在IE、Firefox或Opera中復制粘貼上面的文本到編輯器中，會顯示下面的文本，這是因為<rp>標簽的特殊作用：允許在不支持Ruby標簽的瀏覽器中優雅的降級，同時支持非格式化的復制和粘貼。

　　死生 契 (讀音： qì ) 闊 (讀音： kuò ) ，與子成說。執子之手，與子偕老。

　　目前主要瀏覽器的新版本對于Ruby標簽的支持程度如下：除Fifrefox和Opera外均提供支持。

　　3、簡單之美

　　大道至簡，化繁為簡是許多標準、規范、框架的終極目標。HTML5很好的詮釋了這一點，例如以瀏覽器原生能力支持和代替復雜的Javascript代碼、提供簡單而強大的新API。

　　HTML5自身即跨瀏覽器的JS庫，使得開發者的工作更容易：例如新的表單標簽和屬性、內置拖拽事件使得完全不需要Javascript的支持就能實現許多常用的功能。

　　我們再來看HTML5表單，它實現了許多簡單易用的原生屬性和控件，可以輕松的構建強大的表單，幫我們節約大量的Javascript代碼。下面是一個HTML5表單的示例：

 
<form>
<p>
<label for="email">電子郵箱：</label>
<input type="email" required autofocus name="email" id="email" placeholder="您的電子郵箱">
</p>
<p>
<label for="username">用戶名：</label>
<input type="text" pattern="^\w{6,12}$" required name="username" placeholder="6到12位的英文字符">
<input type="search" placeholder=" 用戶名搜索" autosave="www.yujie.com" results="5" name="username- search" id="username-search">
</p>
<p>
<label for="username-search">生日：</label>
<input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday" value="1982-10-10">
</p>
<p>
<label for="blog">博客地址：</label>
<input type="url" name="blog" placeholder="您的博客地址" id="blog">
</p>
<p>
<label for="mobile">手機：</label>
<input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile" placeholder="您的手機號">
</p>
<p>
<label id="label-working-year" for="working-year">工作年限：</label>
<input type="range" min="1" step="1" max="20" name="slider" name="working- year" id="working-year" placeholder="您的工作年限" value="3">
</p>
<p>
<label for="age">年齡：</label>
<input type="number" name="age" id="age" value="20" autocomplete="off" placeholder="您的年齡">
</p>
<p>
<label for="avatar">頭像：</label>
<input type="image" src="user.png" mce_src="user.png" name="avatar" id="avatar" placeholder="點擊選擇頭像">
</p>
</form>

　　示例中包含了email、search、date、url、range、number、image類型的輸入框和required、autofocus、placeholder、pattern、autosave、results、min、max、step、autocomplete等新屬性，它們簡單到根據名字就可以揣測出用途。下面是效果圖。

　　HTML5表單在各瀏覽器里的支持程度和表現并不一致，例如Search輸入框目前只被Webkit內核瀏覽器支持，而日期彈出框和拖動條刻度僅被Opera支持。以上的標簽類型和屬性目前沒有一個瀏覽器完美支持。

　　4、實用之美 

　　HTML5的Web Worker、Web Socket、Web Storage等新API讓很多后臺的工作可以放到前端來處理，Web Worker解決Javascript單線程和阻塞的問題，相當于提供了分布式處理的框架；Web Socket提供了全雙工的長連接通信, 利用它，我們可以實現微博消息推送、新郵件推送、實時游戲和聊天，減少了不必要的數據傳輸，提高了信息的實時性；Web Storage相當于前端的Memcached和數據庫。

　　而HTML5的Canvas是最強大的API之一，可以動態生成圖形、圖像和動畫，在HTML5游戲中使用的非常普遍。在下面的例子中，我將展示HTML5 Canvas之美：實現圖像顏色漸變效果。

　　以前，我們在網站上顯示灰度圖像到彩色圖像的漸變動畫有兩種實現方式：1、基于IE濾鏡的方案，缺點是無法實現瀏覽器兼容；2、手動創建彩色圖像的灰度版本。現在，利用HTML5的Canvas畫布，我們可以高效簡單的實現此動畫效果。

　　 將鼠標放在左邊的圖片上，圖片顏色將從灰度漸變到彩色，一切就在眼前鮮活起來。

　　核心的Javascript代碼如下：

 
// 加載時就進行處理
$(window).load(function(){
var img = $('#color-img');
// 復制圖像
img.clone().addClass('gray-img').css({"position": "absolute", "z-index": "2", "opacity": "0"}).insertBefore(img);
img.attr('src', grayscale(img.attr('src')));
// 圖像的淡入
$('#color-img').mouseover(function(){
$(this).stop().animate({opacity: 1}, 1000);
})
// 圖像的淡出
$('.gray-img').mouseout(function(){
$(this).stop().animate({opacity: 0}, 1000);
});
});
// 創建灰度版的圖像
function grayscale(src) {
// 取得canvas元素及其繪圖上下文
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0); // 繪制一副圖像
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); // 獲取之前的數據
for(var x = 0; x < imgPixels.height; x++){
for(var y = 0; y < imgPixels.width; y++){
var i = (x * 4) * imgPixels.width + y * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; // 計算灰度值
imgPixels.data[i] = avg; // rgb中的r
imgPixels.data[i + 1] = avg; // rgb中的g
imgPixels.data[i + 2] = avg; // rgb中的b
// i + 3是alpha通道，我們現在不需要
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}

　　針對不支持的舊瀏覽器，我們可以使用Modernizr Javascript庫或者原生Javascript檢測當前瀏覽器是否支持，并提供替代性的解決方案：

 
if(!Modernizr.canvas) { // 或者使用!document.createElement('canvas').getContext
$(document).ready(backupFunc);
}

　　目前主要瀏覽器的新版本都提供Canvas標簽的支持：

　　5、HTML5的不足 

　　目前HTML5還有哪些不足之處？

　　1、安全：像之前Firefox4的Web Socket和透明代理的實現存在嚴重安全問題，同時Web Storage、Web Socket這樣的功能很容易被黑客利用，來盜取用戶的信息和資料，另外HTTP的機制導致了Web應用安全性有所欠缺，這將在很長的時間內成為問題。

　　2、性能：某些平臺上的引擎問題導致HTML5性能低下。同時在不加入GPU加速的情況下，HTML5處理復雜音視頻、動畫的性能不盡如人意。

　　3、完善性：HTML5還在成熟和發展中，像之前曾經支持的Web SQL Database，W3C已經決定不再維護。許多特性各瀏覽器的支持程度也不一樣，而地理定位API在國內的前途還不清晰。

　　4、技術門檻：HTML5簡化開發者工作的同時代表了有許多新的屬性和API需要開發者學習，像Web Worker、Web Socket、Web Storage等新特性要求對于后臺的技術需要有一定的了解，甚至需要深入了解其后面原理和邏輯，而Canvas要求視覺和圖像算法的一些知識。傳統的前端開發者需要掌握更多算法、視覺、后臺甚至瀏覽器原理的知識，機遇的同時也是巨大挑戰。

　　6、總結 

　　上面的大多數不足是HTML5發展過程的中間狀態導致的，從長期來看，瀏覽器廠商的支持、移動互聯網的蓬勃發展使得HTML5的前景一片光明，開發者對此必須要要有清楚的認識和長遠的目光，提前做好技術儲備。

　　對于HTML5，我認為不僅要了解技術細節，還要從根本上理解HTML5的架構，從更高的層面上理解它的深層次含義，它的設計理念，你會發現它的架構之美，對于個人架構設計能力和境界提升有很大幫助。

　　Web應用程序和移動互聯網是大勢所趨，IE6終將消亡，Web和瀏覽器標準終將統一，HTML5就是道之所藏、美之所在，讓我們一起迎接和擁抱HTML5的到來！

1
0
 
標簽：HTML5
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄