Visual Studio 2010 與 Usability
老實說，從學習 .NET Framework 2.0 + ASP.NET 2.0 開炲，一直覺得 Visual Studio 2008 是一套很棒的開發工具。到了後來，升級使用了 Visual Studio 2010 之後，更覺得來到了一個不一樣的世界。Microsoft 應該有感覺到我們「程式開發人員」的辛苦，在 Visual Studio 2010 開發工具中有把「Usability」考慮進去。雖然 Usability 是網頁開發的一個名詞，但其實所有與使用者有互動的內容，都應考慮 Usability，只是考慮多或少。像 Apple 的產品，使用起來只有一個字形容「順」！但，人家背後花了多少的心思在 Usability 之上，才能有今天成功？
回主題，Visual Studio 2010 與 Usability。
在 Visual Studio 2010 新發現系列文章中，我提到過「擴充組件庫」及介紹了幾套當時使用起來感覺很不錯的擴充組件。在「KKBruce的軟體清單」中，也重新整理過。
今天要來介紹一套讓你在開發Web和CSS更流暢、更省時間、更人性的擴充組件。
Web Essentials 擴充組件
Web Essentials，你可以透過 Visual Studio 2010 下載安裝或由網路下載安裝。Web Essentials 增強功能簡介
Web Essentials 是增強 Visual Studio 在 Web、CSS、JavaScript開發上的方便性，不過我認為最棒的是在Web與CSS這兩個部份。即時網頁預覽
安裝Web Essentials 重開 Visual Studio 專案之後，在專案 → 右鍵 → Live Web Preview |
| 圖一：Live Web Preview |
 |
| 圖二：Live Web Preview 嵌入 Visual Studio 2010 |
我先這樣問，我們開發專案，程式寫一寫，是不是要建置，然後到 Browser 去 reload 一下網頁，看一下結果對不對，在來修改 Code。
- Code write → Build → move to Browser's → reload → View it → move back VS → edit Code
細看之下，我們還進行了很多事，但使用了Live Web Preview之後，步驟大幅減少：
- Code write → Save it
沒了，就這樣。依我的電腦測試，約 1 ~ 2 秒，你修改的結果就會自動出現在那小小的 Live Web Preview視窗裡。例如，我修改 Site.Master 的h1文字為「KKBruce的 MVC 應用程式」後，按Ctrl + S之後，約 1.5 秒後：
 |
| 圖三：即時顯示預覽修改內容 |
CSS編輯器增強
Visual Studio 在CSS編輯器這部分一直差強人意，我還因為了Visual Studio的CSS編輯器不好用，寫了「免費CSS編輯器」這一篇文章。不過，Web Essentials 讓我在 Visual Studio 2010 裡寫 CSS 時快樂了不少，讓我們看看Web Essentials增加了什麼好用的功能。- 將參考圖片以base64字串嵌入CSS的url之中
- 快速鍵註解、反註解
- 為 TODO註解加上圖像
- 當mouse移過"顏色碼(#1d60ff)"時，自動預覽
- 當mouse移過"字型碼"(font-family)時，自動預覽
- 當mouse移過"圖片路徑"(url)時，自動預覽
- 程式碼區塊說明
- 區塊程式碼壓縮最佳化
- 直接從方案總管拉圖片進CSS編輯視窗，會產生對應路徑
- 直接互換 hex, rgb, 顏色名稱
- 對特定 IE 版本進行CSS設定
- 專案 → 目錄 → 加入 → 增加「CSS與JavaScript檔案」的快速鏈結
圖片及說明，Web Essentials擴充組件線上說明都很簡單易懂。以下就Web Essentials擴充組件說明內沒有的內容加強一下。
 |
| 圖四：TODO 顯示圖示 |
當我寫註解寫上「TODO」關鍵字時，Web Essentials 會在最前面加上一個小圖示提醒你，這裡有個 TODO 必須注意。
 |
| 圖五：拉圖片直接產生路徑 |
這是個非常方便的功能，然後就可以配合第一個 base64 字串的產生使用。
 |
| 圖五：CSS url圖片轉換為Base64字串 |
沒有留言:
張貼留言
感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。