CSS 網頁字型 @font-face 使用教學與範例

這裡介紹 CSS 的 @font-face 使用方式與範例,讓網頁設計者可以在網頁的字型使用上更有彈性。


@font-face 這個 CSS 的 at-rule 可以讓網頁設計者可以使用網路上的字型檔來顯示網頁中的文字,甚至還可以讓設計者使用自己所提供的字型檔,讓網頁的設計更具有彈性,在選擇字型時就可以不需要考慮一般的電腦是否有安裝,凡是放在網路上的任何字型檔都可以使用。而 @font-face 除了在 CSS 的頂層設定上使用之外,在任何 CSS 條件群組(conditional-group)at-rule 中也可以使用。

Bigfoot.js:以對話方塊顯示網頁文章註解的 jQuery Plugin

Bigfoot.js 是一個可以使用對話方塊顯示網頁文章註解的 jQuery Plugin,讓讀者在閱讀時不用捲動網頁即可即時閱讀註解。


一般在網頁或是部落格中撰寫文章時,有時後會遇到需要加入註解(註腳)的情況,而讀者在閱讀含有註解的文章時,通常會需要使用捲軸(或是以超連結的方式)往下捲動網頁到下方的註解處來閱讀,閱讀完註解再回到本文繼續閱讀。

Google AdSense 廣告 A/B 測試程式碼產生工具 1.0.1 beta 版

這裡針對 Google AdSense 廣告,提供一個可以產生 A/B 測試程式碼的線上工具,讓你在加入 AdSense 廣告時可以更省事,不用老是在改 JavaScript 程式碼。


A/B 測試(A/B Testing)是一般網站最佳化常用的方式,而 Google AdSense 本身也可以讓你修改它的 JavaScript 以進行 A/B 測試,雖然 AdSense 提供這樣的功能很有用,但如果你有好多廣告要測試,老是要修改程式碼也是挺麻煩的。

Conky:Linux 桌面上簡潔又漂亮的系統監控軟體

Conky 是一個適用於 Linux 桌面的系統監控軟體,有非常簡潔且漂亮的介面,可以讓你的 Linux 桌面看起來就好像動態的儀板表一樣。

Conky Colors

在 Linux 系統中有許多的系統監控工具,這類的工具可以讓你知道目前 CPU 與記憶體的使用率、網路上傳與下載的即時流量、硬碟的使用量等各式各樣的資訊,如果你時常需要觀察這類的數值,那麼老是要開啟這類的監控軟體會是一件很麻煩的事,而在系統狀態列上的監控小工具雖然可以隨時讓你看到最新的資訊,但是這樣的小工具又礙於版面限制,能夠顯示的資訊也很有限。

網路的延遲(Latency)與頻寬(Bandwidth)是什麼?

這裡介紹網路的延遲(Latency)與頻寬(Bandwidth)是什麼,以及它們對於我們的網路有什麼影響。

在過去幾年中,網路效能最佳化(web performance optimization,簡稱 WPO)這個產業快速成長,這個現象也顯示了網路速度對於使用者而言也越來越重要,如果一個網站可以提供比較快速的網路服務,除了改善使用者經驗之外,連同網站的流量與其附帶的效益也都會跟著增加。


網站速度對於使用者(顧客)的影響應該是顯而易見的,一個網站要讓使用者感覺很好,除了網頁設計與美工之外,瀏覽網頁的流暢度也很重要,如果使用者在瀏覽一家公司的網站時,看網頁老是要等很久,即便網站做得很漂亮,我想大概也不會給使用者什麼好映像,反之如果網站反應速度很快,就比較不會產生這樣的問題。

Pixlr 線上繪圖軟體:有完整的圖片編輯與特效製作等功能

Pixlr 是一個線上的繪圖軟體,讓你可以在網頁上直接進行圖片的編輯與特效的製作,而且功能非常齊全。

Pixlr:線上繪圖軟體

近年來由於 Google 不斷的將各種軟體推向網路雲端化,像 Picasa 這類的相簿也都有提供簡單的修圖功能,但是如果要進行比較專業一點的圖片編輯動作,還是免不了要使用 Photoshop 或 Gimp 這類的專業軟體幫忙。

Pixlr 是一個功能非常強大的線上繪圖軟體,簡直可以說是 Gimp 的網頁版,現在如果是一般性的圖片編輯或是特效製作,大概都可以直接使用這個工具來處理,不需要再安裝 Photoshop 或 Gimp 這類的軟體了。

Showterm:可將 Linux 終端機操作錄製下來並分享在網路上的工具

這裡介紹 Showterm 這個可將 Linux 終端機操作錄製下來並分享在網路上的工具,讓你可以很容易把命令列的操作過程與別人分享。


如果若要錄製 Linux 桌面的操作過程,網路上你可以搜尋到非常多的工具,但是如果是想要記錄終端機(terminal)中命令列的操作,這樣的工具就比較少了。

浮動的網頁表單欄位名稱(Floating Form Label)製作教學

這裡介紹製作浮動的網頁表單欄位名稱(Floating Form Label)的幾種方式,讓網頁上的表單看起來更美觀。


傳統網頁上的表單都是以靜態的方式呈現,而現在隨著網頁技術的發展與新的設計概念不斷演進,現在你可以使用一些工具讓網頁的表單看起來更漂亮,更具有設計感。

Chrome 與 Firefox 瀏覽器的翻譯外掛工具,讓看英文網頁與查單字更方便

這裡介紹如何在 Google Chrome 與 Firefox 兩種瀏覽器中使用翻譯外掛工具,讓看英文網頁或查單字更方便。


如果你有在瀏覽英文網站的習慣,那麼你應該就會需要一些類似 Dr.eye 這類的翻譯軟體,在開放原始碼的軟體中,最常用見的就是 StarDict 這個翻譯軟體,而除了這些需要安裝在自己電腦的軟體之外,你也可以使用瀏覽器的外掛程式,不但免費而且使用起來更方便。

HTML5 Please:提供各種 HTML5 與 CSS 語法在瀏覽器相容性問題上的使用建議

HTML5 Please 整理了各種新的 HTML5 與 CSS 語法在各種瀏覽器上的相容性狀況,並提供使用上的建議。

在開發網頁的應用程式時,開發者所撰寫的 HTML5 或 CSS 程式碼通常都要面對許多不同瀏覽器的相容性問題,而 HTML5 Please 是一個可以查詢各種 HTML5 與 CSS 的語法在各種瀏覽器中被支援的狀況,並且建議你是否應該使用,你可以依據哪一些瀏覽器支援哪一些語法來選擇要使用的語法。

Adaptive Backgrounds:一個可以依照圖片主題顏色動態調整背景的 jQuery Plugin

這裡介紹 Adaptive Backgrounds 這個 jQuery plugin,它可以依照圖片的主題動態更改背景顏色。

Adaptive Backgrounds 是一個 jQuery 的 plugin,它可以取出一張圖片中最主要的顏色,並將該顏色套用在圖片的上一層網頁元素上,藉此製作出一個跟圖片主題相似的背景。


這個 plugin 是運用 ImageData<canvas> 來達到這個效果的,而由於安全性的因素,這種 JavaScript 只能處理同一個網站的圖片,或是允許 Cross Origin Resource Sharing 的圖片。

One Today:Google 推出的慈善 App,讓用戶可以從手機上捐贈 1 美元給慈善機構

One Today 是 Google 所推出的慈善 App,它每天會介紹一個慈善機構給手機的使用者,並且可以直接透過手機捐贈 1 美元給他們。


世界上有非常多的慈善機構,有待您伸出援手,而 Google 也帶頭推出了一個幫助這些慈善機構募款的 App:One Today,這個 App 每天會介紹一個非營利的慈善機構給使用者,為這些慈善機構募款。

Flickr 現在可以讓你把照片內崁至網頁中了

Flickr 最近推出了內崁照片的功能,現在你可以直接把 Flickr 上的照片直接放進網頁中顯示了。


現在如果你想要在一般的網站或部落格中顯示 Flickr 的照片,可以使用 Flickr 最新的照片內崁功能,將產生的 HTML 程式碼複製起來再貼在網頁上,就可以直接顯示 Flickr 的照片了。

Flickr 內崁照片的 HTML 程式碼

下面這個是 Flickr 貼在部落格中的效果,還有上一張、下一張與全螢幕的功能。


由於 Flickr 上面的照片有分為公開或私有兩種,當然是這個內崁功能只能用於公開的照片,並且在內崁的畫面上也會顯示作者的姓名與照片的標題。

Grunt:自動化網頁應用程式開發流程的 Node.js 工具

Grunt 是一個以 Node.js 為基礎所開發的命令列工具,在經過適當的設定之後,它可以幫助程式開發者將一些重複性的工作自動化,減輕開發者與開發團隊的負擔。

Grunt 可以處理的事情很多,例如精簡 CSS 程式或網頁的大小、編譯 CoffeeScript、unit test、linting 等,舉凡一般性的重複動作多半都可以使用這個工具來處理。

Grunt 背後有一個很大的生態系統(ecosystem),包含了大量的 plugins,使用者可以藉由這些 plugins 將自己的工作自動化,而使用者也可以很容易的把自己開發的 plugin 上傳到 npm 上面分享給其他人使用,也因為這樣的分享機制,這個生態系統目前也持續在成長。

Slurm:Linux 命令列網路頻寬監控工具

Slurm 是一個 Linux 系統下的命令列網路頻寬監控工具,它可以在一般的終端機中透過 ASCII 的簡單圖形顯示目前網路的覆載狀態。

在 Ubuntu 或 Debian Linux 中若要安裝 Slurm,可以使用 apt 來安裝:
sudo apt-get install slurm
安裝完成之後,就可以開始使用了:
slurm -i eth0
它的監控畫面會像這樣:

Slurm:Linux 命令列網路頻寬監控工具

Ghost 開放原始碼部落格平台開始提供付費主機空間服務了

Ghost 這個開放原始碼的部落格平台,目前已經準備好開始提供主機空間服務了,不過這個服務是要付費的。


Ghost 是一個以 Node.js 為基礎的開放原始碼部落格平台,在今年十月份才釋出其第一個版本,而現在他已經準備好開始提供主機空間服務了。

Ghost 這個部落格系統是由 WordPress 的開發團隊所發展出來的,所以它跟 WordPress 有點類似,但是不一樣的是 Ghost 會比 WordPress 更簡單、更容易使用。

reCAPTCHA Mailhide:以驗證碼保護電子郵件地址,避免收到垃圾郵件

reCAPTCHA Mailhide 是 Google 所提供的一項服務,可以把自己網頁上的電子郵件地址加上驗證碼保護,避免自己的信箱收到一堆垃圾郵件。

reCAPTCHA

許多的網站或部落格通常都會希望透過一些管道獲取讀者的回應或建議,最直接的方式就是使用電子郵件信箱(email),但是現在網路上充斥著太多的垃圾信件發佈者,常常會從開放的網頁中抓取任何的電子郵件信箱位址,然後過過這些位址發送廣告信,所以現在大概內行人都不太願意直接在網路上提供自己的電子郵件信箱。

Google Public DNS 伺服器設定教學(讓上網速度更快、安全性更高)

這裡介紹如何在各種作業系統與瀏覽器中設定使用 Google Public DNS,讓上網的速度可以更快。


在上網瀏覽網頁時,當我們輸入 tw.yahoo.com 這樣的網址,電腦必須先把這樣的網址透過 DNS 伺服器轉換為 IP 位址,才能真正連上這個網站,所以 DNS 伺服器對所有上網的人都非常重要,而通常這種伺服器都沒有什麼大問題,所以大家都沒在注意他的重要性。

但是如果你發現你的上網速度突然很慢,網頁都開不起來的時候,除了檢查網路現有沒有插好之外,DNS 伺服器是否正常也是要檢查的一個項目,如果你使用的 DNS 伺服器太慢、甚至對你的請求沒有反應,那麼你就可以換成 Google 所提供的免費 DNS 伺服器看看。

tinyblog:全新的 Live 版部落格概念,提供作者的實況轉播

tinyblog 是 Kevin Rose 提出的一個全新的 Live 版部落格概念,讓整個部落格更加生動有趣。


傳統上的部落格都是將作者寫好的文章發佈在網頁上,然後讀者閱讀的內容都是靜止不動的文字與靜態圖片,這種方式讓 Kevin Rose 感覺太過生硬。

Kevin Rose 是 Digg 創始人,同時也是 Google Ventures 的合夥人,他最近提出了一個 live 版的部落格概念,就是讓讀者可以從部落格中看到部落格作者 live 版的實況轉播!

Google AdSense 回應式廣告單元(自動偵測版面大小)

Google 的 AdSense 回應式廣告單元現在可以自己偵測網頁的版面,自動選擇最適合的廣告大小。

Google AdSense 廣告前一陣子才支援回應式網頁設計,讓 Google AdSense 廣告配合瀏覽器版面動態變更大小,但是之前的版本使用者必須自己透過 CSS 的設定來規劃版面寬度與廣告大小的組合,其實使用起來並不是很方便。

而現在 Google 終於推出可以自動偵測網頁版面的廣告單元,你可以完全不用更改任何程式碼,就可以讓 AdSense 廣告自己選擇適當的大小,讓網頁設計者可以更省時省力。

Google BBS Terminal:如果 Google 在 80 年代就發明了,它的長相應該會像這樣

Google BBS Terminal 是以 80 年代的 BBS 介面所實作的 Google 搜尋引擎,別看它這樣,他是真的可以用來搜尋的 BBS 喔!

Google BBS Terminal

Google 這家公司是在 1998 年創立的,而它的網站則是到了 1999 年才開始啟用,如果 Google 在早個 20 年發明,那麼它應該就會長得像這樣。

大家別以為它只是一個小遊戲或是純展示的網頁,它其實是一個真正可以搜尋的工具,其內部使用 Google Search API 靠著真正的 Google 來搜尋網頁。

Live.Pics.io:支援語音的即時線上照片分享服務平台

Live.Pics.io 是一個支援語音的即時線上照片分享服務,可以讓你馬上透過麥克風跟任何網路上的朋友分享自己的照片。

Live.Pics.io 支援語音的即時線上照片分享服務平台

Live.Pics.io 是一個可以讓用者不需要任何準備就可以跟網路上的任何人分享圖片與進行對話的服務平台,當然這樣的服務除了跟親朋好友聊天之外,也適用於商業的簡報,而對方也可以透過麥克風跟簡報者即時的對話。

Gibbon:透過社群分享的力量,提供有系統的學習指引

Gibbon 是一個提供社群分享學習資源的網站,包含了各種主題有系統、有組織的學習指引。


現在這個資訊時代幾乎任何事情都可以在網路上搜尋的到,但是問題在於網路上的資料通常都是比較片段的,比較少有針對一個主題提供有系統、有組織的學習資源,要從網路上一堆零碎的資料所拼湊出來的教材進行學習,效果通常並不理想。

Gibbon 是一個給大家分享學習資源的網站,透過社群的力量互相分享,你可以在者裡找尋有興趣的主題,獲得完整的學習過程。

Vim.js:一個使用 JavaScript 實作的 Vim 編輯器(尚在發展階段)

Vim.js 是一個使用 JavaScript 實作的 Vim 編輯器,不過實用性不高,只適合學習與研究使用。


Vim.js 是把傳統 Linux 上的 Vim 編輯器以 JavaScript 實作在一般的瀏覽器中,不過目前還在發展當中,還不是很穩定,而且這種編輯器大概只適合比較資深的 UNIX/Linux 使用者作為「娛樂」使用。

讓你的 Blogger 部落格到了聖誕節也跟著下雪!

這裡教大家如何讓你的 Blogger 部落格到了聖誕節也跟著下雪,這樣更有過節氣氛!

首先不要太訝異這篇文章的配色跟其他的文章不同,這是為了要有聖誕節的氣氛,所以特別設計的。以下教大家如何讓自己的 Blogger 部落格也可以在聖誕節下雪。

Google Tips:教你各種 Google 產品的使用技巧

Google Tips 是一個 Google 最新推出的網站,它可以教你如何善用 Google 的各種產品。

這個網站使用最新的設計,使用許多小卡片的方式呈現各種的產品使用技巧(tips),每一張卡片都有一個主題。


這些小卡片當你點下去之後,就會出現一疊卡片,裡面有該主題更詳細的說明,若要分享給朋友,也可以使用 google+、twitter、facebook 或 email 的分享功能。

在 Windows、Mac OS X 與 Linux 中安裝 Node.js 網頁應用程式開發環境

這裡介紹如何在各種作業系統(Windows、Mac OS X 與 Linux)中安裝 Node.js 網頁應用程式開發環境。

Node.js 是一個以傳統 JavaScript 語言為基礎所發展出來的新架構,它可以讓傳統的 JavaScript 程式跳脫一般的瀏覽器,在任何地方執行,另外配合 Google 所發展的高效能 V8 JavaScript 引擎,更讓程式的整體的效能大幅提升。

由於 Node.js 使用事件導向(event-driven)與非阻斷式(non-blocking)I/O 的模型,可以讓整個程式執行起來非常輕盈、非常有效率,很適合用於即時性的大量資料處理工作,目前許多大型網站(如 LinkedIn、微軟、Yahoo、eBay 等)都已經採用這樣的架構在進行服務。

以下我們介紹如何在各種作業系統中安裝 Node.js 開發環境。



[開箱] Takara TMK-244B 球型雲台腳架

這是我最近上 PChome 買的 Takara TMK-244B 腳架相機腳架,順便拍幾張照片放上來,如果有考慮買腳架的人可以參考。

最近因為需要腳架拍攝全景照,所以在 PChome 上面選了一款最便宜的腳架,這款 Takara TMK-244B 球型雲台腳架在 PChome 購物網站只要 1590 元,本來想說只是要固定相機,也沒有什麼特別需求,堪用即可,沒想到東西到手之後不如預期,後來就把它退掉了。

不過退貨之前,還是拍了幾張照片,放在這裡給大家參考。

Takara TMK-244B 腳架介紹

LiquidFun:Google 設計給手機遊戲用的 2D 流體模擬函式庫

Google 今天發表了一個新的 LiquidFun 函式庫,可以用來在各種作業系統或手機上模擬流體的物理現象。


LiquidFun 是一個以 C++ 所開發的 2D 流體模擬函式庫,它以 Box2D 為基礎,並且實作了以利子為基礎(particle-based)的流體模擬,這個函式庫可以讓手機遊戲的開發者很容易在遊戲中加入近似實際流體的效果。

由於 LiquidFun 是以 C++ 開發的,所以除了手機之外,任何有 C++ 編譯器的作業系統或平台都可以運用這個函式庫,Google 除了將 LiquidFun 的原始碼放在 GitHub 之外,也提供了許多在 Windows、Mac OS X 與 Linux 上的應用程式範例與 unit tests。

Google Open Gallery:開放給一般博物館、畫廊免費建置線上導覽網站的服務

Google Open Gallery 是一個開放給任何博物館或畫廊等文創單位提供線上展示作品的服務平台。

長久以來 Google 不斷透過它的 Google 文化中心(Cultural Institute)服務,讓許多的博物館與畫廊中的作品可以在線上展示,而現在 Google 打算推廣這項服務,開放讓所有這類的文創產業都可以來使用這樣的服務。


Google Open Gallery 這個線上展示服務適用的範圍很廣,從地區性小型的畫廊到國際性的大型博物館都可以使用這個服務,幫助實體的藝術創作發表在網路上供大眾閱覽,而這些網頁資料都在放 culturalspot.org 這個網域下由 Google 負責免費維護。

Google 現在可以讓你製作自己的街景地圖了!

Google 地圖的街景服務(Street View)現在可以讓使用者上傳自己拍攝的全景照片,製作個人的街景地圖了!

Google 地圖最近在它的部落格中公佈了這個好消息,現在你只要使用 Android 4.2 手機中的「相機」應用程式或是單眼相機,就可以自己拍攝全景的相片,並上傳到 Google 地圖的街景服務上,製作屬於自己的街景了,詳細的拍攝教學可以參考 Google 官方的教學文件

如何對付各種不同的 CSS 供應商前綴(Vendor Prefixes)?

這裡介紹如何對付各種不同的 CSS 供應商前綴(vendor prefixes),讓網頁開發更有效率。

在使用 CSS 設計網頁時,多多少少都會遇到需要處理不同瀏覽器之間的相容性問題,其中一個很棘手的問題就是 CSS 的供應商前綴,為了要使每一種瀏覽器都支援你寫的 CSS 程式碼,你必須依照各種不同的瀏覽器加上它們專屬的供應商前綴,以確保該 CSS 可以被正常執行。

舉例來說,在使用 CSS 的動畫(animation)功能時,animation 相關的屬性就必須要加上 -webkit--moz- 這類的供應商前綴,確保不同的瀏覽器都可以支援,動畫關鍵影格(keyframes)at-rule 的部分,也要加上供應商前綴,變成類似 @-webkit-keyframes@-moz-keyframes 這樣的型式,這裡最麻煩的地方就是每一個 CSS 屬性與每一個供應商前綴的組合都要寫出來,如果只是一兩行程式的話是還好,但是通常一個內容比較豐富的網頁,這類的 CSS 會非常多,這個時候要處理這些供應商前綴就是一個大問題。

使用 CSS Animation 製作網頁上的動畫(只要 CSS3,不用 JavaScript!)

這裡介紹如何使用 CSS3 的 animation 功能在網頁上製作動畫,而且不需要使用到 JavaScript。

CSS3 所提供的動畫(animation)功能可以讓網頁元素的 CSS 樣式(style)從一個設定轉換到另外一個,藉著這樣的方式產生動畫的效果。CSS 的再設定動畫時包含兩個部份,一個是用來設定 CSS 動畫的樣式,另外一個則是指定動畫開始、結束或中途路徑的關鍵影格(keyframes)設定。


使用 CSS 產生的動畫跟傳統上以 JavaScript 製作的動畫比較起來,有一些優點:
  1. 使用 CSS 會比 JavaScript 容易很多,對於簡單的動畫而言,不需要學習 JavaScript 即可馬上製作出來。
  2. 使用 CSS 的動畫比較節省資源,甚至在有一定負載量的系統中也可以很平順的執行,但是 JavaScript 的動畫就很容易因為效能問題而跑不起來(除非經過很精心的設計),而且一般瀏覽器的繪圖引擎(rendering engine)還可以透過 frame-skipping 這類的方式,提升整體的效能。
  3. CSS 把動畫播放的控制權交給瀏覽器控制,這樣可以讓瀏覽器進行更多的最佳化動作,例如當一個動畫放在背景的籤頁時,瀏覽器就可以減低這個動畫的更新頻率。

Codecademy:一個線上互動式程式設計學習網站(JavaScript、jQuery、PHP、Python、HTML/CSS、Ruby 等)

Codecademy 是一個線上互動式程式設計學習網站,它可以讓你在網頁上以互動式的操作,透過逐步的程式語言撰寫練習,很輕鬆的學會各種程式語言。

Codecademy 提供了各種程式語言的線上互動式學習課程,包含 JavaScript、jQuery、PHP、Python、HTML/CSS、Ruby 等程式語言,另外還有許多雲端服務網站的 API 教學。

Gmail 收到的郵件中已經有 91.4% 使用了對抗釣魚郵件的認證機制

Google 今天宣佈一項數據:大家對抗釣魚郵件的戰爭經過近十年的努力之後,終於有一些成果了,現在從網路上傳送給 Gmail 使用者的已認證(非垃圾)郵件中,有 91.4% 的郵件認證是來自於 DomainKey Identified Email(DKIM)或 Sender Policy Framework(SPF)這兩種標準。


網路上許多 Email 相關的產業長年來都致力於這樣的郵件認證標準,希望可以藉由郵件的寄送網域單位與接收網域單位確認使用者的身份,避免冒名的電子郵件產生,而這樣的措施可以幫助類似 Gmail 這類的電子郵件服務提供者一年過濾數十億封的釣魚郵件,確保這些釣魚郵件不會進入到使用者的信箱裡。

Amazon Prime Air:亞馬遜用來送貨的無人飛機

亞馬遜(Amazon)的 CEO Jeff Bezos 在美國節目「六十分鐘」裡,宣布推出一套可以在 30 分鐘內,將產品運送到府的無人飛機(Drone)運輸系統:Amazon Prime Air


這台無人送貨飛機最大承載的重量是 5 磅(約 2.26 公斤),而亞馬遜所販售的商品中大概有 86% 都低於這個重量,也就是說未來這個服務可能可以適用於大部分的亞馬遜客戶。

Colorpeek:查看與分享 CSS 色碼的線上工具

Colorpeek 是一個查看與分享 CSS 色碼的線上工具,除了顯示 CSS 顏色還可以自動取出圖片的主要顏色。


一般在設計網頁時,一定常常會需要查看某項網頁元素的顏色,或是為某一個網頁元素選擇一個適當的顏色,如果是團隊開發的情況,在多個網頁開發者之間討論顏色時,也會碰到需要互相交流顏色選擇的看法,當然你可以直接將 hex triplet 貼上 Photoshop 這類的會提軟體,看看這個顏色的感覺,調整好顏色之後,再把這個 hex triplet 貼在 Email 寄給另外一位開發者,跟他說這個顏色不錯,但是這樣每次調整顏色時都要開啟 Photoshop 這樣的軟體,其實不太方便。

BitTorrent Sync 使用者超過兩百萬人,成長速度是 Dropbox 的兩倍

BitTorrent 今天宣布他的 Sync 檔案同步工具已經有超過 2 百萬的使用者了,成長的速度比 Dropbox 還要快。


在一個月前,BitTorrent 釋出新版的 Sync 與 API,加速了其使用者的成長速度,而 BitTorrent 也相信一般雲端服務所存在的風險也會促使使用者選擇 Sync 這樣的方案,像最近美國國家安全局(NSA)搜集資料的事件就是個很實際的例子。

Google 聖誕老人追蹤器(Santa Tracker),讓你掌握耶誕老人的行蹤!

隨著耶誕節到來,Google 也應景推出 Santa Tracker 聖誕老人追蹤器,讓你掌握聖誕老人每天的的行蹤!


Santa Tracker 這個網站是 Google 最新推出的耶誕節活動網站,根據「精靈創意總監」Sandra Russell 在部落格的文章,Google 工程師正努力以精密的地圖和技術,追蹤耶誕老人的雪橇。

漂亮的設計可以導引使用者接受開放原始碼的軟體

現今生活中許多的日常用品都有很漂亮的設計,在資訊的領域也不例外,許多的網站與桌面應用程式也都經過特別的設計,讓整體的使用感覺更舒服,也因為這樣使用者漸漸體認到設計的重要性,在以前那些不在意設計的使用者,現在可能都會使用者界面或使用者經驗不夠好而抱怨。


設計對於許多軟體其實都有很大的影響,以繪圖軟體而言,Photoshop 與 GIMP 其實對於一般的使用者而言,大部分在 Photoshop 中所使用的功能 GIMP 其實都有,但是為什麼大家都會喜歡花錢使用 Photoshop?像這類因為設計取勝的的例子不勝枚舉。

RulersGuides.js:讓網頁顯示尺規,輔助版面設計的 JavaScript 工具

RulersGuides.js 是一個可以讓網頁顯示尺規,輔助版面設計的 JavaScript 工具,適用於各種常用的瀏覽器。


在設計網頁版面時,常常會需要量測網頁中各個組件的位置與大小,這裡我們介紹一個好用的網頁量測工具 RulersGuides.js,它可以在網頁中加入類似 Photoshop 的尺規,還可以拉出參考線,這個功能對於網頁設計者而言非常實用。

Google Chrome 的 DevTools 現在支援手機平台的網頁開發了

Google Chrome 的最新版加入了手機網頁應用程式開發功能,現在你可以直接使用 DevTools 進行手機網頁應用程式的開發與除錯了。


Google 最近釋出了 Windows、Mac、Linux 與 Android 平台的 Chrome 32 beta 版,並且針對 DevTools 加入了手機平台的網頁開發功能,現在手機的開發人員可以利用這個功能對手機版的網頁應用程式(web apps)進行開發與除錯的動作,當你在設計應用程式時,新的 DevTools 可以在開發環境中直接看到手機的畫面,以下是它的操作過程。

使用 ScrollUp jQuery Plugin 在網頁與部落格中加入回到頁首(Back To Top)按鈕

這裡介紹如何使用 scrollUp jQuery Plugin,在網頁與部落格中加入回到頁首(Back To Top)的按鈕。

回到頁首(Back to Top)按鈕

有些網頁設計者會在一些內容比較長的網頁中加入回到頁首(Back To Top)的按鈕,這種按鈕在一開始載入網頁時並不會顯示,而在使用者往下捲動網頁內容時就會自動出現在畫面的角落,只要使用者用滑鼠點一下這個按鈕,就會自動將捲軸拉到最上方,是一個可以讓使用者更方便瀏覽網頁的小功能。

如何讓網路攝影機(webcam)的影像更漂亮、視訊品質更好?

這裡有一些網路攝影機(webcam)的使用建議,可以讓自己的影像拍起來不要太醜。

由於現在的網路頻寬快速提昇,視訊設備價格也非常低廉,只要電腦有上網再加上一個幾百塊的網路攝影機(webcam),就可以進行視訊了。

如果你也有使用視訊通話的習慣,那麼你可以參考一下這裡的建議,讓你的網路攝影機可以拍出更好看的影像。