HOME 回資訊服務處首頁 Login
ITs通訊
搜尋電子報


含詳全文
訂閱電子報
請輸入E-Mail
 
 
2017.03.02 2017年第4期 設為首頁 | 加入最愛 | RSS 訂閱
最新電子報 | 上一期 | 下一期 | 各期電子報


   
中央研究院資訊服務處通訊
中央研究院資訊服務處發行
2017年第4期   民國106年3月2日
4月20日舉辦本院「資訊室主管及管理者經驗交流第27次座談會」

 本院「資訊室主管及管理者經驗交流第27次座談會」將於4月20日(星期四)下午2時於學術活動中心2樓第一會議室舉行,本次座談會將邀請國家高速網路與計算中心謝錫堃主任分享「國網中心的挑戰與機會」,機會難得精彩可期,敬邀對此議題有興趣的同仁報名參加!

 座談會報名方式:請線上填寫「報名表」即可。

Top

106年資訊處推廣課程公告

上課日期

課程名稱

建議對象

2017/03/15(三)
14:00-17:00
Office範本製作與自動化設定 具備office基礎觀念者 人文館
遠距會議室
2017/04/12(三)
14:00-17:00
Adobe Acrobat 建立PDF相關功能 對 Acrobat Adobe DC 相關應用有興趣者,適合初階至初進階使用者的學習內容 人文館
遠距會議室
2017/04/26(三)
2017/05/03(三)
2017/05/10(三)
2017/05/17(三)
09:00-17:30
Python與大數據與物聯網的實作 需有簡單程式設計基礎,如C/Java、Python並具有高中代數基礎觀念者 人文館
遠距會議室
2017/04/28(五)
14:00-17:00
使用GanttProject進行專案與時程管理 希望將工作項目有效的進行時程管理之使用者 人文館
遠距會議室
2017/05/15(一)
2017/05/18(四)
14:00-17:00
Excel 2013 大數據資料統計與分析(二) 1 熟悉EXCEL 2013使用的同仁
2. 想進一步使用EXCEL 2013樞紐分析功能的同仁
3 想學習PowerPivot進行資料分析的同仁
人文館
遠距會議室
2017/06/06(二)
14:00-17:00
使用GIMP美編軟體進行文宣設計 有需要進行文宣美編設計者 人文館
遠距會議室
2017/06/27(二)
2017/06/29(四)
14:00-17:00
Excel巨集辦公室自動化(三) 孰悉Excel基礎操作之使用者 人文館
遠距會議室

推廣課程聯絡窗口:

中央研究院資訊處 資訊訓練與推廣服務
Email:train@sinica.edu.tw
TEL:02-2789-8863

Top

院網「影音服務」近期新增影片

 本院院網路影音服務,內容涵蓋知識饗宴、各類講座、院士會議、學術論壇、活動紀錄、科普演講等項目精彩影片,採不定期方式新增上網,歡迎有興趣的同仁上網觀看。

 近期新增影片如下:

Top

近期惡意信件整理
 惡意電子郵件主要利用網路使用者的好奇心及其他人性弱點,以聳動的標題、關鍵字或內容,誘使使用者開啟藏有惡意程式碼、附件,或是惡意外部連結的電子郵件;有時,該郵件並會結合新聞時事,或是假冒使用者所認識的往來對象來寄送郵件。使用者於開啟惡意電子郵件後,所使用的電腦設備將可能被植入後門或木馬程式,造成機敏資料外洩之風險。

 同仁除了應定期對所使用電腦之作業系統(如Windows)及應用軟體(如Office、Java等)進行修補程式之更新外,另於開啟電子郵件時,亦請特別留意含有以下所列主旨、內容及附件之郵件:

一、資訊服務處資安組彙整近期院內同仁收到之惡意信件主旨及附檔名供參考:

  • Fw: PPN Oman Project

  • Delivery reports about your e-mail

  • Mail System Error - Returned Mail

  • Engder Precision Machinery 附件文件

  • Delivery reports about your e-mail

二、有關惡意信件判斷方式可參閱ITs通訊「近期惡意信件案例分析」一文。

Top

資安通報
 資安通報資訊,主要根據「國家資通安全會報技術服務中心」所發布的資安消息而來,舉凡病毒漏洞、弱點檢測、微軟資安等均為通報的主要內容,近期值得同仁關注的資安通報如下,請使用者留意,並儘速更新相關程式及軟體!
Top

二項資料庫開放使用

 以下資料庫開放使用,歡迎試用 :

Top

資訊服務處重要紀事(105年7-12月)

資訊服務處重要紀事(105年7-12月)

07

完成第32屆院士會議相關資訊支援作業

7月12日完成RapidILL文獻傳遞服務系統採購案

08

 

8月11~25日舉辦本院新版網站版型設計票選活動

8月24日協助完成新版永續科學中心網站上線

8月26日協助完成民主治理與改革小組網站上線

09

 

9月12日「公共設施預約系統」新增功能上線(周期性預約、以SSO帳號登入、點選日期即可預約、1次預約多個時段)

9月12日起配合行政院開始資訊安全網路攻防演練

10

 

 

 

10月11日召開本院「資訊室主管及管理者經驗交流第26次座談會」

10月11日專業證照管理功能上線

10月13日網路投票系統改版上線,提供中央研究院組織與運作改進委員會」院內同仁代表選舉使用

10月25日知識饗宴系列「光子新紀元」於學術活動中心舉辦第一場網路現場直播

10月29日「院區開放參觀」舉辦多項資訊活動

10月31日新版院網上線

10月31日軟體管理系統改版上線

11

11月4日全院財產系統擴充基金類財產提列折舊功能

11月12日辦理骨幹防火牆上線及系統測試作業

11月18日配合行政院完成105年資訊安全網路攻防演練

12

 

 

 

 

 

12月1日起本院行政相關資訊系統限院內使用

12月6日召開105年度「圖資相關電子資料庫」業務會議

12月9日資訊服務處通過ISO/IEC 27001:2013認證年度複評,取得證書持續有效性證明。

12月16日化學計算軟體Gaussian版本更新

12月19日完成「106年防毒軟體升級」採購案

12月19日完成「105年中央研究院SAS軟體授權」採購

12月20日開始導入GCB測試

12月22日 研究成果系統擴增,使用介面全面改版、著作目錄增加 "DOI"匯入功能、新增履歷表(CV)匯出、增加匯入科技部格式下載功能

Top

Brackets網頁HTML、CSS及JavaScript碼編輯器

一、前言
 Brackets是專門為設計網頁而開發的文字檔編輯器,它特別懂得HTML、CSS及JavaScript語言,也適合編輯PHP、Python、VB、C++、JAVA、JSON、Markdown、Perl、Ruby、LESS、SASS、SVG及一般文字等數十種類型的檔案,免費提供Windows、Mac及Linux等作業系統下的版本供安裝。Brackets系統小巧輕盈,整合的多項輕便好用的功能,例如能夠在字裡行間即時提供協助的快速文件(Quick Docs)、行內快速編輯(Quick Edit)、視覺化的快速顯示(Quick View)及即時預覽(Live Preview)等等特異功能。這個軟體是於2011年起由Adobe公司進行的開源碼計畫所開發的,此計畫目前在GitHub中是個相當活躍。另外Adobe公司的Dreamweaver開發團隊,也試圖將Brackets整合進Adobe公司中的各項軟體中,成為其Code editor engine。

 另外,較為特別的是Brackets編輯器本身主要是用HTML、CSS及JavaScript碼所打造,所以Brackets系統的開發也是使用Brackets在進行的。你您有在設計網頁嗎?使用HTML、CSS及JavaScript碼嗎?假如是,那你也有機會為Brackets系統撰寫擴充功能,增加更多的特異功能,專供你自己使用,或是分享供大家來使用。

 Brackets編輯器的Logo如下圖,是個成對的中括號圖形:

二、安裝與使用
2.1 安裝
 Brackets編輯器可以從主網站下載後安裝執行。目前有供Mac、Windows及Linux (Debian/Ubuntu)執行的版本。系統主要是以HTML、CSS及JS碼所建構,但不是以網頁的方式執行,而是以桌面應用程式的方式執行,一開始先由原生碼編寫的Shell程式啟動,再讀取這些在Local硬碟中的系統檔案執行。

2.2 開啟專案
 Brackets編輯器開始執行時,可由「File > Open Folder」開啟一個檔案目錄,Brackets會將此一目錄視為「專案」,某些搜尋的操作會針對專案目錄中的所有檔案進行,另外「快速編輯」(Quick Edit)的功能也只會參考到專案中檔案。操作介面的左側,以樹狀結構列出檔案。當點選檔名後,即在編輯區中開啟檔案,供編輯檔案中的內容,一次只有一個檔案開啟。你可以雙擊(double click)樹狀檔案列表中的檔名,就可以將常用的檔案放置在工作檔區(Working Files)中,方便點選檔案進行檔案切換了。

 

2.3 切換成中文使用介面
 由功能選單選擇「Debug/Switch Language」,再選擇「繁體中文」,再按「Reload Brackets」,就可以切換為中文使用介面。

三、特點功能
3.1 快速編輯(Quick Edit):CSS及Javascript碼的快速編輯功能
 在編輯HTML檔案的內容時,只要按下Ctrl-E快速鍵就可以在游標的位置進行Quick Edit的功能,這將會顯示出此處所有相關的CSS規則,這樣就不用另外開啟CSS檔,來找尋所有的CSS設定了。在修改完了CSS樣式後,只要按ESC鍵就可以關閉這個行間內嵌(inline)的編輯器,也可保持inline編輯器開啟,而繼續編輯HTML碼,最後只要在inline編輯器的範圍之外按ESC鍵,就可以關閉所有的inline編輯器。

 如下圖在body標籤上按Ctrl-E快速鍵啟動Quick Edit功能,就會在下一行位置開啟在main.css檔中關於body的樣式設定,並且可以直接修改內容。也可以點選「New Rule」建立新的樣式規則。

 這個Quick Edit功能會依據游標所在位置的狀態而有不一樣的功能:

  • 當游標位於HTML檔中的class或id屬性,或是HTML標籤時,快速編輯功能就會顯示出在專案中所有符合的CSS、SCSS或LESS樣式規則。你可以直接在HTML內文中以inline的方式修改這些規則。假如有多個樣式規則符合時,右側會列出供選擇,如下圖。你可以用滑鼠點選,或用Alt-Up及Alt-Down鍵選擇,也可點選CSS檔名直接開啟檔案進行編輯。

  • 在inline編輯器中可以按「 New Rule」鈕或按Ctrl-Alt-N鍵,建立新的CSS規則。
  • 游標在十六進位顏色碼或是rgb/rgba/hsl/hsla顏色的位置時,Quick Edit會顯示顏色預覽供參考,如下圖:

  • 游標在JavaScript的函數名稱(function name)位置時,Quick Edit會顯示函數的定義內容,如下圖,即使是定義在另外一個檔案中。

  • 游標在CSS/LESS/SCSS檔案中的cubic-bezier()或steps()轉場計時函數(Transition timing function)位置時,Quick Edit會顯示圖形式轉場曲線編輯器(Graphical transition curve editor),如下圖,其它預設的ease、ease-in、ease-out、ease-in-out、step-start及step-end轉場函數也都可以使用。

       

3.2 快速文件(Quick Docs)
 快速文件功能是在CSS/LESS/SCSS檔案時,游標在CSS的屬性/值的位置時,按Ctrl-K鍵時Quick Docs會使用行間內嵌(inline)方式顯示相關的說明文件。這些說明內容是由Web Platform Docs計畫所製作提供。

 你可以同時開啟許多個inline editors及inline docs來使用。要關閉其中一個,只要點選其左上角的「X」或是游標在其中時按ESC鍵使可以了。要關閉所有的inline editors及docs,只要將游標放在主文件中再按ESC鍵就可以了。

3.3 即時預覽HTML及CSS變更功能(Live Preview)
 長久以來我們總是在編輯器中修改網頁碼,存檔後再切換到瀏覽器,按「重新整理」載入修改後的網頁碼,檢視呈現的結果,反覆這樣的程序直到完成。Brackets的即時預覽功能讓你省去這樣繁複的程序,直接將你所編輯的網頁碼推送到瀏覽器中,無需另外重新載入。為了避免影響你現在的瀏覽,Brackets即時預覽功能會另外開啟一份Chrome瀏覽器。目前Brackets編輯器只能即時預覽HTML及CSS檔,但是儲存修改過的JavaScript檔,也會自動重新載入頁面,另外,即時預覽目前只能在Chrome瀏覽器上執行。使用即時預覽的方法有下列兩種:

3.3.1 沒有伺服器時的方法
 開啟一份HTML檔,然後選擇「 File > Live Preview」或是點選視窗右側的閃電(Lightning bolt)圖示,Brackets會啟動Chrome瀏覽器,並在分頁中開啟你編輯中的檔案。瀏覽器中所顯示的內容是由Brackets內建的伺服器所提供的,但不會包含你的App中背後的程式邏輯。
這個模式之下所提供的即時預覽功能有:

  • 等你在HTML及CSS檔中輸入立即更新到瀏覽器中的預覽顯示,不需要在瀏覽器中進行重新載入。
  • 辨識為HTML檔的檔名延伸有:htm、html及xhtml。
  • 當你編輯其他種類的檔案時,在存檔時網頁會自動重新載入。
  • 在HTML檔中移動游標,在瀏覽器中立即同步標示出相對的元素。例如正在Brackets編輯<h1>....</h1>這一行時,瀏覽器那一邊就會將這一行的內容加上藍色外框顯示。
  • 在CSS/LESS/SCSS檔中移動游標,在瀏覽器中立即同步標示出所有的相對元素。例如正在Brackets編輯h1 {...}這一個樣式規則時,瀏覽器那一邊就會將網頁中所有<h1>...</h1>的內容加上藍色外框顯示。
  • 所有的以游標驅動的預覽標示功能,可以由取消勾選「VIEW > Live Preview Highlight」來停用。
以上所有的CSS功能也可以在內嵌CSS快速編輯器(Quick Edit CSS editor)中正常運作。

3.3.2 使用另外架設伺服器的方法
 請先確定本機上的網頁伺服器正在執行,而且伺服器所提供的檔案正是你正在Brackets 編輯的檔案。選擇「File > Project Settings」並且輸入相對於你Brackets所開啟的檔案目錄的本機伺服器網址,通常是以localhost開頭的網址。然後開啟編輯一個網頁檔,可以是HTML、PHP或是ASP檔,啟動「 Live Preview」,Brackets會啟動Chrome瀏覽器並使用伺服器的網址載入你正在編輯的網頁。但是在這種狀況下,就會有一些功能無法動作了。那些需要經過伺服器處理的檔案,例如PHP或HTML檔,就無法即時預覽了,但還是可以在存檔時,自動重新載入。只有CSS檔的變動可以即時預覽。同樣的「Live Highlighting」功能也只在CSS檔有動作了。

3.3.3 SCSS/LESS檔的即時預覽限制
 Brackets無法即時預覽你的LESS/SCSS檔,但在你存檔時還是會自動更新預覽網頁。你也可以用一些Brackets擴充功能套件,例如 Brackets SASS或是LESS AutoCompile,自動進行存檔更新的動作。但是假如你使用less.js這種動態編譯的方法,就無法即時預覽了,必須存檔再載入才能看到結果了。

3.4 快速檢視(Quick View)
 快速檢視功能方便你檢視網頁碼中的圖檔及顏色設定。只要將游標移到網頁碼中的顏色設定、漸層或是圖檔參引,就會跳出一個很小的檢視視窗,如下圖所示。可以在「View」選單中停用這個功能。

3.5 分割視窗(Split View)
 Brackets提供兩個視窗的編輯功能,你可以水平分割或垂直分割成兩個編輯視窗,分別編輯兩個檔案或同一個檔案。從選單選擇「 View > Horizontal Split」或「 View > Vertical Split」,切換為兩個視窗編輯模式,這樣同時也會在工作檔案表列(Working Files)中產生另外一個表列,你可以用滑鼠拖放的功能,把工作檔案從一個表列拖到另外一個表列中。

 Brackets會記憶住每一個專案的視窗分割狀態,所以當你切換到另一個專案時,會恢復成為上次離開時的視窗分割狀態。從選單選擇「View > No Split」就可以切換回單一視窗的模式,而且會合併兩個工作檔案表列成為一個表列。

3.6 區塊收摺(Code Folding)
 在檔案編輯區左側的行號(line number)旁邊有個三角形符號,是用來展開/收摺網頁碼區塊。方便你收摺鄰近的區塊,以便於將精力集中在正在進行之處。

3.7 多重游標選擇(Multiple Selections)
 多重游標選擇是用於你在檔案的多個不同位置,希望同時進行同樣的編輯,例如你希望在鄰近的好幾行內容中,增加相同的文字,或是將出現好多次的錯誤變數名稱同時更改其名稱。

有兩種方式建立多重游標選擇:

  • 長方形區塊選擇(Column/Rectangular selection):按住Alt鍵,然後垂直拖拉游標,會在這幾行都加入游標。按住Alt鍵,然後斜角拖拉游標,會選擇一個長方形區塊文字,也就是在這幾行都選擇一段文字。你也可以用Shift-Alt-Up向上鍵或Shift-Alt-Down向下鍵,向上或向下新增游標。
  • 不連續的多重選擇(Discontiguous selection):使用滑鼠選擇一段之後,再按住Ctrl鍵再用滑鼠選擇另外一段,這樣就可以同時有二段選擇。

多重選擇使用技巧:

  • 你也可以組合使用「建立多重游標選擇」技巧,例如在已有的多重選擇,再按住Ctrl-Alt然後拖拉游標就可以新增一個長方形的選擇。
  • 有了多重選擇之後,多數的游標移動命令和編輯效果,就會同時在各個游標位置和選擇區塊中生效。例如,你輸入一個字,這個字就會同時在各個游標位置上出現,或者取代各個選擇位置的文字。使用方向鍵時,就會同時移動所有的游標。
  • 有些命令,例如Code hints及Quick Edit,只會在最後一個選擇上發生作用。最後一個選擇也稱之為最主要的選擇(Primary selection)。
  • 當你在增加多重選擇時,你可以使用Ctrl-U鍵來復原(undo) ,也可以使用Ctrl-Shift-U鍵來取消復原(redo)。
  • 你可以按ESC鍵取消所有的多重選擇,只留下最主要的選擇(primary selection)。

3.8 快速定義搜尋(Quick Find Definition)
 在編輯一個檔案時,按Ctrl-T快速鍵,可以顯示大綱列表(Outline view),方便你在一個檔案中的不同位置之間快速移動。在JS檔會列出所有的函數名稱,在CSS/LESS/SCSS檔則會列出所有的Selector名稱。

3.9 字碼提示(Code Hints)
 當你正在輸入時會自動跳出字碼提示,有下列幾種提示 :

  • HTML :標籤名稱、屬性名稱、屬性值及字符參引用(Entities)
  • CSS, LESS, SCSS:屬性名稱(Property names)及屬性值
  • JS:變數名稱及函數名稱,也有函數參數提示:

3.10 JSLint
 lint是程式分析工具,用來標記可疑的、結構性錯誤及可能造成bug的段落。當你開啟或是儲存JS檔時,Brackets就會執行JSLint來檢查其中的語法格式是否正確,檢查的結果就會顯示在右下角的狀態欄中。假如檔案是ok的,就會顯示綠色標誌。JSLint對於格式的編排非常挑剔,也對許多小細節非常嚴格,你可以由功能選單中的「View > Lint Files on Save」來關閉這項功能。在擴充套件中有許多Lint工具可以取代JSLint來進行各種檢查。

四、擴充套件(Extension)
 除了Brackets內建的核心功能外,還有許多由社群開發者撰寫的擴充套件,可以用來增加各式的功能。你可以由選單「File > Extension Manager...」,或點選最右側的「擴充套件」(plugin block)圖示進入擴充套件管理功能,進行搜尋擴充套件或解除已安裝的擴充套件。

較為常用的擴充套件有:

  • Emmet - 方便你在工作流程中,使用縮寫方式快速產生完整的HTML及CSS碼,加快編輯速度。
  • Beautify - 將檔案中的JavaScript、HTML及CSS碼按照正確的縮排整齊排好。
  • File Icons  - 在Brackets介面中左側的樹狀檔案列表中,依照檔案類別加入小圖示。
  • Indent Guides - 在Code editor中顯示縮排的層次。在安裝後,點選「View -> Indent Guides」即可啟用。
  • Git - 在Brackets中整合Git代碼版本控制。

4.1 Emmet擴充套件
 Emmet是個很有名的擴充套件,除了支援Brackets之外,也支援Sublime Text、Atom、Eclipse、Notepad++及Dreamweaver等十多種編輯軟體。Emmet的許多特性中最為人們所津津樂道的功能是縮寫展開(Expand Abbreviation)功能,這是在編寫HTML碼時,先輸入依照Emmet縮寫語法格式的縮寫,再按Tab鍵來產生完整的HTML碼的便捷功能。Emmet縮寫語法格式(Emmet Abbreviations Syntax)是受到CSS選擇器(Selector)的啟發而設計出來的。

 例如你要撰寫下列的HTML網頁碼:

<div id="myblock">
 <ol class="mylist">
  <li><a href="#item1">選項1</a></li>
  <li><a href="#item2">選項2</a></li>
  <li><a href="#item3">選項3</a></li>
  <li><a href="#item4">選項4</a></li>
 </ol>
</div>

 你只要按照Emmet的語法輸入以下的縮寫碼,再按Tab鍵,就會展開產生了:
 
#myblock>ol.mylist>li*4>a[#item$]{選項$}

 這個縮寫碼中的ol、li及a等HTML標籤名稱會展開成完整的HTML標籤<ol>...</ol>等等,而.mylist及#myblock是class及id屬性的值會展開為class=”mylist”及id=”myblock”。HTML碼中的層次是以>來間隔表示,假如同樣標籤要重覆數次,要用*加上重覆次數的數字。中括號[]中的內容是屬性值,其中的$是在進行重覆時會被代入計數器的值,在大括號{}中是HTML標籤的內容值。

 你也可以在空白的HTML文件中,輸入!或是html:5再按Tab鍵,就可以產生下列的網頁碼:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

HTML碼縮寫的大略規則是:

  • E為標籤名稱,例如h1縮寫會展開為<h1></h1>
  • E.class代表類別屬性,例如h2.myhead縮寫會展開為<h2 class="myhead"></h2>。省略E時,內定為<div>,例如.myblock縮寫會展開為<div class="myblock"></div>。
  • E#id代表id屬性,例如h3#myhead3縮寫會展開為<h3 id="myhead3"></h3>。
  • E[attr=foo]代表某一特定屬性,例如td[colspan=3]縮寫會展開為<td colspan="3"></td>。
  • E{foo}代表標籤包含foo内容,例如a{Click me}縮寫會展開為<a href="">Click me</a>。
  • E>N代表N是E的子元素,例如div>p縮寫會展開為<div><p></p></div>。
  • E+N代表N是E的同層級元素,例如div+p+bq縮寫會展開為
    <div></div>
    <p></p>
    <blockquote></blockquote>
  • E^N 代表N是E的上级元素,例如div>p>span^bq縮寫會展開為
    <div>
        <p><span></span></p>
        <blockquote></blockquote>
    </div>

 另外Emmet在編寫CSS時也提供了縮寫展開的功能,供撰寫屬性名稱及其值,例如:

  • w100縮寫會展開為width: 100px;
    w是width的縮寫,接著的數字是屬性值,內定的屬性值單位是px。
  • 屬性的單位也有縮寫,例如p表示%、e表示em、x表示ex,所以w100p縮寫會展開為width: 100%;
  • 因為Emmet格式不允許有空白,必須使用-(減號)代替,所以margin的屬性值中有空白時就需要使用這樣的替代。例如m10-20縮寫會展開為
    margin: 10px 20px;
  • 但假如屬性值帶有單位就不需用替代,直接連續撰寫就可以了。例如m5e7e縮寫會展開為margin: 5em 7em;
  • 顏色值也可以使用,例如c#8縮寫會展開為color: #888;
  • 顏色值的規則為
    c#2 → color: #222;
    c#a0 → color: #a0a0a0;
    c#e8 → color: #e8e8e8;
  • 也可以組合為bd3#8s縮寫會展開為border: 3px #888 solid;

五、從頭道來
 市面上已經有許多的程式碼編輯器(Code Editor)可供選擇,有的需要付費,例如Sublime Text,也有許多免費或是開放原始碼的,例如Notepad++、Atom,或者是早期的Vim及Emacs都是屬於這一類。以往大多是用於編輯純文字格式的檔案,例如一般文字檔、Shell script、Batch file以及各種程式語言的程式碼原始檔,一直到近年來用於開發網路相關服務系統的HTML、CSS、Javascript、XML及JSON檔等等。

 相較於用於開發程式的整合開發環境IDE,例如Eclipse、Visual Studio及Android Studio,程式碼編輯器講求的是輕盈小巧、版面簡潔、反應敏捷,再加上可以客製化及擴充功能的機制,例如可以安裝外掛或擴充套件,就足夠使用了,這樣可以避免需要使用高規格的電腦才能進行工作。有的時候只是要簡單的改個程式,或是寫個小程式,就很適合使用程式碼編輯器了。

 Brackets在設計時,為了使這個開源的編輯器有多種可能性,例如不是個獨立的應用程式(Desktop Application),而是移植到一般瀏覽器的環境下執行,或是移植到平板電腦上成為開發環境,所以沒有Adobe公司產品中常見的浮動工具視窗,也沒有其他編輯器多檔案編輯的分頁功能。另外Brackets在進行編輯時,為了避免使用者在不同檔案切換,而採用inline的方式編輯相關的CSS,甚至編輯跨不同檔案中的CSS,這是個相當創新的理念。

 Brackets是由Brackets shell加上編輯器主程式所構成的,Brackets shell是建構在CEF(Chromium Embedded Framework)中,提供內嵌式(Embeded)瀏覽器環境及應用系統叫用核心功能API的介面。CEF是由Google開源瀏覽器計畫The Chromium Projects所分支出來,供第三方軟體開發者開發瀏覽器應用系統使用。在安裝好Brackets之後,可以發現Brackets shell loader程式C:\Program Files (x86)\Brackets\Brackets.exe檔案大小只有568KB,相當的小巧,執行後會載入www\index.html的主程式。編輯器是使用Web技術的HTML、CSS及Javascript所撰寫,再加Node.js及CodeMirror編輯器所整合而成。

六、結語
 Brackets編輯器在2011年由Adobe公司主導的開源計畫,在社群參與開發的環境下成長,在2014年發行了穩定的版本,是否能與同樣在這條道路上的Sublime text與GitHub公司主導的Atom編輯器競爭呢?Atom編輯器也是開源計畫,Shell的部份使用Electron作為內嵌瀏覽器,主程式也是使用HTML、CSS、JS及Node.js撰寫,發行的時間也與Brackets接近,兩者都是由著名的公司起頭,形成一個很有趣的現象。

 另外在2015年出現一個更新的競爭對手是微軟公司推出的Visual Studio Code也提供相似度非常高的功能,是個不容小覷的編輯器。Brackets編輯器的身影及其設計理念也出現在Adobe公司的產品中,例如Adobe Edge Code及Dreamweaver。在眾多的編輯器中,Brackets也有一群使用者跟隨著,相較於複雜的IDE軟體,它的學習曲線應該是令人覺得比較沒有負擔的。Brackets的主程式是由Javascript所撰寫的,在啟動時較為耗時,需要稍為等待一下。你是否要改用 Brackets 編輯器,就要取決於你內心的追求了,但不妨一試 !

七、參考資料

  1. Brackets主網站 - http://brackets.io/
  2. How to Use Brackets - https://github.com/adobe/brackets/wiki/How-to-Use-Brackets
  3. Working with Multiple Selections -
  4. https://github.com/adobe/brackets/wiki/Working-with-Multiple-Selections
  5. Emmet Abbreviations Syntax - http://docs.emmet.io/abbreviations/syntax/
  6. Adobe Open Source Spotlight: Brackets - https://www.adobe.io/cloud-platform/open-source/brackets
  7. Chromium Embedded Framework (CEF) - https://bitbucket.org/chromiumembedded/cef
  8. CodeMirror - https://codemirror.net/
  9. Brackets blog - http://blog.brackets.io/
Top

  創刊日期:74年10月15日
  發行人 :王大為
    
  總編輯 :江世民
  編輯小組:葛行慧
    
  網站技術:網頁技術及出版組
  出版日期:民國106年3月2日
    
  服務專線:(02)2789-9866
  E-mail:publish@gate.sinica.edu.tw


訂閱與取消訂閱 | 各期通訊 | 中研院資訊服務處 | 中央研究院

本電子報所有文字、圖片版權為中央研究院所有,未經許可請勿轉載。
如對本報有任何意見,請
與我們聯繫。
   
 
 本電子報所有文字、圖片版權為中央研究院所有 。 電子報出版系統由中央研究院資訊服務處開發。