SC.1988: 2015

2015年8月20日星期四

[工具] 如何讓 Chrome Dev Tool 也能 dark theme - 使用 DevTools Theme: Zero Dark Matrix 套件

身為網頁開發人員，長時間盯著開發工具鐵定是避免不了，
而螢幕預設的白底總是讓人容易眼睛酸澀...

從 Visual Studio 2012 開始便內建深色主題 (dark color theme) 的開發環境，套用後舒服多拉！

而現在最方便的前端開發工具「Chrome Developer Tools」該如何方便的套用深色樣式呢?

以下以介紹擴充套件 DevTools Theme: Zero Dark Matrix 安裝方法：

安裝 chrome 擴充套件 DevTools Theme: Zero Dark Matrix
開啟 chrome 開發人員設定連結 -> chrome://flags/#enable-devtools-experiments，將「開發人員工具實驗性功能」啟用
在 Developer Tools Setting 裡面就會有 Experiments 選項，將 Allow custom UI themes 選取，關閉 Chrome Developer Tool 在重開就完成拉！( 撒花～

[上課筆記] HTML5+CSS3跨平台網站設計進階班 Day3 - Response Design 實例演練

神奇的 `@media`

在 style 的 css 設定裡面，可以使用 @media 功能指定要做響應式設計的方法，

至於什麼是 css，請 google，教學很多，至於什麼是響應式(Response Design)，

簡單來說就是針對不同的瀏覽畫面 (通常是因為載具不同)，畫面自動做響應，切換到合適的
設計版面。

參考網址：http://learnwebcode.com/responsive-web-design-tutorial/

至於怎用寫 css 的 @media

撰寫方式:

@media, 要設定的條件類型，設定值


@media screen and (max-width: 900px) {

    body {

        color: red;

    }

}

以上 css 樣式指令為：當瀏覽畫面 < 900px 時，套用其中的 css 樣式設定。

這邊推薦一個中文網站，寫的詳細又不錯
小雕雕的家 -Responsive Web Design (RWD) 響應式網站開發教學與心得

另外還有一個設定方式


<link rel="stylesheet" href="css/main.css" media="screen and (max-width: 900px)" ></link>

當滿足 media 條件時，此 link 的 css 樣式才會被套用。

思考時間：為何有的 @media 內，針對 css 類別名稱要另外定義，不直接覆寫原有的類別呢?

原因一：方便好管理，一眼就可以看出是針對某種裝置做的設定

原因二：因為 css 內容樣式已經跟類別名稱定義不符，導致樣式類別名稱會看起來很奇怪。

另外可以在 html <head> 增加以下 <meta> 標籤，告訴 browser 要支援手機樣式
<meta name="viewport" content="width=device-width, initial-scale=1">

關於針對觸控小螢幕的 css 樣式設定注意事項：

1. 不能使用 :hover，像這類的滑鼠事件，在平板or手機上是做不到的，最常見的就是 nav 導覽，滑鼠移過去就會跳出小項目，這樣的做法在觸控螢幕要改為 .click 事件

2. 可操作元素大小不可 < 0.3 公分，否則會很難觸控操作。

2015年8月15日星期六

[HTML] HTML5 Web Storage

HTML5 針對瀏覽器的本地資料儲存功能定義了多個新方法，
其中 Web Storage (localStorage & sessionStorage) 算是最簡單方便使用的，
Web Storage 跟原本地資料儲存 "cookie" 是個很類似的東西，都是 key-value的架構。

storage 與 cookie 不同的地方

傳輸，cookie 在每個 HTTP request 都會被送到 server 端, storage 僅在 js 中使用
容量，cookie 容量 4KB, web storage 至少 5MB

sessionStorage 和 localStorage 差別

壽命長短
sessionStorage: 關閉 TAB or Browser 即清除
localStorage: 需清除 browser cache or 手動指令清除
有效範圍
sessionStorage: 無法跨分頁, 當然肯定無法跨瀏覽器
localStorage: 可以跨分頁

Browser Support

各大瀏覽器包含 IE8 以上 (IE8都能用了，就放心服用吧

儲存容量

根據各家瀏覽器實現不同，預設為至少5MB，IE8為10MB

使用方法

存取

localStorage.setItem(“{key}”, “{value}”);

localStorage.getItem(“{key}”);

localStorage.{key} = “{value}”;

var retrieve = localStorage.{key};

(Storage 是 object type, 但是HTML標準只能直接擴充屬性型態為 string)

刪除

localStorage.removeItem(“{key}”);

清空

localStorage.clear();

其他

擴充使用方式

因為 localStorage 是 key-value 的架構，直接使用上會有些不方便，因此可以透過一些方法，更方便管理與使用

搭配 JSON 做操作 (JSON.stringify(), JSON.parse())
擴充 localStorage function 屬性，做出 namespace

資料來源：

其實關於 localStorage 的用法實在蠻簡單，並且資料也算好找

w3schools -> HTML5 Local Storage

http://www.w3schools.com/html/html5_webstorage.asp

Huan-Lin 學習筆記 -> HTML5 Web Storage

http://huan-lin.blogspot.com/2012/06/html5-web-storage.html

吳草兒 -> [UglyCode] 兼顧namespace機制的localStorage存取方式

http://blog.xuite.net/grassboy/Tech/60699360-%5BUglyCode%5D+%E5%85%BC%E9%A1%A7namespace%E6%A9%9F%E5%88%B6%E7%9A%84localStorage%E5%AD%98%E5%8F%96%E6%96%B9%E5%BC%8F

Alien的筆記 -> 本地存储替代cookie：qext.LocalStorage

http://www.baidufe.com/item/af0bb5872f2a1ef337ce.html

2015年8月20日 星期四