線上工具 - 開發工具

「程式設計」已被明訂在十二年國教課綱的科技領域內，成為必修課程，其學習內容分為「演算法」、「程式設計」、「系統平台」、「資料表示、處理及分析」、「資訊科技應用」以及「資訊科技與人類社會」等六大面向，而在程式設計這塊，光是程式語言就有相當多種，但屹立不搖的大概就只有 C、C++、JAVA，網頁用的 PHP、JavaScript 等這幾種，但一法通、萬法通，不論程式語言出多少種，只要扎扎實實學好一種，其他的大概也能通個5、6成，剩下的就是各個語言上的限制了，想要學程式設計，看別人的程式碼相當有用，如果能自己實作更能融會貫通，emnu 是個免費的線上 C++ 編譯器，非常適合初學者及需要有步驟值的程式碼來這裡執行，例如寫了個迴圈，想要看迴圈內各變數的變化，emnu 就能幫你輕鬆實現，免去逐步 trace 過程。

初學網頁編輯，除了功能外、美工外，還有排版用到的 CSS，樣樣都不是省心的事情，如果可以靠一些輔助工具來協助，絕對可以事半功倍，Type Anything 是一個可以用視覺化的方式來調整 H1、H2、H3 及 paragraph 等 HTML 元素的 Font family、Font Size、Font weight、Line height、Opacity、Margin top、Margin bottom、Letter spacing、Word spacing 及 Capitalization 等屬性的免費網站服務，每次的調整都會即時反映到樣板文字上，讓使用者檢視，完成調整後，就可以產生 CSS 排版語法，讓使用者複製到要應用的網頁，相當方便。

寫好的 HTML 及 CSS 通常必須存檔，然後由瀏覽器去執行，這一來一回的動作可能要經過無數次，相當浪費時間，HTML.cafe 是個線上 HTML 編輯器，所敲進去的 HTML 及 CSS 語法，會即時反應在呈現欄中，免去存檔後，再到瀏覽器執行的過程，這對初學者或是需要測試 HTML 語法或是 CSS 排版效果絕對是個好幫手。

適當的替作品加入背景，可增加作品的整體的滿意度，如果是網頁，以往因 CSS 語法在各家瀏覽器支援程度不一的情況下，多數會使用圖片來製作，不但前期製作麻煩，後續要維護也不容易，而如今瀏覽器與 CSS 標準逐漸統一，使用純 CSS 語法來製作背景圖對後續要更新維護也相對簡單，CSS Background Patterns 這個免費的線上服務，利用 CSS 語法做出多種樣式的背景圖案提供大家使用，使用者在該網站，可以更改背景圖案的前景色、背景色、透明度及圖案的濃密度，且每次更改會在該網頁的背景即時展示，讓使用者即時預覽，滿意就可以將該背景圖的 CSS 一鍵複製，方便使用者後續應用。

要開發系統或網站，通常都會依照所需流程及功能來構思整個系統架構，如果可以先將系統的操作介面以雛形的方式呈現出來，相形之下就可以對客戶進行良好的溝通，開發人員也不怕所開發的系統會與客戶所描述的落差太大，製作雛形如果需要用到圖片，通常就是隨便找張圖片裁剪成所需的尺寸先放上去，如果要更改就重複做同樣的事情，Dynamic Dummy Image Generator 這個網站可以透過網址的參數來動態調整圖片的寬、高尺寸、背景顏色及文字顏色，圖片格式支援 PNG、GIF 與 JPG，方便雛形的隨時調整與修改，加快與客戶溝通的速度。

漸層色較單一顏色來的有層次感，也深受美工人員的愛用，要用 CSS 做出漸層色，不難，但難在顏色如何搭配，這讓人很傷腦筋的，WebGradients 這個網站提供 180個已經配好色的漸層色彩，並提供 CSS3 語法與 PNG 圖檔，不論是個人或商業均可免費取用。

漸層色彩在視覺上可以產生層次感，這對常看單一顏色的人來說，會更加有吸引力，以往要做出漸層色，設計師都會傾向於使用圖片，原因在於各家瀏覽器對 CSS 所支援的程度不相同，造成觀感不佳的問題，而如今瀏覽器對 CSS 3 基本上都支援的情況下，要達成純 CSS 語法就做出漸層色也變得相對簡單。Color gradient generator 這個免費網站提供 light、deep、rainbow 及 intense 四種漸層樣式、漸層方向、漸層大小等可視化工具讓讓用戶自行調整，完成後，就可產生 CSS 語法。

做了響應式網頁，該如何能夠看出其在不同螢幕尺寸下應有的效果呢？everysize 是個可以讓用戶選擇像是 iPhone、iPad、Google Pixel 等裝置的尺寸或是手動調整螢幕尺寸來呈現網頁的免費網站，不同以往看到的類似網站，該網站在呈現網頁後，用戶是可以直接操作非靜態的。

階層樣式表 (Cascading Stylesheets，CSS) ，最主要的功能就是讓 HTML 網頁上的元素套用不同的樣式，讓同一個元素可以有不同的樣貌呈現，不過對於初學者而言，要了解整個 CSS 語法規則並不容易，除了時間之外，如果有輔助的工具可以協助，相信可以更快的跨過門檻，CSS Grab n' Go Editor 是個可視化的 CSS 語法編輯器，其主要鎖定 border、box-shadow、text、filter、transform 常用屬性進行變化，用戶可以透過可操作的面板進行屬性值變更，且立刻可看到所產生的變化，完成整個調整，還可以快速產生 CSS、SASS、SCSS 及 LESS 相關語法，快速套用到元素上。

「Google 搜尋引擎最佳化初學者指南」這份是由 Google 所撰寫的 SEO 教材，將 SEO 分成 14大主題，來教你如何做好搜尋引擎最佳化，內容相當不錯，非常適合有經營網站的站長們來閱讀研究，而且這份文件還翻譯成 40國語言，有需要的朋友可以下載下來研究看看。

需求分析是系統開發成敗的關鍵，系統分析師與客戶溝通時，如果可以拿出接近客戶心目中的實際系統操作雛形，相信會比用文字描述來的容易溝通，如果要將溝通時產生的手繪草稿圖利用 HTML 程式碼來呈現，讓客戶可以模擬操作，藉此確定系統規格，這對日後的系統驗收也有一定的幫助，Sketch2Code 是由 Microsoft 的 Azure 雲平台和Azure Cloud AI Web 服務支援，結合人工智慧、OCR 等各項技術，將任何的手繪設計稿件轉成 HTML，方便夥伴協同與客戶溝通。

CSS 版本進展到 CSS3.0，讓以往需要靠圖片來輔助才做得到的效果，變得只需用 CSS 即可，例如邊框特效、色彩展示、圖形變化、動畫、轉換特效、文字色彩、文字陰影、區塊陰影、文字旋轉...等，不過標準有了，語法的學習上卻變成是個門檻，還好，線上有很多關於 CSS 產生器，像是按鈕、陰影、圓角...等，如果對 CSS 語法陌生，又想產生圓角邊框，可以來試試 border radius 這個線上的 CSS 圓角框產生器，簡單方便。