樹莓派架設 RTMP 串流（Streaming）伺服器，傳送即時攝影機影像

這裡介紹使用樹莓派安裝 nginx 架設 RTMP 串流伺服器，傳送即時的攝影機影像。

樹莓派加上一個網路攝影機（webcam）之後，就可以用來打造一個即時的 live 影像串流伺服器，作為簡單的監控設備，讓您透過電腦或是手機看到即時的攝影機畫面。

在本篇教學中所使用的設備與規格為：

1. 樹莓派 Raspberry Pi B+ 開發板
2. 羅技 C170 視訊攝影機

以下是架設 RTMP 串流（Streaming）伺服器的安裝過程。

Google 洋灑新願電子春聯，分享自己創作的春聯給好友

Google 今年特別為了中國農曆新年設計了一項自己創作電子春聯的線上服務，讓大家不用拿毛筆也可以寫春聯送給朋友。

Google 今年在中國農曆春節期推出的「洋灑新願」電子春聯服務，使用者可以自電腦上透過滑鼠來寫毛筆字，他會依據滑鼠的移動速度來決定筆畫的深淺與粗細。

將圖片壓縮與最佳化的免費工具整理，讓圖檔變得更小又不影響品質

網路上有許多免費的圖片壓縮與最佳化工具，善用這些工具可以讓網頁圖片壓縮得非常小，而且在視覺上幾乎不會有什麼影響。

現在的網路速度發展相當迅速，不過網頁的大小依舊跟使用者的瀏覽體驗息息相關，網頁的大小越小、載入的速度就越快，給使用者的感受也就會越好。

而通常在網頁中最佔空間的就是圖片，如果能夠將圖片經過適當壓縮，通常對於整個網頁的大小都會有顯著的改善。但我們都知道一般的圖片壓得越小、失真的狀況就會越嚴重，如何在圖片品質與大小之間取得平衡就是一件很難抉擇的事情。

網路上有許多免費的工具可以幫我們自動處理這樣的問題，這些工具都有自己獨特的壓縮方式，可以使用有損壓縮（lossy compression）的方式，將圖片大幅壓縮，而且幾乎不會影響圖片的品質，至少用肉眼看起來是沒什麼差別的。

Dimensions：測量距離的 Chrome 瀏覽器外掛工具

Dimensions 是一個適用於 Chrome 瀏覽器的距離測量外掛工具，可以快速測量螢幕上任何元素之間的距離，操作介面既簡潔又方便。

在設計網頁時，時常會需要測量網頁中各種元素之間的距離，如果您慣用 Google Chrome 瀏覽器的話，可以嘗試一下 Dimensions 這個小工具，它可以讓您快速量測瀏覽器上任何元素之間的距離，既簡單又實用。

Quill：輕巧的 Rich Text 編輯器，在網頁中進行各種圖文排版

Quill 是一個以 JavaScript 開發的獨立 rich text 編輯器，可以在網頁中進行各種圖文排版，不需要依賴其他的 JavaScript 函式庫。

TinyMCE 是一個很熱門的 rich text 編輯器，它有非常多的功能，許多 Word 常用的功能它都有，不過許多使用者都抱怨它的檔案大小太大了，會讓網頁載入的速度變慢。

griddle.it：幫助網頁設計與排版的小工具

griddle.it 是一個可以幫助網頁排版的小工具，讓您在設計版面時可以比較方便的對齊各個網頁元素。

在設計網頁的排版時，通常都會需要控制版面的寬度，並且讓不同元素保持對齊，而 griddle.it 就是一個很簡單的輔助小工具，他可以動態產生一個參考用的背景圖，圖上面會標明各種不同的像素寬度，讓您在設計網頁時，可以更方便掌握不同網頁元素的位置。

使用 CSS 的 ::before 自訂 HTML Ordered Lists 的編號樣式

這裡介紹如何使用 CSS 的 ::before selector 自訂 HTML ordered lists（ol）的編號樣式。

一般 HTML 的 ordered lists（ol）呈現的效果是這樣：

1. 這是第一個項目
2. 這是第二個項目
3. 這是第三個項目
4. 這是第四個項目
5. 這是第五個項目

我們這裡介紹如何使用 CSS 自訂每一個項目的編號：

1. 這是第一個項目
2. 這是第二個項目
3. 這是第三個項目
4. 這是第四個項目
5. 這是第五個項目

各種範例圖片產生器，網頁版面設計的好工具

這裡介紹各種範例圖片產生器，可以讓網頁設計師在設計版面時，快速產生任意大小的範例圖片。

當我們在設計網頁版面時，常常會因為調整版面而需要不同大小的圖檔來測試整體的視覺效果，在整個設計過程中，通常會不斷地反覆變動版面與圖片大小，如果每次測試都要針對不同的大小來切圖，是一件很費工的事情，以下我們介紹一些好用的工具，可以幫助我們克服這樣的問題。

Whiteboard Fox：免費的線上白板，即時同步分享手繪圖表

Whiteboard Fox 是一個線上白板，可以讓您在上面直接畫圖，即時跟任何人分享，而且對方也可以及時修改您所繪製的圖形。

現在網際網路非常發達，大多數人都會使用 LINE 或 Skype 等聊天軟體來溝通，既方便又經濟，不過這類的軟體大概都只能使用語音或是視訊等方式來溝通，如果要討論一些比較複雜的計劃或架構圖時，只用打字或是直接用講可能會不太清楚，如果有個白板可以把整個討論內容畫下來，就很方便了。

Timesheet.js：在網頁上繪製甘特圖（Gantt Plot）的 JavaScript 工具

這裡介紹一個可以在網頁上繪製甘特圖（Gantt Plot）的 JavaScript 工具，畫面簡潔，使用上也很簡單。

甘特圖是一種用來顯示專案進度或是其他時間相關資訊的條狀圖，一般的專案管理軟體（例如 Microsoft Project 或 Mr. Project）也都可以繪製這樣的圖形。

Timesheet.js 是一個開放原始碼的 JavaScript 小工具，它可以讓您直接在網頁中製作甘特圖，而且不需要 jQuery 或是其他的工具，畫面看起來簡潔又清爽，重點是使用起來很簡單，以下介紹如何使用它來繪製自己需要的甘特圖。

Broken Link Checker：網頁無效超連結線上檢查工具

Broken Link Checker 是一個無效超連結的線上檢查工具，可以自動找出網站上有問題的超連結。

Image Credit: About.com

一般的網頁或是部落格文章，經過一段時間的後很容易出現一些無效的超連結，最常發生的就是連結的網頁或圖片搬家了，或是整個網站都關閉了，造成使用者點下去就會出現 404 的錯誤訊息或是根本找不到網站。

製作 Wireframe 設計圖的免費工具整理

這裡整理了許多繪製 wireframe 與 diagram 設計圖的免費工具與資源，包含線上畫圖的工具與各種設計用的素材。

ZenMate：避免瀏覽的網頁被監控的 Chrome 瀏覽器翻牆外掛（Plugin）

ZenMate 是一個可以加強上網安全性的 Google Chrome plugin，可以保護自己所瀏覽的網頁不被本地端的 ISP、駭客或政府單位所監控，亦可達到「翻牆」的功能。

現在的網際網路非常發達，幾乎每個人都會上網，但是一般人通常在上網時，不會去注意資訊安全的問題，其實當你在瀏覽網頁時，網管、ISP 或是駭客都有機會可以竊取到你所有看過的網頁內容，簡單說就是你的螢幕上可以看到的東西，他們都可以看到，而你螢幕上看不到的（例如未加密的密碼等），他們也可以看到。

Zed : 以 Google Chrome 為基礎的開放原始碼編輯器

Zed 是一個以 Google Chrome 為基礎的一個開放原始碼編輯器，可以直接開啟本機或是遠端的程式碼檔案進行編輯。

Zed 這個編輯器跟 Atom 類似，都是使用單純的網頁技術（HTML5、CSS 與 JavaScript）所打造的，雖然使用的技術單純，但是他的功能卻很強大：

• 語法突顯（syntax highlighting）：支援各種程式語言，包含：C、Clojure、CoffeeScript、C#、CSS、Dart、Erlang、Go、Haml、Haskell、HTML、ini files、Java、JavaScript、JSON、LogiQL、Lua、Markdown、Nix、PHP、Plist、Protobufs、Python、Ruby、Shell、XML。
• 程式碼自動補齊（code completion）：可自動補齊程式碼的關鍵字或是自訂的程式碼片段。
• 自動檢查程式碼（linting）：對於某些特定語言，可以自動檢查程式碼是否有錯誤，支援的程式語言有：JavaScript、CoffeeScript、JSON、Lua、CSS。
• 多重視窗（split-view）編輯：可以將編輯器分割成多個子視窗來同時編輯不同的檔案。
• 佈景主題（themes）：可選擇 light 或 dark 主題，而使用者也可以使用 CSS 自訂佈景主題。

網頁應用程式架構（Web Application Architectures）的發展趨勢

這裡簡單介紹過去網頁應用程式所使用的技術與架構，以及未來發展的趨勢。

網頁技術一直以來都不斷地在演進，從一開始的靜態 HTML 演變為動態的各種技術（如 PHP、ASP、Java 與 Ruby on Rails 等），不管是在網頁本身或是開發工具上都有很多革命性的突破與進步，而在最近一兩年中，在網頁技術上又出現了新的一波新的風潮，改變了整個網頁應用程式的設計型態。

這一項新的技術主流不像以前的 RIA 或 AJAX 有特定明確的名稱，目前只能稱作為 MV* client-side 架構，這樣的架構主要的特色在於伺服器不再像以往那樣在伺服器端產生完整的 HTML 網頁，而是將原始的資料直接傳送至 client 端，由瀏覽器負責處理所有網頁的產生、使用者的互動等各項工作。

TodoMVC：選擇 MVC 網頁開發架構（Framework）的好工具

TodoMVC 是一個協助網頁應用程式開發者挑選 MVC 架構工具，透過範例程式讓你可以很快的比較各種架構之間實質上的差異所在。

拜網路雲端化的趨勢所賜，全世界有非常多的開發者陸續發展出非常多適用於網頁應用程式的 MVC 架構（framework），其中更有許多優質的開放原始碼架構，無論是功能性與穩定性都非常好，網頁開發者可以利用這些豐富又免費的資源開發各種應用程式，省去自己設計架構的精力與時間。

Bugzilla 安裝步驟教學（Ubuntu Linux）

這裡介紹如何在 Ubuntu Linux 中安裝 Bugzilla 這個 bug 追蹤與管理系統。

Bugzilla 是一套由 Mozilla 所開發的軟體缺陷追蹤的網路應用程式，它可以幫助軟體開發團隊搜集 bugs 的回報資料，並且提供一個整合性的追蹤與管理系統。

以下介紹在 Ubuntu Linux 中如何安裝 Bugzilla，安裝方式有兩種，一種是使用 apt 的方式，另外一種是手動安裝。

DevDocs.io：網頁應用程式開發專用的技術文件查閱工具

DevDocs.io 整合了一般網頁應用程式開發過程中常會用到的各種官方技術文件，可以讓網頁應用程式開發者快速查閱，加速開發流程。

現今的網頁技術琳琅滿目，一般的網頁應用程式都會需要結合各種技術，而程式開發者在開發時就會常常需要查詢各種技術的相關文件，最常見的就是要查詢某個函數的語法或參數如何使用，以及找尋簡單的範例讓自己可以很快的用在自己的程式中，但是一般這種情況如果使用 Google 這樣的搜尋引擎的話，要在搜尋結果中找到自己要的網頁或文件，通常都會浪費很多時間。

各種產生圓形圖表的 JavaScript 工具

這裡介紹一些可以在網頁上產生圓形圖表的 JavaScript 工具，透過這樣的設計可以讓網頁在呈現數值資料時更生動活潑。

circliful

circliful 是一個以 HTML5 canvas 與 jQuery 為基礎的 JavaScript 工具，可以在不需要使用圖檔的情況下，產生圓形圖表。

HINT.css：以 CSS3 與 HTML5 實作的提示訊息方塊（Tooltip）工具

HINT.css 是一個使用 CSS3 與 HTML5 實作的 tooltip 函式庫，可以在網頁中呈現漂亮的提示訊息方塊。

一般在網頁中若要顯示提示訊息，可以使用 title 這個 HTML 屬性，像上面這張圖將 title 設定為 "HTML.css Logo"，所以當你將滑鼠移到圖片上面時，停留一段時間他就會顯示這行提示訊息。