2015年4月18日 星期六

好書 : 互動式網站前台開發武功秘笈 :使用HTML5、CSS3和jQuery

這本書借自左新, 分為基礎, 應用, 與比較三篇. 基礎介紹互動網站前台三大技術 : HTML5, CSS3, 與最夯的 jQuery.


第六章介紹了 CreateJS Suite 套件, 這是以 Javascript 為基礎的網頁動畫函式庫, 用來簡化 HTML5 中撰寫動畫的 Javascript 語法. Adobe 也提供了 Toolkit for CreateJS 擴充套件可將 Flash 動畫轉換成 HTML5/CreateJS 語法. 參考 :

# http://www.createjs.com
http://www.adobe.com/go/downloadcreatejs
# Getting started with the Flash Professional Toolkit for CreateJS

其實這本書程式方面較弱, 應用篇主要在講如何用 jQuery 設計導覽選單與淡入淡出效果, 也就是 click(), hover(), 以及 fadein(), fadeout(), animate() 函式的用法罷了. 而比較篇則是介紹輪播效果以及介紹循序動畫的五種製作方法. (jQuery, CSS3, HTML5, Edge Animate, Adobe toolkit for CreateJS). 此書較適合網頁設計師.

比較有趣的是書末介紹了 Adobe Creative Cloud, 只要申請 Adobe ID 登入, 就可以付費取得 Adobe 軟體如 Photoshop CC, 透過雲端儲存空間與檔案同步能力, 與團隊成員或客戶分享創作概念與成果, 即使式行動裝置也可以. 透過 Behance 整合可以在專屬網站 URL 上發布作品集, 加入全世界最大創意社群. 不過費用不便宜 :

"取得我們的所有創意應用程式和連線行動應用程式,每月只需支付新台幣 960 元起", 學生四折, 每月 320 元.

# https://creative.adobe.com

摘要 :

  1. 將圖片變成半透明 :
    $("img").css("opacity",0.5);
  2. 選擇器 :
    $("選擇器 類別")
    $("選擇器 : 偽類別")
  3. jQuery 除錯 :
    console.log("OK");
    console.warn("NG"); //顯示警告訊息
    console.error("error"); //顯示錯誤訊息
    console.info("OK"); //顯示一般訊息
    console.clear(); //清除 console 視窗中所有訊息
    console.assert((x==1), "x != 1"); //當條件為 false 時輸出訊息







沒有留言 :