線上工具 - 開發工具

寫網頁時，當需要應用一些特效，例如標題文字會閃動、旋轉等，以吸引讀者的注意，很多人都會考慮使用 JavaScript 來實現，如果要透過 CSS 來呈現，對 CSS 語法不熟悉，則變成是一個困擾，即便寫出，還要考慮各大瀏覽器的支援程度。angryTools 網站提供 CSS Animation Kit 產生的文字特效，支援 Edge、Chrome 主要瀏覽器，選好效果可立即檢視與產生 CSS 語法，複製即可使用，簡單方便。

對網站經營與開發者來說，要做好一個網站並不容易，撇開完成開發後要經營的層面來說，光是要讓網頁能夠完美的呈現在電腦、平板、手機各種不同裝置的螢幕尺寸上就是一個不小的課題，再加上各家瀏覽器對 HTML、CSS、JavaScript 等版本技術支援程度各有不同，讓網頁加載的速度也會有差別。網路上有不少網站品質與 SEO的檢測工具，各有各的著眼點，但應該沒人會否認現在網站做得好不好，還是會以 Google 說了算，現在 Google 推 TestMySite 網頁品質測試工具，從友善程度到移動設備的呈現全面幫你的網站總體檢，只要輸入網站網址，除了幫你打分數，還告訴你該如何改進。

隨著可上網瀏覽網頁的設備越來越多元化，如果網站設計還僅侷限在以電腦瀏覽器為主時，將難以提供使用者良好的體驗。因此當網頁設計好，要如何觀看在不同設備間且多種螢幕尺寸下所呈現的方式呢？其實，不需要真的去購買這麼多的設備一一來測試，透過 Google 所推出的 Resizer 網站，只要輸入網址，便可以觀察自己的網頁在不同螢幕尺寸下所呈現的樣子，藉以調整，事半功倍。

在系統分析階段，常需要與客戶溝通系統需求，但因為沒有系統介面，多數的時候，都是靠描述想像然後用文字加以記錄，等到文件交到程式設計師手上，程式設計師對說明文字還有可能做出不同的理解，造成落差。因此，在系統分析的諸多方法中，有一個方法為雛型法，其透過工具快速地建立介面原型，利用界面原型來與客戶進行功能溝通，如此，客戶可以不需要憑空想像將來的系統操作方法，對所要的輸入、輸出資料，也能在系統分析初期快速地確定，加快系統建構與導入的時程。quickMockup 內建視窗與網頁程式設計常用的元件，使用拖拉的方式便可建立，並設計備註，以期系統分析階段能與客戶縮小彼此間的認知，進入程式設計階段，也能按圖施工，做出更符合客戶需求的系統。

對學習 CSS 來說，不論是初學或是要進階，有可以參考的語法是相當重要的，畢竟各家瀏覽器支援的 CSS 語法不見得相同，CSS Portal 是一個提供網頁常用到的 CSS 的語法產生器，包含 CSS Box Shadow、CSS Button、CSS Gradient、CSS Flip Switch、CSS Menu、CSS3 Menu、CSS RGBA、CSS Ribbon、CSS3 Rounded Corners、CSS Sprite 、CSS Text Rotate、CSS Text Shadow 、CSS Tooltip 、Layout 、Style Input Range 讓你在製作網頁時，可以即時預覽樣式與語法。

在網頁要呈現照片的特殊效果，難免都要用到圖片編輯軟體中的濾鏡功能，不過現在透過 CSS 也能達到濾鏡的功能，filter.css 這個網站提供一組 CSS 語法並搭配說明，讓 div 區塊中的圖片就能立即套用濾鏡，呈現不同的風格特效。

製作網頁如果預期會有較長時間的等待，通常會在等待的時間加入一個 loading 的動畫圖示來告知，避免用戶誤以為網頁沒有反應而離開，想要加入一個等待載入的動態圖示，可以來試試 loading.io 網站所提供可自訂圖示動態速度與顏色的動畫圖示產生器，不但可產生 GIF 檔外，還可產生出 CSS 或 SVG 檔，還提供範例語法，讓你輕易地運用到網頁裡。

以前想要讓網頁有動畫效果，多數要靠 JaveScript、GIF 或是 Flash，而現在則可以透過 CSS 3，不過想要透過 CSS 3 語法來做動態特效，其學習門檻著實不低。但若只想在網頁放一些較為簡單的特效，可以來參考 CSS3 Animation 這個網站所提供的 CSS 3 動畫語法免費範本，下載後，只要經過簡單的語法加工，就能套用範本，讓自己的網頁輕鬆動起來。

網站開發免不了都要使用到 JavaScript、CSS、SWF、images 等專屬前端網頁的開發應用，例如 JQuery 程式庫，若自己的網站流量夠大，當然可以將其下載到自己網站上來應用，若想節省自身網站的流量，也可以在網頁裡直接引用有提供 CDN 的網站上的程式庫，像是 Google CDN 或是 Microsoft runs their own CDN，若在前述兩個網站上找不到要應用的資源，可以到 CDNJS 網站上找找看，其穩定性與效能也還算不錯喔。

網站的製作不論是初學程式或已經是高手，可能都會覺得寫 Code 來實現功能會比對網站整體顏色該如何配置來的簡單許多，因為，如何用色才能得滿分，始終是沒有標準答案的，只能說用傳統常見的顏色呢就是中規中矩，若用色大膽，有人欣賞就是創新，沒人欣賞就便垃圾了。當然，我們也可以到 BrandColors 這個網站來參考與了解知名網站是如何進行顏色搭配的，若覺得喜歡，也可下載該網站的用色 CSS 檔案，方便後續的應用。

不論是為考試、興趣或工作，當有寫程式的需求時，對較熱門的程式語言，像是 C、Java、C#、PHP......等，想要弄出個可編譯環境，估計還有辦法，但若是較冷門的像 Ada、Cobol、Smalltalk、Lisp......等，想要做出個編譯環境，估計就要花很多時間了。不過現在你可以不需要這麼麻煩了，到 Ideone 這個支援 60多種程式語言的線上編譯網站，將時間專注在語言語法的練習上，免去建置編譯環境的時間。

PHP 是很多人開發網頁應用程式的首選，如果你也想自學或更進階，可以來參考 The Right Way 這個線上 PHP 免費電子書，其以 PHP 最新穩定版本來介紹，讓新手學習時，從開發環境的建立到開發中有可能遇到的狀況與最後程式布署鉅細靡遺，可免遭網路上過時資訊而事倍功半。