引用自http://nowills.blogspot.tw/2011/08/adobecss3html5.html

 

一直以來都以發展Flash技術聞名的Adobe,自從被Apple重重的一拳打在臉上後也開始認真的發展CSS3與HTML5技術相關軟體與應用,而在今年的八月初,Adobe推出了Beta網站—the expressive web,這個網站是基於HTML5環境,運用CSS3的搭配,製作出一些新穎的網頁效果,換句話說,the expressive web是Adobe為了展示HTML5與CSS3的效果所製作的展示網站,你可以隨著左下方的箭頭一格一格觀看,相信每點一格都會讓你發現一些驚奇。


為什麼這個網站是Beta?原因很簡單,因為並不是所有的瀏覽器都可以看到完整的畫面,而且也不是所有的瀏覽器都可以支援HTML5新增的全部功能(更何況HTML5還沒有正式訂定完成),只能說普遍上都可以運作而已,至於哪些瀏覽器不能支援?想當然爾,如果你的瀏覽器不是最新版本,那支援機率當然就會比較低,而每個展示畫面下方都會列出哪項新功能在哪些瀏覽器有支援,而這些有支援的瀏覽器又佔整體使用者多少百分比,原則上都在40~50%之間,相信有數據的搭配呈現會讓整體更有說服力。


透過the expressive web網站的建立,Adobe展示小組也公佈了本次過程中所學到的經驗,以下將用我個人的理解加上自己的解說將Adobe小組的經驗做一個簡短的呈現:

儘早決定是否支援舊版瀏覽器-支援舊版瀏覽器可以提高網站完整性卻會消耗過多的維護時程。

只使用HTML5與CSS3在你的網站
—避免使用其他版本以減少頁面上語言與瀏覽器的衝突。

隨著HTML5的制定網站應隨之維護的更佳完善
—徹底執行HTML5規範來制作網站。

瀏覽器支援的性能不在僅限於Javascript
—隨著CSS3的誕生,部分的動態效果也可以轉由CSS3來執行。

不要動太多東西
—這個道理很簡單,太多動態會消耗電腦效能,一般頁面上常見會同時使用動態的部分就有主選單、次選單、主視覺banner等,需要考慮過多的動態效果會讓電腦效能吃緊,效能吃緊會大大影響頁面呈現的效果。

要準備備案
—一定要替那些看不到最新的HTML5或CSS3效果的使用者思考,否則你的網站將會殘破不堪。

要記得設計也要符合智慧型手機的使用者
—目前智慧型手機的使用者已經大幅增加,日後肯定只會越來越多,絕對不可以忽視頁面在智慧型手機上畫面的呈現有多重要!

使用Modernizr
Modernizr一個Open Source 的Javascript 資源庫,可以幫助你建構HTML5與CSS3。

好的工具
Adobe Edge Preview是Adobe最近推出的新軟體,可以幫助你預覽與建立HTML5與CSS3網站,最重要的是還是可以使用Flash製作動畫嵌入HTML5的Video Tag中。


最後,在the expressive web上也有資源庫頁面,可以讓你查看the expressive web上使用的HTML5與CSS3有哪些之外,也整理了一些HTML5與CSS3的資源網站供大家查看,相信大家看完這個網站,對於HTML5與CSS3會有更明確的視覺感受!


原也網頁設計、網站規劃、網站行銷。

arrow
arrow

    monicamonica451 發表在 痞客邦 留言(0) 人氣()