Brackets 是 Adobe 公司以開放原始程式碼(Open source code)的方式來發行的文字編輯軟體，主要是針對網頁程式開發而設計的一個編輯軟體，它幾乎是由 Javascript, HTML, CSS程式碼所撰寫而成，使用 Chromium Embedded Framework (CEF) 當作一個 shell 來處理Javascript, HTML, CSS 這些原始程式碼，整個程式碼可以在 GitHub 網站下載 。 從 Brackets 網站下載安裝檔，然後直接執行安裝檔，就可以完成 Brackets 的安裝程序。完成安裝程序後，擴充套件僅有 Extract for Brackets (Preview)套件，在 10 Awesome Brackets Extensions You Really Need 中提及安裝幾個重要的擴充套件，視個人需求而定，對於想要開發 HTML, Markdown 的人，建議安裝下列幾個套件： Brackets Beautify Markdown Preview Emmet 額外加強 Brackets 編輯器的功能有： Documents Toolbar Themes for Brackets Brackets Icons Brackets Git //需要先安裝 Git client 軟體 安裝這些套件相當簡單，只要開啟 Brackets 編輯器，按右上角第二個方形的小圖示，開啟擴充套件管理程式(Extension Manager)>>available 圖示，然後搜尋套件的名稱，按下 Install 即可。 安裝 Brackets Git 套件需要先安裝 Git 軟體，在 Windows 平台可以到 Git 網站下載，我通常會安裝 STL's MinGW，他已經把 Git 包在裡面，所以在 Brackets Git 設定頁面，要像下圖的把Git 路徑及執行檔設定到設定頁面中，才不會有錯誤訊息產生。 在完成 Brackets 與擴增功能的套件安裝完成以後，對於要使用中文的朋友，以及喜歡像：輸入左括號能自動產生右括號的這項功能，需要自己在 Brackets 中做設定： 設定中文語系：Debug >> Switch...
發表文章
昨天有一則新聞： 高志明國宴獨坐「冷清難忘」 外長道歉 ，在這影片當中，比較覺得訝異的是：竟然可以回答：人手不夠，無法一一帶位，.. 是他坐錯位置。 身為一位外交部的部長，可以如此說法，台灣的大官們，被下屬奉承到快要無感了！ 這是管理上的問題吧，不需要外交部的人員呀，難道國宴餐廳的服務人員不足嗎？事先的安排、規劃完善嗎？若餐廳人員不足，為何要選擇這一家餐廳？莫非 ...。總之，竟然可以回應這種：「他坐錯位置」的話語，這不是無感，那是什麼呢？高先生 po 主要的目的為何？這些高官真的忙到不去瞭解真正的原因；還真是聽話，訊息不正確，下屬說什麼？他就聽些什麼？真是沒有知覺？國家將亂，不是一天造成的。 文書組是掌管文公文檔案的最重要單位，而公文電子化已經實施多年，仰賴資訊科技不只是必然的趨勢，是已經成為事實的產物，然而，人們還是可以因為黨派、核心的人物，而放棄了對於這個單位未來有更好、更多作為的人選，選擇核心人物，需求明明寫著：「具有資料庫、XML等背景的人為佳」，卻是選擇對於資訊技術完全不了解的人選，如果再私人機關，有可能發生這種事嗎？在公務機關中，這也意味著人們總是要「靠」關係，沒有關係，再適合、再強的人選也是沒有人選擇你／妳，更不用提及公務體系年資的問題了。這就是公務體系鄉愿的一群人，做鄉愿的事情罷了。
Responsive Web Design(RWD) 是現在網頁式設計時必須要考慮的要件，但是在開發的過程中，需要同時對於不同的 Device 檢視效果，gulp + browser-sync 是一種可以同時更新不同 Device 的 workflow，設定的步驟如下： 安裝 nodeJS: npm update: npm update 安裝 global gulp : npm install -g gulp 切換到 project 目錄 安裝 gulp + browser-sync + gulp-sass: npm install gulp browser-sync gulp-sass --save-dev 新增 gulpfile.js:內容如下 執行 gulp: gulp 依照 Browser-sync 網站的說明 ，gulpfile.js 內容如下： var gulp = require ( 'gulp' ); var browserSync = require ( 'browser-sync' ); var reload = browserSync . reload ; var sass = require ( 'gulp-sass' ); // start server gulp . task ( 'browser-sync' , function () { browserSync ({ server : { baseDir : "./" } }); }); // process JS files and return the stream. gulp . task ( 'js' , function () { return gulp . src ( 'js/*js' ) . pipe ( browserify ()) . pipe ( uglify ()) ...
Gitbook 是一種文件產生的套件軟體，提供使用者可以利用簡單的 Markdown 語法來撰寫文件，再使用 gitbook 的工具轉成書本的形式。最大的好處在於： 使用的是 Markdown 語法，讓一般的使用者可以很容易、輕鬆的撰寫文件，相較於其他的文件產生的套件，例如：Sphinx[1], Docbook, TeX/LaTeX, etc ...入門的門檻已經簡單太多、太多了。命名為 Gitbook，意味著它結合 git 的功能，把文件送到 gitbook 網站 ，讓世界所有人都可以看到你/妳的作品。除此之外，系統上也有定價的機制，讓瀏覽者可以付費觀看。 Gitbook 是使用雲端來儲存世界上所有使用者撰寫的書籍，網路上也有其相同雲端服務的系統，如： Read The Docs ，只要到網路上免費申請帳密，就可以在線上編輯、發布自己所寫得書籍，不需要再特別安裝任何軟體。若要離線編輯 gitbook 書籍，需要安裝它提供的 gitbook Toolchain 軟體。這個工具軟體是使用 Javascript 所撰寫的程式，需要安裝 node.js 引擎，配合 npm 來安裝。在不同平台的安裝與設定上略有差異，以下是在 Windows 系統安裝與測試的過程： 首先安裝 node.js 更新 npm 套件： npm update 安裝 git 軟體： npm install git // 若安裝 STL's MinGW 則不需要再安裝 git 使用 npm 安裝 gitbook 工具程式： npm install -g gitbook-cli 完成安裝程序，就可以開始使用 gitbook 來產生書籍的文件。在使用這個工具之前，先說明這個套件的指令： 輸入 gitbook 出現 gitbook help 文件 安裝完成後，預設的 gitbook版本是 2.1.0 版，可以下指令來檢查：gitbook versions 檢查有幾種版本可以使用： gitbook versions:available 安裝 2.2.0 版： gitbook versions:install 2.2.0 移除 2.1.0 版：gitbook versions:uninstall 2.1.0 檢查輸出的版本： gitbook -V 產生 Webstie ...
=========================注意============================== 底下的環境是：Windows 8.1 作業系統的測試結果，Windows 10 x64 不適用 ========================注意=============================== SVG 向量圖形 是 W3C 另一種的標準，簡單的 Text Editor 就可以開啟 SVG檔，且使用 Browser 就可以瀏覽圖形，與一般常用圖檔最大的差異在於放大後不會失真，也因此可以將圖形任意放大、縮小、旋轉，再將每一個片段銜接起來，組合成簡報(Presentation)。 Free Source software 的 Inkscape 是製作 SVG 向量圖形的最佳編輯軟體，再加上 Sozi 這個動畫的編輯軟體，就可以後製成為簡報。目前已經有許多的教學以及範例，可以在 Sozi 官方網站中找到參考資料。 在 Sozi 的網站中，目前已經發展到 sozi 15.05 版本 ，這個版本已經脫離 Inkscape 的擴充套件，也就是說，不需要再安裝任何 python 相關的軟體，只要下載版本的壓縮檔，解壓縮後就可以直接編輯 SVG 圖檔，在網站中的安裝說明，僅是用於 sozi 13 的版本。一開始安裝時，並沒有詳細的讀 sozi 15.05 release 的說明 ， 一直認為還是要安裝到 Inkscape 的擴充套件。如果想要在 Inkscape 中的擴充套件，則要下載 sozi 13 的版本，然後按照 sozi 的安裝說明文件 來安裝。 安裝 sozi 15.05 以後，可以按照 sozi 的教學文件 來製作簡報： 下載 sozi 提供的 svg 圖檔 開啟 sozi 目錄中的 sozi.exe 點選畫面中間 Load local file，開啟 svg 圖檔 編輯 svg 圖檔 按鍵說明： Ctrl + 滑鼠中間滾輪：放大或縮小 Alt + 滑鼠中間滾輪：放大或縮小 Shift + 滑鼠中間滾輪：旋轉 圖中的 Id 欄位是簡報中#的編號，一般是依照數字順序來設定。 上課時需要一些 .svg 的 Templates 來當作 sample 方便製作...