Hilite.me – 將程式碼轉換成 HTML(高亮化)

如果我們想將一段程式源始碼貼在網站上和別人分享的話,會發現原本在編輯器裡顯示彩色的源碼,貼在網頁上就會失去高亮,變成單一顏色。這時我們就須要將源碼轉換成帶有顏色的 HTML,再將這段 HTML 貼在網頁上就可以顯示高亮化的源碼了。

Hilite.me 這個網站能將各種語言的程式碼轉換成 HTML,並且保持原來的排版格式。進入網站之後將源碼貼在「Source code」裡面,然後選擇程式語言以及源碼高亮樣式,之後再按下「Highlight!」就能將源始碼轉換成 HTML 了。我們可以在下面預覽高亮化後的源始碼。

Hilite.me 網址

hilite.me

Round My Pic 將圖片圓角化 [線上工具]

Round My Pic 這個免費的線上工具可以讓我們很方便地將任何圖片加上圓角效果(圓角化)。將加上圓角的圖片放在部落格上或是當個人頭像使用看起來會蠻有質感的。

Round My Pic 網站資料

Round My Pic 使用介紹

進入 Round My Pic 網頁之後,按下「Upload Image」右邊的「瀏覽…」鈕,選擇要圓角化的圖片;按下「More options」可以讓我們自訂圖片的大小以及圓角尺寸;如果只是單純想圓角化而不加入斜角效果的話,必須勾選「Without Bevel Effect」;最後按下「Round it Now」就可以開始替圖片進行圓角化了 ▼

Round My Pic - 選擇圖片並圓角化

完成後,按下「Download」便能下載圓角化後的圖片了(下圖還有加入斜角效果)▼

Round My Pic - 下載圓角化後的圖片

via MakeUseOf.com

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

製作炫麗的背景圖片不求人 – Repper

在製作網頁的時候,如果不想讓背景太過單調的話,會選擇一些背景圖片來搭配。不過,背景素材除了在網路上找現成的,或是從無到有自己畫之外,還有什麼辦法可以做出來?

背景素材不只在網頁設計時才用得到,像簡報、繪圖、平面設計、或是現在很多網站都允許會員上傳個性化圖像,都可以將背景圖片應用在這些地方。

Repper 是一個既有趣又實用的線上「圖案」、 「圖樣」、「重覆背景」產生器,它會先擷取圖片中某個固定的範圍,再將該範圍的圖案水平、垂直地複製開來,如此就會變成一個炫目的背景。Repper 網站本身已經提供一些圖片讓我們產生圖樣,不過我們可以自己上傳要製作圖樣(pattern)的圖片(image),這樣就能做出一個獨一無二的背景圖了。

進入 Repper 的圖案產生器之後,它會隨機給我們一張圖片。仔細觀察一下,圖片中有一個半透明的四方形小框框,被它框住的範圍就是產生圖案的基底。我們可以用滑鼠或是鍵盤上面的方向鍵來移動這個小框框,讓它擷取不同位置的圖案。

如果要改變小框框的大小,只須點它一下,然後再拖曳小框框邊緣的某一個節點就可以了。網頁的右上角,如下圖所示,有四個工具圖示:

  • pattern type:這邊有兩種類型的圖案產生規則,選擇其中一個類型,下面馬上就會顯示該類型的效果。
  • random image:它會從網站的圖片庫隨機提供一個圖片素材給我們。
  • upload image:我們可以從電腦上傳一張圖片,然後用它來產生圖案。
  • save pattern:圖案產生出來之後,就能按下【save pattern】,網站會給我們一個網址,或是讓我們將圖案下載到電腦保存。

Repper

以下幾張圖案是從 Windows 7 的標準桌面產生出來的,看起來還蠻漂亮的:

Pattern.01

Pattern.02

Pattern.03

Pattern.04

Pattern.05

除了可以產生出炫麗的背景圖之外,如果運用得當的話,當然也可以做出很噁心的背景圖,就像下面這張(取自 Repper):

Pattern.06

3 個「圖示(icon)搜尋器」讓你輕鬆找到合用的圖示

自從作業系統進入了「圖形化使用者介面」的時代以後,使用者就不必再記一堆乏味難懂的指令,而是使用滑鼠,在程式介面上點一點、按一按就可以讓電腦聽令於我們,執行我們希望它做的事。

在圖形化的系統裡,圖示一直扮演著很重要的角色,因為它能讓使用者在看見圖示的同時就能產生「按下這東西,電腦就會做什麼事」的聯想。以早期的 Windows 作業系統為例,當進入桌面的時候我們可就以看到代表各個功能的圖示:像是「我的電腦」、「我的文件夾」、「網路芳鄰」和「資源回收筒」等等…。想像一下,如果桌面只有一堆「純文字」的捷徑,那麼操作電腦的效率是不是就會下降許多?

其實不只在作業系統裡找得到圖示的應用,網頁、應用程式,甚至是報告、文件都可以運用圖示讓來讓操作介面變得更直覺與更人性化,文件、報告內容也會增色不少。當然,前提是使用得當的話。

今天要來介紹三個我個人覺得值得推薦以及收藏的「圖示收尋引擊」。

第一個是「Icon Finder」,這是幾天前,在噗浪上看到許多轉噗介紹而認識的。圖示搜尋器的使用方法跟一般搜尋器沒兩樣,輸入要找的圖示關鍵字(只限於英文)之後,網站就會列出符合該關鍵字的圖示。Icon Finder 有一個特別的「圖示大小」過濾功能,利用位於搜尋結果上面的「拉 bar」,我們可以指定只顯示特定大小的圖示。

IconFinder

SearchIcons.01

接下來這兩個搜尋器是我在轉噗介紹 Icon Finder 的時候,引出一位朋友補充推薦而認識的。

IconLet

SearchIcons.02

IconLook

SearchIcons.03

免安裝就能用的網頁版 MSN – MSN Web Messenger

在當今高度資訊化的社會裡,即時通訊軟體已經成為線上聯絡、溝通的必要工具了。之前有介紹過免安裝就可以登入使用的「線上版 Yahoo! 即時通」。今天來介紹一下網頁版的 MSN。

MSN Web Messenger 讓我們在沒有安裝 MSN 的電腦裡只用瀏覽器就可以上線跟朋友哈啦、交換訊息。如果出門在外用到一台沒有安裝 MSN 的電腦,但是又剛好有急事要與 MSN 裡的朋友聯絡,這時網頁版的 MSN 就可以幫我們解決燃眉之急。

不過,MSN Web Messenger 只提供基本的交談功能,沒有辦法像安裝在電腦裡的 MSN 一樣可以使用視訊聊天、檔案傳送或是離線訊息的功能。

MSN Web Messenger 網址:http://webmessenger.msn.com/

MSN Web Messenger 使用介紹及擷圖:

1. 一進入網頁之後點選【開始使用 MSN Web Messenger】就可以開始使用,如果要用其它狀態登入的話可以在上面的【登入方式:】選擇。

MSNWebMessenger.01

2. 如果按下【開始使用 MSN Web Messenger】沒有反應的話,請檢查彈出視窗是否被瀏覽器阻擋下來。

MSNWebMessenger.02

3. 正在登入的畫面…

MSNWebMessenger.03

4. MSN Web Messener 主要視窗。因為無法傳送離線訊息,所以如果點選離線聯絡人的話並不會跳出交談視窗。

MSNWebMessenger.04

5. 交談視窗。以下的對話內容是自問自答,可以看到網頁版的 MSN 支援字型選擇以及表情符號。

MSNWebMessenger.05

6. 對方離線後如果繼續再傳訊息的話就會出現紅框中的錯誤訊息。

MSNWebMessenger.06

找出最符合你的口味的搜尋引擊 – Blind Search

最近微軟推出號稱新一代的搜尋引擊 – Bing.com (在中國稱為「必應」),可以看出微軟一直沒有放棄搜尋引擊這一塊市場的開發。以 Google 為競爭對手而推出的 Bing 是否真的會打敗 Google,這就有待市場以及時間來考驗。

就像選擇應用軟體一樣,網路使用者在搜尋資料的時候也會有一個較為偏愛的搜尋引擊。以我來說,Google 是使用次數最高的搜尋引擊,因為它的使用方式、搜尋結果以及內容的排版比較符合我主觀的需求。另一方面可能也是因為除了 IE 以外的瀏覽器,都習慣把 Google 設定為預設搜尋引擊,所以對於幾乎不用 IE 的我來說,也就漸漸習以為常地只用 Google 找網路上的資料。

不過,搜尋引擊並非 Google 不用,偶而在 Google 不能提供符合需求的搜尋結果時就會換個搜尋引擊試試。通常在 Google 找不到想要的資訊時就會轉向 Yahoo! 搜尋,而現在又多了一個想要幹掉 Google 的 Bing,如果不滿意 Google 搜尋結果的話,它應該很有機會成為我的第二首選。

所以,搜尋引擊並沒有哪一個最好,只要能夠找出最符合自己需求的工具即可。

今天來介紹一個與搜尋引擊有關的有趣應用:Blind Search

Blind Search 它可以幫我們找出哪一個搜尋引擊提供的結果最符合我們的口味。只要在 Blind Search 輸入要查詢的關鍵字之後,它就會顯示出三個搜尋結果欄,每一欄各代表 Google、Yahoo! 以及 Bing 所搜尋到的結果,不過一開始它並不會讓你知道每一欄是由哪一個搜尋引擊提供的。在每一欄上面各有一個「vote for this search engine」按鈕,把票投給你認為是最好的結果之後,每一欄的搜尋引擊 logo 才會顯現出來,讓你知道是 Google、Yahoo! 還是 Bing 才是你最麻吉的朋友。

Blind Search 是由國外網友 Michael Kordahi 隨興開發出來的實驗性網站。根據網站首頁的說明,Blind Search 曾經會顯示網友投票的統計結果,不過因為有人狂灌水,所以暫時不公開統計數據。另外他也說了,他目前在微軟任職,但是這個網站的成立與微軟並沒有任何關係。

我自己是覺得這個網站較屬於玩票性質,實用性不大。畢竟每一個搜尋引擊都會有特定的使用族群,在搜尋精準度差不多的前提下,誰也不敢(能)說它就是最大、最好的搜尋引擊。

Blind Search 網址:http://blindsearch.fejus.com/

Blind Search 網站擷圖:

BlindSearch.01

BlindSearch.02

如何重新命名 Google Reader 的資料夾名稱?

–更新–

Google Reader 現在已經有重新命名資料夾的功能,因此不需要再透過本舊文的複雜方式來設定了。
按照下圖示範,先點選要命名的資料夾,再選擇【資料夾設定】,最後點選【重新命名資料夾】,然後輸入新的資料夾名稱就可以了。

–以下為舊文–

Google Reader 是一個服務品質穩定、相當好用的線上 RSS 閱讀器,有在長期追蹤本部落格的讀者應該都已經聽膩了這個論調。

不過 Google Reader 其實還有進步的空間 (實際上它的確不停地在進步),我在整理 RSS 訂閱項目的時候就覺得沒有資料夾的重新命名功能實在很不方便。每一次在建立新資料夾的時候就必須思考再三,很怕名稱一旦定好就沒有反悔餘地,將來要改變資料夾名稱似乎就成了一件不可能的事,而直接地限制住了整理訂閱項目的自由度。

雖然不能直接重新命名資料夾,但在這裡我想分享一個小技巧,透過這個技巧來達到相同目的。

簡單地說,就是建立一個新名稱的資料夾,然後將舊資料夾裡的訂閱項目一次搬移到新資料夾裡,再將舊資料夾刪除。雖然這個方法是土了點,但這是目前我覺得比較折衷的一個解決方法。

在這裡我要示範將「軟體、網路、資訊 (其他)」這個資料夾名稱修改為「軟體、網路、資訊 (綜合)」。以下就用畫想擷圖一步一步的解說。乍看之下步驟有點繁多,但是只要熟練之後,將來要換資料夾名稱只需幾秒鐘就可以完成。

1. 點選 Google Reader 右上角位於帳號 E-Mail 右邊的【設定】。

HowToRenameTheLabelInGoogleReader.01

2. 進入到設定頁面之後點選【訂閱】。

HowToRenameTheLabelInGoogleReader.02

3. 在這裡會選示所有的訂閱項目。在頁面右上角有一個文字欄位,輸入舊資料夾名稱可以將屬於舊資料夾的訂閱項目篩選出來。

HowToRenameTheLabelInGoogleReader.03

4. 篩選出舊資料夾裡的訂閱項目之後,點選第一個項目右邊的【變更資料夾…】下拉選單→再點選【新資料夾】。這麼做的用意是要建立一個新的資料夾。

HowToRenameTheLabelInGoogleReader.04

5. 輸入新資料夾名稱之後按下【OK】

HowToRenameTheLabelInGoogleReader.05

6. 建立好新資料夾之後,點選訂閱項目上面的【全部 XX 個訂閱】,這時所有舊資料夾的訂閱項目會自動被選取,然後再點選右邊的【更多動作…】下拉選單,再點選新建立的資料夾。到目前為止我們已經完成了將訂閱項目從舊資料夾到新資料夾的搬移。

HowToRenameTheLabelInGoogleReader.06

7. 接下來我們就可以把無用的舊資料夾刪除。點選上面的【資料夾和標記】。

HowToRenameTheLabelInGoogleReader.08

8. 點選舊資料夾右邊的刪除圖示

HowToRenameTheLabelInGoogleReader.09

9. 在確認刪除對話框按下【確定】。OK,資料夾的重新命名到此完成!

HowToRenameTheLabelInGoogleReader.10

藉由圖片來啟發配色靈感 – Colors Pallete Generator

CSSDrive.ColorsPalleteGenerator

Colors Pallete Generator 是一個色板產生器,它會分析使用者上傳的圖片並且以此為基礎產生一個調色板。調色版會包含圖片裡面的主要顏色,而且還會另外顯示三個不同亮度的色板 (亮、普通、暗)。

Colors Pallete Generator 支援的圖片格式有:png, .gif, .jpg 以及 .jpeg,最大的圖片檔案大小則是 1 MB。

色板產生之後網站還提供了 CSS 以及 Photoshop 色票檔 (.aco) 下載。對於想要藉由圖片顏色來啟發配色靈感的人來說,Colors Pallete Generator 是一個很實用的工具。

網址:http://www.cssdrive.com/imagepalette/index.php