跳到主要內容

[展示] 讓Adobe來告訴你CSS3跟HTML5有多酷


一直以來都以發展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效果的使用者思考,否則你的網站將會殘破不堪。
  • 要記得設計也要符合智慧型手機的使用者—目前智慧型手機的使用者已經大幅增加,日後肯定只會越來越多,絕對不可以忽視頁面在智慧型手機上畫面的呈現有多重要!
  • 使用ModernizrModernizr一個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會有更明確的視覺感受!

留言

這個網誌中的熱門文章

[教學] Vue js快速上手 (一) Hello World!

對於前端框架目前有許多的選擇,比方說React、Angular,以及還有今天要介紹的Vue.js!Vue.js有人說它像React,也有人說它像Angular,Vue.js主要是View跟Model的部分,但是效能、速度以及學習門檻都比React或Angular低,所以上手簡單,對於javascript苦手,或是一直遲遲無法學會React或Angular的同學們來說,簡直是一道曙光!

Vue.js的優點呢,主要就是專注在web技術上,支援html template、pug (jade)、coffeescript,甚至可與sass、less等加強版CSS做整合,而擴充性質的plugin也是頗多的,所以對於專注web技術研發的朋友呢,這就真的值得學一下了,畢竟不像React、Angular專注跨平台、跨載具,導致要學的東西就變很多,或是有很多新的架構概念要學習,當然Vue.js也是有缺點的,那就是太專注於web上了,其他平台就沒辦法好好使用了,不過反過來說,如果你主要是開發web,那你來說就沒什麼差了,而且Vue.js可以說是簡單版的Angular,當你學會Vue.js之後要轉到Angular反而可以讓你學習快速,神奇吧!趕快來看一下怎麼用Vue.js吧!

仔細看官網文件你會發現有一堆安裝方式要看,感覺好像非常複雜,其實一點也不複雜,就跟你載入jquery一樣:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
只要把上面這一行放在html檔案裡就可以了,有沒有很簡單?當然你要下載下來放在網站目錄裡也是一個不錯的選擇!

按照寫程式慣例,我們就來示範一個Hello World吧!

第一步,非常簡單,建立空白的html頁面。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

    </body>
</html>
第二步,引入V…

[居家]DIY 自製除濕桶

因為房間太過於潮濕,又因為我家是回字型,我的房間就剛好是裡面那個口的位置,而且四面牆有一面都是廁所,廁所濕氣很容易透過,導致我房間連接廁所的那面牆開始發霉,房間霉味不斷,住起來感覺很差,除濕機每天都可以抽兩桶水,容量是3.6公升,所以兩桶就超過七公升了,但就算每天抽,地上的地磚也因為吸水開始變色,很容易就可以用肉眼辦別出來,房間裡面放的克潮靈除濕桶少說也有四桶,通常只要放一天就可以看到裡面有水了,而因為買了補充包回來很久,但是還剩很多,於是我就心血來潮的自己做起除濕桶來了。
外面除濕桶可重複使用的價格大概70元,大賣場應該可以買到50幾元,不能重複使用的通常都包四個一組要90元,大賣場大概70幾元,除濕劑補充包三入目前大概是60元,也就是一包20元,而一般除濕桶的結構,大致上都有除濕桶蓋子、鎖水紙、除濕劑、隔板與除濕桶本身,如下圖:

除濕桶的蓋子,如果你平常買不能重複使用的那種,大概就會有種疑問就是鎖水紙已經黏死了為什麼還要蓋子?而且蓋子感覺上並不緊,怎麼還需要蓋子?當然在你還沒破壞除濕桶之前蓋子基本上除了美觀以外我實在想不到還有什麼功能,不過如果你想重複使用這種標著不能重複使用的除濕桶,那你就很需要蓋子了!至於如何使不能重複使用的除濕桶可以再利用,我將在文末再慢慢說明,本段的重點在於了解除濕桶的結構,既然知道了結構那當然就要開始準備材料囉!

本次我所使用的材料其實還蠻簡單的,首先是空藥罐一個,橡皮筋小的兩條,硬一點的吸管一支,厚紙板一張以及包禮物有時候會看到類似紗窗那種塑膠網15平方公分大一張。第一步把厚紙板剪成圓形讓他可以放在藥罐中,接著把吸管從剪好的圓形紙板中心穿過去,這樣就可以固定住吸管了,但是為了讓水可以留過去,我在紙板上剪了兩個180度角的扇形,然後把吸管插進去,接下來把類似紗窗的塑膠網剪成四塊穿在吸管上,讓塑膠網在紙板上頭,這樣就可以避免除濕劑掉落到儲水區了,接下來最困難的大概就是鎖水紙了,我們先看看我成功的除濕桶長相,我再來慢慢說鎖水紙的取代方式:

這是我用來製造除濕桶的中藥藥罐 這是我做好的除濕桶長相(下方儲水區真的有水喔)
好啦!說到鎖水紙,這是花費我最多天實驗的地方了,第一天我用普通衛生紙蓋在瓶口,然後用橡皮筋綁住,但是隔天一看,衛生紙早已濕透而且還會滴水,所以鎖水紙不能用衛生紙取代,於是第二天我換上了棉質薄襪子,因為我剛好多一隻,而且棉會吸水,為了讓除…

[教學] Vue js快速上手 (二) 第一支Real-Time即時更新

上篇我們教了Hello World的寫法,是不是非常簡單好懂,Vue.js其實還有許多不同的寫法是在輔助各種開發情況下,可以快速維護,減少前端人員來來回回找code的時間,而快速維護也變得是這一兩年來最重要的網站發展重點,不管是MVC、MVP或MVVM等等開發模式,其實主要的本質我覺得都在畫清職責、方便維護、提升效能,而這些寫法在後續的教學裡,如果有機會或者有好的例子,我會會盡量一一舉例讓大家可以了解。學習所有的寫法有助於您判斷、規劃一個好的開發架構,讓你日後維護或是開發類似的功能時可以事半功倍。本篇當然延續上篇,用“Hello World!”來做範例,不過會做一些修改與調整好來做展示。

首先在這裡我先提出一種與上篇不一樣的寫法,也是最簡單的變形,那就是將參數設定另外寫,也就是當你參數預設值非常複雜時,為了讓您可以發便維護,會建議你採用這種寫法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            {{ message }}
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
data:data
            });
        </script>
    </body>
</html>
接下來,我要在這裡介紹一個新的html擴充屬性,叫V-model,如果直…