著微信應用的成功推廣，中國移動互聯(lián)網(wǎng)達到了一個全新的廣度和高度。據(jù)CNNIC統(tǒng)計，中國目前已有7.6億手機用戶，其中智能手機用戶高達5.6億之眾。可以說，幾乎人人微信，人人手機，人人移動互聯(lián)。這種場景是空前的，智能手機成了凌駕于電視、報紙、廣播、雜志等傳統(tǒng)媒體之上的最龐大、最活躍的媒體，移動互聯(lián)網(wǎng)無時不在、無處不在。

一，變 化

互聯(lián)網(wǎng)的變化是巨大的，盡管使用者不怎么留意，發(fā)展速度依然是突飛猛進、一日千里。

終端變化：忽然一夜之間，電腦已經(jīng)不那么重要了，平板火了一段時間也慢慢沉寂了，只有智能手機越來越普及，功能越來越強大，手機應用越來越多，現(xiàn)在人們已經(jīng)幾乎離不開手機了。

入口變化：電腦終端時代，搜索引擎、門戶網(wǎng)站為最大入口，到了移動互聯(lián)網(wǎng)時代，社交網(wǎng)站、新聞內(nèi)容成了最大的入口。其次就是各類應用，也就是app，更是繞開了所有的入口，直接鏈接消費者的終端。

應用變化：由于微信的普及，html5已經(jīng)成了網(wǎng)站的標配，隨著即將推出的【微信應用號】，html5將會達到前所未有的火爆，傳統(tǒng)的原生app很可能會逐步被html5取代。

生態(tài)變化：從終端到入口，從入口到應用，整個互聯(lián)網(wǎng)的生態(tài)已經(jīng)發(fā)生了劇烈的變化。原來企業(yè)可以做個網(wǎng)站，通過搜索引擎或門戶網(wǎng)站上的廣告，就有訪問量，現(xiàn)在不行了，只有讓消費者安裝app，網(wǎng)站才有人訪問。即使有人從傳統(tǒng)的路徑訪問了你的網(wǎng)站，手機瀏覽時界面不友好，訪問者馬上就會關(guān)閉。就算你在火爆的app上做了廣告，訪問到達后，瀏覽者也不會駐留。原因很簡單，你的網(wǎng)頁不適合手機瀏覽。

二，優(yōu) 勢

隨著手機的普及，html5網(wǎng)站越來越受到重視。究其原因，還是html5的優(yōu)勢所導致。Html5到底具備哪些優(yōu)勢呢？

自動適應顯示設備的尺寸和分辨率。一個基于html5開發(fā)的網(wǎng)站，既可以用電腦瀏覽，也可以用平板瀏覽，還可以用手機瀏覽。安卓系統(tǒng)和蘋果系統(tǒng)都可以流暢地瀏覽。更重要的是，頁面隨著顯示屏尺寸和分辨率自動縮放，內(nèi)容也可以通過觸摸放大縮小。

支持各種瀏覽器。無論是微軟的瀏覽器還是安卓的瀏覽器，或者其他的任何瀏覽器，都可以順暢瀏覽。

設備兼容。HTML5為網(wǎng)頁應用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗功能的優(yōu)勢。HTML5提供了前所未有的數(shù)據(jù)與應用接入的開放接口，使外部應用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。

網(wǎng)頁多媒體特性。支持網(wǎng)頁端的音頻、視頻等多媒體功能， 與網(wǎng)站自帶的APPS、攝像頭，影音功能相得益彰。

還有其他的很多功能，比如三維圖形、性能與集成特性、在線游戲開發(fā)等。

最重要的是，只有基于html5的網(wǎng)頁，才能在手機app和瀏覽器里廣泛轉(zhuǎn)載、瀏覽。一旦進入了【微信應用號】，幾億會員就成了你的營銷對象。

還有一條超級有用的就是，你可以隨時向會員或訂閱者推送信息，這個是前所未有的。

總之，html5帶來的是全新的用戶體驗，可實現(xiàn)多媒體和游戲接入，可以 直接推送，可以在手機上隨意轉(zhuǎn)載分享。

三，超 車

或許，你錯過了門戶時代，或許你錯過了搜索引擎時代，但你不能錯過移動互聯(lián)網(wǎng)時代。在移動互聯(lián)網(wǎng)時代，html5是彎道超車的發(fā)動機。

與傳統(tǒng)的互聯(lián)網(wǎng)生態(tài)不同，移動互聯(lián)網(wǎng)的接口是app，任何app的接口都是html5網(wǎng)頁，微信分享的外部資源也是html5網(wǎng)頁。也就是說，你有了html5網(wǎng)站，就融入了5.6億中國智能手機用戶，就可以在微信這個龐大的群體里恣意營銷。

首先，你必須拋棄小而全、大而全的傳統(tǒng)理念，只做自己核心的內(nèi)容。其次，你要真正把用戶當上帝，時刻注意應用場景和界面的友好，然后才可以設計制作網(wǎng)站。網(wǎng)站一旦制作成功，你就可以進入微信的應用號了。當然，你也可以制作網(wǎng)頁版的app。

需要注意的是，app一般是原生的，與基于html5的app稍有不同，部分品牌的安卓手機（我就不列出來了，有過類似經(jīng)歷的人都知道，期望這些廠商趕緊升級自己的操作系統(tǒng)）不能上傳圖片、視頻等內(nèi)容，其他的與原生app沒什么不同。如果你不需要用戶上傳照片、視頻等文件，就沒有必要花巨資去制作原生app。但社交類、電商類的網(wǎng)站，經(jīng)常要用到圖片上傳，建議做兩套app。

Html5正在高速發(fā)展，由于是開源的，所以現(xiàn)在的不足，不能成為你裹足不前的理由，或許不要多久，html5的網(wǎng)頁app也能上傳圖片視頻，從而可能徹底消滅了原生app。

找個公司，開發(fā)出一個基于html5的網(wǎng)站，生成app，然后進入【微信應用號】，打通與微信的聯(lián)系，你就掌握了先機。剩下來的就是維護好你的客戶關(guān)系和網(wǎng)站內(nèi)容了。

在應用號沒出來之前，H5網(wǎng)站可以在手機桌面生成快捷圖標。這需要用戶在瀏覽器中收藏本站到左面或菜單，一般人比較懶，也不知道這個操作。

用說， Flash的效果大家都清楚。實際上，HTML5和JavaScript擁有很多新屬性，可以用它們來替代Flash。W3Cschool精選16個超牛逼的HTML5和JavaScript特效，看了這些特效，未來的Web發(fā)展前途無量。

1.特效：FlowerPower

創(chuàng)作者使用花朵作為畫刷，以貝茲曲線方式繪圖。

2.特效：Breathing Galaxies

動態(tài)變換直徑及顏色，可通過鼠標或鍵盤產(chǎn)生新形狀，這個效果不錯!

3.特效：Noise Field

移動鼠標可改變粒子運動，點擊可隨機生成不同粒子效果。

4.特效：HTML5 Canvas粒子效果文字動畫特效

W3Cschool利用HTML5，制造出了粒子效果文字動畫特效。只要你輸入框中輸入想要展示的文字，回車后即可在canvas上繪制出粒子效果的文字動畫，相當酷的動畫效果。

5.特效：Swirling Tentacles

三維脈沖效果，沿著脈沖線有運動的顏色漸變模塊。

6.特效：Keylight

雙擊生成兩個以后的鍵即可發(fā)出聲音，移動鍵的位置可產(chǎn)生不同的聲音效果。W3Cschool上面有很多這樣的教程，有興趣可以去看一下！

7.特效：Rotating Spiral

旋轉(zhuǎn)的螺旋效果，單擊可以控制開始和停止旋轉(zhuǎn)，是不是覺得高大上？

8.Blob

拖動水滴有重力效果，雙擊可以分離，小水滴碰到大水滴會合并。

9.Trail

彩色顆粒跟隨鼠標運動效果，帶尾巴淡出效果。

10.Graph Layout

一種交互的力向圖布局效果，刷新三觀。

11.Typographic Effects

使用HTML5 Canvas實現(xiàn)的文本特性，效果超過Flash。

12.Crazy Tentacles

移動鼠標可以進行涂鴉，點擊鼠標可以清除畫布，看著確實瘋狂。

13.Nebula

吸引眼球的粒子系統(tǒng)，目的是測試WebGL性能，如果滑動鼠標，可以產(chǎn)生絢麗效果。

14.WebGL Globe

WebGL Globe 是一個開放的地理數(shù)據(jù)可視化平臺，我們鼓勵你復制代碼，添加自己的數(shù)據(jù)，創(chuàng)建自己的應用。

15.Particle Playground

用鼠標和粒子進行交互，能發(fā)現(xiàn)不一樣的精彩。

16.Surface

使用WebGL實現(xiàn)的水面特效實驗，可放入一張照片，使用鼠標觸動水面會有奇特效果。

上面的HTML5和JavaScript特效，簡直趕超F(xiàn)lash。W3Cschool上面有很多用戶留言稱HTML5和JavaScriptit將替代Flash，不過對于這種說法，也不知道怎么去評判。畢竟這些用戶說的也是很有道理，你認為JavaScriptit會替代Flash嗎?很想知道你的答案!

公眾號：w3c技術(shù)教程

提供專業(yè)的web技術(shù)教程、手冊、工具。

我們使用HTML5， CSS3，甚至Bootstrap設計網(wǎng)站的時候，有些方面是必須考慮的，比如字體大小，標題大小，行間距，每行字數(shù)，字體，顏色，背景圖片和文字的搭配，圖標，留白和布局......所有的這些，都不是隨隨便便的，講究一定的原則。而這些原則通常我們?yōu)閰⒖家恍┚W(wǎng)站。下面就列舉這些網(wǎng)站。

HTML5和CSS3常用參考網(wǎng)站？

瀏覽器渲染符合HTML5標準：http://necolas.github.io/normalize.css/

Google字體：ttps://www.google.com/fonts

柵格：http://www.responsivegridsystem.com/

扁平顏色：http://flatuicolors.com/

選擇顏色值：http://www.0to255.com/

icon圖標:http://ionicons.com/

css: https://css-tricks.com/

js的CDN:http://www.jsdelivr.com/

一個CSS屬性在各個瀏覽器的兼容性: http://caniuse.com/

創(chuàng)建favicon: http://realfavicongenerator.net/

壓縮圖片尺寸：http://optimizilla.com/

CSS文件最小化：www.minifycss.com

JS文件最小化：hTp://www.minifyjavascript.com/

檢測html代碼：http://validator.w3.org/

文/丁向明

做一個有博客的web前端自媒體人，專注web前端開發(fā)，關(guān)注用戶體驗，加我qq/微信交流：6135833

http://dingxiangming.com