Iconizer 線上自訂化圖示

Iconizer 是一個「圖示自訂化」的線上工具,它提供了一系列不同種類的圖示,我們可以先選擇其中一個,然後再利用 Inconizer 的自訂化功能改變圖示的顏色、背景色(可選擇透明背景)以及圖示大小,最後再下載自訂化之後的成果。

如果你想要更換作業系統裡一成不變的圖示;或是製作網頁時須要用一些不一樣的圖示;或是其它工作上有需要,都可以到 Iconizer「定做」一個與眾不同的圖示。

Iconizer 網站資料

Iconizer 使用介紹

第一步、進入 Iconizer 之後,在網頁左邊的「Categories」裡選擇一個我們想要的圖示分類與子分類 ▼

Iconizer - 選擇分類

第二步、點按「Select icon」下拉選單顯示分類裡的所有圖示 ▼

Iconizer - 選擇圖示下拉選單

第三步、選擇一個圖示 ▼

Iconizer - 選擇圖示

第四步、選定好一個圖示後,就可以開始選擇自訂化項目了:

  • File type:選擇輸出圖示的檔案格式
  • Keep colors:是否保留圖示原來的顏色,如果等一下要改變圖示顏色的話請選「No」。
  • Foreground color:選擇圖示顏色,按下右邊的色塊可以叫出調色盤。
  • Background color:選擇背景顏色
  • Transparent background:選擇圖示背景是否為透明,如果選擇「Yes」的話會讓背景顏色無法選擇。
  • Icon size (px):設定圖示大小,單位是像素。
  • Constrain proportions:強迫保持大小比例

一切都設定好之後就可以按下「Generate icon」來產生圖示了 ▼

Iconizer - 自訂、產生圖示

第五步、產生出來的圖示會顯示在右邊,按下「Download」 就可以下載了 ▼

Iconizer - 下載圖示

via LifeHacker

[Bookmarklet] Instapaper 讓網頁變得更簡潔、易讀

Inspataper 實際上是一個工具型網站,它允許使用者在瀏覽網路文章的時候,將沒有時間閱讀的內容打上「Read Later」標記以便稍後閱讀,而被標記為「稍後閱讀」的文章則會被 Instapaper 解析網頁內容,然後只留下主要文字內容和圖片的「簡潔版」文章,並儲存在 Instapaper 網站裡。因此當之後有時間回來讀這些文章的時候,就可以避掉「干擾物」,直接閱讀最重要的部份。

今天要介紹的 Bookmarklet 就是由 Instapaper 製作,讓使用者可以直接將任何網頁馬上變成「簡潔版」的書籤工具。

安裝 Instapaper Bookmarklet

要安裝這個 Bookmarklet,請到以下網頁:

如果你使用的瀏覽器是 Firefox 或 Chrome 的話,可以依照下圖示範,將「Instapaper Text」的 Bookmarklet 拖放到「書籤工具列」。
IE 的話則可以在「Instapaper Text」上按下右鍵,點選「加到我的最愛」,如果出現「安全性警訊」對話框的話可以按「」,然後將 Bookmarklet 儲存在「我的最愛列」就行了。

Instapaper.01

使用 Instapaper Bookmarklet

在閱讀一篇文章的時候,只要按下書籤工具列上的「Instapaper Text」,文章就會經由 Intapaper 「簡潔化」,然後只呈現主要的文字內容和圖片。如果要回到原始網頁的話可以點按右上角的「 View original」▼

Instapaper.02

網頁裡的圖片如果太大的話會自動縮到合適的大小,避免破壞版面 ▼

Instapaper.03

via LifeHacker

BKPlurk! 備份噗浪訊息很簡單

玩噗浪也有一段時間了,在上面發表的訊息雖然不算多,但也有 1500 之譜,網友的回應也差不多是這個數字。因此有時候會想說,如果有個噗浪備份工具的話,就可以把之前所有發表過的訊息和網友的回應備份下來,萬一哪一天不小心手殘刪了自己的帳號,還有機會可以回憶以前發表過的記錄(儘管大多是價值不高的內容 XD)。

BKPlurk! 是一個備份噗浪訊息的線上工具,它可以讓我們選擇備份的日期範圍、是否備份回應、備份檔案的格式(HTML、CSV)。若選擇備份格式為 HTML 網頁的話,訊息的顯示方式清楚易讀,因此不須其它閱讀軟體,用瀏覽器就可以很方便地讀取備份訊息。

BKPlurk! 資訊

  • 網址http://www.wabow.com/bkplurk/
  • 注意事項(取自官方網頁)
    • 請放心,本服務不會儲存「帳號」、「密碼」 等私人資訊。
    • 若仍擔心密碼外洩,請先修改密碼後再進行備份,完成後改回慣用的密碼。
    • 備分的日期範圍較大或噗數較多時需要較長的作業時間,請耐心稍待一下。
    • 備份內容若噗數過多不建議點選”全部展開”回噗,會造成瀏覽器執行時間過長。
    • 匯出 CSV 功能即將上線。
    • 有任何問題及建議,歡迎來信 service@wabow.com在此留言

BKPlurk! 噗浪備份工具使用介紹

進入 BKPlurk! 首頁之後,在「備份選項」輸入噗浪的「帳號」、「密碼」;如果要一起備份回覆訊息的話必須勾選「包含回應」,若要直接下載備份檔案的話則勾選「檔案下載」,然後再選擇備份的檔案格式(HTML 或 CSV);在「日期」選擇備份訊息的開始和結束時間;最後再「排序」選擇備份訊息的排列順序,然後再按下「開始備份」▼

BKPlurk! - 備份選項

噗浪訊息備份(讀取)中,如果剛才選擇的日期範圍比較大的話,備份所需的時間也較久,所以要等一下 ▼

BKPlurk! - 備份中

備份出來的噗浪訊息以列表方式呈現,很方便閱讀。每一則訊息含有發表時間回覆數發表訊息的帳號名稱訊息內容以及訊息的原始網址。如果剛才有選擇備份回應的話,那麼只要點按訊息裡的回覆數字就可以展開回覆訊息 ▼

BKPlurk! - 閱讀備份訊息

via Neo’s Blog

讓 FeedBurner 將部落格更新訊息同步到 Twitter?(推特)

FeedBurner 是一個 FeedRSS 的「燒製」服務,如果你有部落格的話,可以將部落格的 RSS 丟給 FeedBurner 燒製,然後就可以有一個固定的 RSS 網址。以後就算你的部落格換到其它的 BSP,只要到 FeedBurner 更改 RSS 來源,那麼之前訂閱由 FeedBurner 燒製出的網址的人還是可以繼續追蹤你的部落格。

現在 FeedBurner 推出了一個新服務,當部落格發布新文章的時候,FeedBurner 能將發布訊息同步到 Twitter,讓追隨你的推友們可以知道你的部落格已經有新文章了。而且文章的網址會被縮成 Google 的 http://goo.gl 的短網址。

要使用這項服務必須先登入 FeedBurner 的帳號,因為 FeedBurner 已經賣給 Google,所以如果你還沒有將 FeedBurner 帳號轉移到 Google 的話可以到這裡進行帳號轉移後才能夠登入。

《如何讓 FeedBurner 將部落格更新訊息同步到 Twitter?》

第一步、進入 FeedBurner 的首頁,登入帳號之後可以看到我們交給 FeedBurner 代管的 Feed,點選 Feed 標題進入設定頁面 ▼

FeedBurner 同步到 Twitter - 進入 Feed 設定頁面

第二步、在設定頁面裡點選【Publicize】標籤 ▼

FeedBurner 同步到 Twitter - 進入 Publicize 頁面

第三步、在 Publicize 標籤頁裡,點選左邊的【Socialize】▼

FeedBurner 同步到 Twitter - 進入 Socialize 頁面

第四步、點按【Add a Twitter account】按鈕來加入我們的 Twitter 帳號 ▼

FeedBurner 同步到 Twitter - 加入 Twitter 帳號

第五步、按下 Add a Twitter account 之後會跳出 Twitter 的網頁,詢問我們是否允許 Google 存取我們的 Twitter 帳號以及發布新訊息,按下【Allow】表示允許 ▼

FeedBurner 同步到 Twitter - 允許 Google 連結 Twitter 帳號

第六步、接下來我們可以看到 Twitter 的帳號已經被加到 FeedBurner 了。在下面的「Formatting Options」可以設定發布訊息的格式:

  • Post Content:選擇要發布的內容是什麼,只發布標題、只發布內容,或是標題、內容一起發布…
  • Include link:是否加入文章連結,連結會以 Google 短網址呈現
  • Leave room for retweets:是否預留給別人 retweet 的空間
  • Additional text:可以在訊息前面或是後面加上文字 ▼

FeedBurner 同步到 Twitter - 成功加入 Twitter 帳號

第七步、設定好之後按下網頁最下面的【Activate】鈕就可以啟動這項服務了 ▼

FeedBurner 同步到 Twitter - 設定訊息格式

啟動成功後可以看到「You have successfully updated the feed……」 的訊息 ▼

FeedBurner 同步到 Twitter - 啟動成功

Google Docs Viewer 免裝軟體即可線上檢視 PDF 和 Power Point 簡報

當我們在網路上看到一個 PDF 或是 Power Point 簡報的檔案網址,我們必須先將檔案下載到電腦裡,然後再用 Adobe Reader 或 Microsoft Office Power Point 等軟體打開下載好的檔案,然後才能開始檢視文件內容。

雖然 Adobe Reader(或其它的 PDF 閱讀軟體)以及 Power Point 已經算是安裝率很高的軟體,但還是有可能會碰到須要檢視這些文件內容,電腦內卻剛好沒有安裝支援軟體的情況。

Google Docs Viewer(Google 文件檢視器)是 Google Docs 裡,一個實用的線上文件檢視器,它讓我們可以線上檢視 PDF、Power Point 文件內容,支援的文件格式有:

  • PDF(Adobe PDF)
  • PPS(Power Point 97 – 2003 播放檔 )
  • PPT(Power Point 97 – 2003 簡報檔)
  • TIF(Tagged Image File

使用 Google Docs Viewer 除了可以解決上面提到的問題之外,對於傳送、發布文件來說也很方便。只須傳送由 Google Docs Viewer 產生的連結,再將連結分享出去,對方不需要下載文件檔案也不須安裝閱讀軟體即可線上檢視文件內容。唯一比較可惜的是,目前 Google Docs Viewer 還不支援 Word 的文件格式。

Google Docs Veiwer 網址http://docs.google.com/viewer

如何使用 Google Docs Veiwer?

進入 Google Docs Viewer 網頁之後,將文件檔案網址貼入網頁的欄位裡,然後按下【產生連結】按鈕 ▼

Google Docs Viewer - 貼上檔案網址

接下來 Google Docs Viewer 會提供三種分享方式:

  1. 直接連結:將這個連結(網址)貼入瀏覽器的網址列之後就能夠直接檢視文件內容
  2. 連結原始碼:這是一段包含連結的 HTML 原始碼,當我們將這段原始碼貼到網頁或是部落格裡的時候會產生像這樣的連結:Google 搜尋引擎最佳化初學者指南
  3. 嵌入式檢視器原始碼:將這段原始碼貼到網頁或是部落格之後,訪客可以直接在該網頁裡閱讀文件,而不需要連到 Google Docs Viewer 網站(下面有範例演示)。

Google Docs Viewer - 產生網址

各種文件格式的 Google Docs Veiwer 連結以及「嵌入式」檢視器的檢視效果

下面的三個連結是由 Google Docs Viewer 產生的,分別是 PDF、PPS 以及 PPT 三種文件格式,可以點進去檢視:

再來,下面是嵌入式檢視器的檢視效果:

[Bookmarklet] PrintWhatYouLike 讓我們可以去除網頁裡不必要的部份 列印真正有用的內容

有時候當我們要列印網頁時,可能會發現我們真正想要列印的其實只是網頁中間的某個部份;或是我們不想列印網頁中的某些元素,像是圖片、背景等,以避免造成墨水和紙張的浪費。

PrintWhatYouLike 是一個 Bookmarklet,就像它的名字所表示的,可以讓我們「印我所愛」,只列印喜歡以及真正有用的部份。使用 PrintWhatYouLike 之後,我們便有了「編輯」目前正在閱讀的網頁的能力,讓我們可以選取網頁中的某些內容,然後將其刪除;或是去除網頁中的圖片、背景,以及調整字型的大小等,讓列印出來的網頁能夠更有可讀性,另一方面還能節省資源。

要安裝 PrintWhatYouLike 這個 Bookmarklet 必須到下面這個網頁:

然後如下圖所示,將「PrintWhatYouLike」這個連結拖放到書籤列 ▼

PrintWhatYouLike - 安裝 Bookmarklet

之後只要按下書籤列上面的「PrintWhatYouLike 」,就會在網頁左邊載入編輯面板 ▼

PrintWhatYouLike - 編修網頁(按圖放大)

以下是編輯面板中每一個按鈕的說明:

File 區塊:

  • Print:列印目前顯示的網頁內容
  • Save Clip:將目前選取的網頁內容儲存到 PrintWhatYouLike 網站(需註冊帳號)
  • Undo:恢復上一次的編輯
  • Redo:重作上一次的編輯

Auto Format 區塊:

  • Do It For Me!:這個功能會自動將網頁格式化成最適合列印的版本。它會刪除所有圖片、背景,只留下白底黑字。

Select 區塊:

  • More:擴大選取區(將選取區擴及到父元素)
  • Less:縮小選取區(將選取區縮至子元素)
  • Clear:取消選取

Selection 區塊:

  • Isolate:將選取區獨立出來(只留下選取的內容)
  • Remove:刪除選取區
  • Fit To Width:將選取區的寬度放寬到 100%
  • Resize:重新調整選取區大小

Page 區塊:

  • Text Size:增/減 字型大小
  • Font Type:選擇顯示字型

Change Set 區塊:

  • Save Change Set:將目前的修改儲存為預設集,下次可對其它網頁套用同樣的修改(需註冊帳號)。

● PrintWhatYouLike 的其它用途

PrintWhatYouLike 除了可以幫我們節省墨水、紙張之外,其實還可以拿來當成「提高網頁可讀性」的好工具,當我們碰到一個外觀過於花俏、字型太小的網頁時就可以利用 PrintWhatYouLike 將背景圖片刪除、增加字型大小。

或是當我們要儲存一個網頁的之前也可以用 PrintWhatYouLike 將一些無關緊要的內容、元素刪除,只留下我們真正需要的部份再儲存。

利用 Google 的文件閱讀器讓 PDF、簡報顯示在網頁裡供其它人瀏覽

當我們在想線上分享某個 PDF 檔案或是 PowerPoint 簡報給訪客在部落格或是網頁裡閱讀的時候,我們除了可以利用 SlideShare 這個知名的文件分享網站之外,還有另一個方法可以讓我們把放在網站中的 PDF 或是 Power Point 直接嵌入到網頁裡供其他人瀏覽。

Google 文件(Google Docs)有一個內建的文件閱讀器,透過它就能讓我們把 PDF 或是 Power Point 以 iframe 的方式嵌入到網頁裡,但前提是檔案必須放在能夠以網址讀取的網站空間裡。當把 PDF 嵌入到網頁裡之後就會像下面所顯示的,除了能用與一般 PDF 閱讀器相同的「捲頁功能」之外,還可以「縮放頁面」以及讓頁面以「並排的方式顯示」;如果覺得閱讀範圍太小的話可以點選右上角的圖示,讓文件閱讀器在新視窗中打開。

將下面這一段原始碼加入到網頁中就能讓 PDF 或是 Power Point 顯示在你的網頁裡。然後把 gview?url= 後面的網址換成你的檔案所在網址,若要設定顯示大小的話可以在 width 以及 height 指定寬度跟高度,單位是像素(px)。

<iframe src="http://docs.google.com/gview?url=http://www.joaoko.net/temp/Google.SEO.Cht.pdf&embedded=true" style="width:580px; height:400px;" frameborder="0"></iframe>

資訊來源:Google Operation System

完整、專業,但使用卻很 easy 的線上調色工具 – Color Scheme Designer

雖然我不是專業的視覺設計人員,但是我能想像「配色」的工作在這個領域裡所佔的地位是多麼的重要。因為人類的眼睛對顏色是敏感的,不同的顏色會讓人產生不同的心理感受(也就是視覺),所以在一個視覺設計的作品當中,顏色的搭配是可以傳答出各種不同的訊息給欣賞的人們。

就拿網頁設計來說,網頁配色的好壞能影響造訪者對這個網頁的觀感,甚至還能起到是否願意留下來繼續瀏覽網頁的關鍵作用。但是在成千上萬的顏色裡,如何選出合適的搭配並不是一件簡單的事。就好像畫家會在調色盤上面嘗試各種顏色的組合,在電腦世界裡,也有所謂的調色、配色工具幫助視覺設計人員完成配色的工作。

Color Scheme Designer 是一個免費的線上調色工具,而且不需註冊就能使用。它主要是以色環的方式讓使用者選擇顏色,然後再加上六種不同的配色方案,讓使用者可以很容易地調出令人賞心悅目的配色。另外它還能讓使用者預覽將配色套用在網頁上的效果,以及匯出 HTML 色碼、Photoshop 色票檔、隨機配色、色盲模擬等功能。

網站:http://colorschemedesigner.com/

Color Scheme Designer 的六種配色方案:

  • Monochromatic(單色配色):以單一顏色做為基礎色,再以飽合度、亮度變化出其它搭配的色。因為是屬於同一個色系,所以這種配色法較能調配出舒適的色彩感受。
  • Complementary(互補色配色):以主色以及在色環對面的補色調出對比效果明顯的配色。
  • Triad(三分色配色): 以一個主色以及在色環對面的兩個補色組成較為柔合的對比效果。
  • Tetrad(四分色配色): 以兩個主色以及在色環對面的兩個補色營造出一種強烈的視覺效果。
  • Analogic(類似色配色):以一個主色以及在它兩旁等距的兩個補色調配出給人優雅、簡潔的色彩感覺。
  • Accented Analogic(互補類似色配色):以三個類似色為基礎,再加上色環對面的一個對比色構成一種既不失優雅又能強調重點的有效配色法。

Color Scheme Designer 使用介紹:

選擇配色方案:在左上角選擇一個配色方案,依照所選方案的不同,在色環上會有不同數量的圓點,我們可以利用滑鼠拖動圓點改變它們在色環的位置。在色環右邊會即時呈現配色的預覽圖,在預覽圖的下面有「Light page example(明亮)」以及「Dark page example(暗沉)」可以讓我們「模擬」網頁套用這個配色之後所產生的效果 ▼

Color Scheme Designer - 色環

預覽網頁配色:在網頁裡面點一下可以交換補色(如果有兩個以上的補色)▼

Color Scheme Designer - 預覽網頁配色

調整配色:在色環上選好色調之後,我們可以在「Adjust Scheme」調整顏色的「亮度」和「飽合度」,或是利用「Preset」下拉選單選擇一個預設值,像是「Max Contrast」為最高對比的配色;「Pastel」則是粉色配色等 ▼

Color Scheme Designer - 調整配色

顏色列表:在「Color List」會列出目前配色的所有顏色加上對應的 HTML 色碼 ▼

Color Scheme Designer - 顏色列表

匯出色票:右上角的「Export」功能表可以讓我們將目前的配色匯出成各種格式的色碼表,其中包括 Photoshop 的 ACO 色票檔和 GIMP 的 GPL 色票檔 ▼

Color Scheme Designer - 匯出色票

Google 地圖在台灣啟用「街景檢視(Street View)」

Google 的街景檢視(Street View)是 Google 地圖的一項創新功能。他們利用一種叫做「街景車」的設備在大街小巷間穿梭並且拍下一張又一張的街道實景,拍攝的影像經過處理、併貼之後再與 Google 地圖結合。使用者在使用街景檢視的時候就好像將自己置身於街道中間,利用滑鼠與鍵盤我們可以街道中行走,周圍的影像都可以真實地呈現出現,實現了用電腦逛大街的可能。

之前就聽說有人在路上看到 Google 的街景車,因此大家就在猜想,台灣的 Google 地圖是否準備要推出街景服務。Google 在今天果然發佈新聞稿,公布台灣 Google 地圖的街景服務正式啟用。但是目前只有台北市以及部份的鄰近地區有街景檢視,根據新聞稿的內容表示,目前台灣共有 5 輛街景車在各地近行拍攝的工作,只要某個城市、鄉鎮完成拍攝工作就會讓該地區的街景檢視率先上線。

● 如何使用 Google 街景檢視(Street View)?

進入 Google 地圖(網址:http://maps.google.com.tw/)之後,在搜尋框輸入要查詢的地標或是路名等,然後點按【搜尋地圖】。如果查詢的地區已經提供街景檢視的話,在地圖左上方會顯示一個黃色的「衣夾人」,利用滑鼠將衣夾人拖曳到想要看街道實景的地方,然後放開滑鼠。▼

StreetView.01

在接下來出現的街道實景裡,我們可以用滑鼠點按地上的指示標誌前進或後退。如果滑鼠停放的地方有放大鏡圖標的話,按兩下便可以將影像放大。

除了滑鼠之外,利用鍵盤的上、下鍵可以前進、後退;左、右鍵可以左右旋轉畫面;W 和 S 鍵可以改變上下視角,有一點像是在玩第一人稱射擊遊戲。▼

StreetView.02

除了滑鼠、鍵盤,在街景檢視的左上角同樣有改變視角、旋轉,以及放大、縮小的功能鍵。▼

StreetView.03

另外,在街景檢視的右下角有一個小型地圖,在這裡同樣可以拖曳「衣夾人」到其它街道,瞬間轉換到另外一個場景。▼

StreetView.04

在街景地圖左上角有一個「向左箭頭」,點它就能將左邊的面板隱藏起來,讓街景地圖展開。▼

StreetView.05

這是展開後的街景地圖。另外我們在右上角還可以看到「使用者相簿」,這是網友在附近拍攝然後上傳的照片。

StreetView.06

▼ 檢視使用者相簿

StreetView.07

兩個線上「載入中圖示(loading icon)」產生器 – Loader Generator、Ajaxload

在所謂的「Web 2.0」時代開始之後,我們可以看到很多網站使用了 Ajax 技術實現網站與瀏覽器之間的非同步資料交換。Ajax?形相上地說就是,當使用者向網站請求某段訊息時(如:點按某個連結、某個按鈕或是送出一個表單資料),瀏覽器並不會重新載入整個網頁,而只是重新載入包含更新訊息的那個區塊而已。也因為這樣,所以大部份的 Ajax 網頁會使用一種動畫小圖示,讓網站使用者知道網頁的某個區塊正在更新,而這種小圖示一般都稱為「Loading Icon」或是「Loader Icon」。

Loader Generator 是一個「載入中圖示」產生器,進入網頁之後就可以看到有許多小圖示。點選其中一個圖示後會顯示一個可以讓我們設定圖示和背景顏色的框框,設定好顏色後按下【Generate】便會產生新的小圖示,最後再點按【Download】下載做好的圖示。

LoaderGenerator.01

LoaderGenerator.02

Ajaxload 同樣也是一個 Loading Icon 產生器,在「Indicator type」下拉選單選擇一個載入中小圖示的樣式,然後分別在「Background color」以及「Foreground color」設定圖示和背景色,若要透明化背景的話則勾選【Transparent background】,按下【Generate it!】後會在下面顯示預覽圖,如果滿意的話再按下【Download it!】來下載做好的圖示。

Ajaxload