Happy Homepage

Saturday, November 06, 2010

Chrome Extensions - FastestTube 快速下載YouTube之各種格式影片

FastestTube是一個相當好用的擴充套件，支援Google Chrome、Firefox以及Internet Explorer等瀏覽器，可以輕鬆方便地下載YouTube上各種不同格式的影片。僅需按下"Download"按鈕，選擇下載格式，便可將YouTube上的影片永久保存在硬碟中。

以前在用Firefox瀏覽器時，我慣用的下載套件是Video DownloadHelper，它支援更多網站，除了影片之外還可批量下載相片，也是值得推薦的擴充套件。不過現在我只有偶爾會需要在YouTube下載影片，找來了FastestTube幫忙，真的是輕鬆上手沒話說，有需要的不妨試試。

另外要提醒，若遇上外嵌的YouTube影片沒有"Download"按鈕可用，請連回YouTube官網再進行下載。

<參考資料來源>
YouTube downloader tool - FastestTube!FastestTube – YouTube Video Downloader << Google Chrome Extensions
靖 ● 技場 - [Chrome、FF] FastestTube § 快速下載YouTube網站上的影片

Thursday, September 02, 2010

Blogger - 文章加密功能 JavaScript Encryption and Decryption

這次要介紹一個幫Blogger簡單加上「文章加密」功能的辦法。照慣例請進入「設計->修改 HTML」，在<head>與<head>之間加入以下程式碼引入此JavaScript解碼程式：

<script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>

之後只要到JavaScript Encryption頁面，輸入密碼(Key)和需加密的文字或HTML(Plain Text)，按下"Encrypt"即可在"HTML Code"中複製所需的程式碼，然後顯示如下結果：(此範例密碼為：1234)

Show encrypted text

除了這種最簡單的格式之外，Examples中也提供了一些其他顯示方式、多重密碼加密等程式碼，可以將產生的密文(Cipher Text)放入程式碼"encrypted text"內，就能輕鬆使用了，作者也貼心的提供Encrypt和Decrypt的快速連結，只要選取所要加密或解密的文字再點選超連結，就能自動幫您填入資料，接著再輸入密碼就能完成加密、解密的任務。

值得一提的還有，Javascript是在本機端執行的程式，所以網路伺服器上的資料為加密後的文件，沒有密碼是無法解讀的，而解密的動作只在本機端執行，解密後的文件絕不會出現在網路或伺服器上，因此確保了資料的機密與安全性。但另一方面來看，一旦您不小心忘記了密碼，其他人也就愛莫能助了。所以，下次要幫文章上鎖時，別忘了先作密碼備份，以免資料成為永遠的秘密～

<參考資料來源>
Vincent Cheung .ca - JavaScript Encryption and Decryption 2.0

Wednesday, September 01, 2010

Facebook Social plugins - Like Button 為Blogger加入Facebook說「讚」按鈕

透過一個簡單的「讚」，讓你的網誌與Facebook社群接軌～

想在Blogger中加入Facebook所提供的"Like Button"嗎？很簡單，只要到Facebook Social plugins->Like Button，透過簡單的幾項設定就可輕鬆產生iframe程式碼。利用「新增小工具：HTML/JavaScript」貼上程式碼就可以引入此功能。若是想要將這樣的功能主動放入每篇文章之中，並自動對應至該文章的網址，則可參照以下作法：

以Blogger為例，請先進入「設計：修改 HTML」，點選「展開小裝置範本」，並找到"<data:post.body/>"此段程式，將以下程式碼複製後放在"<data:post.body>"之前即可：

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;height=35&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px' allowTransparency='true'></iframe>

附帶一提，放在"<data:post.body>"之前或之後可決定按鈕要出現在文章頁首還是頁尾，這就根據您的喜好自行決定吧。

<參考資料來源>
Inside - 如何安裝Facebook Like按鈕在自己的網站上，讓網友們「讚」一下？
Digital Inspiration - Add Facebook Plugins to your Blog – Quick Guide
Browny Walking - 幫 Blog 換上新版的 facebook "Like" 按鈕
 WordPress 中文指南 - 為你的網誌加入Facebook推文按鈕（Like Button）

Add a Syntax Highlighter to your Blogger 程式碼語法強調器

這邊要介紹一個方便在Blogger中嵌入程式碼，並根據語法調整字體、顏色以方便閱讀的Javascript小程式：SyntaxHighlighter。

以Blogger為例，請先進入設計頁面「修改 HTML」，找到<head>與</head>之間放入以下程式碼：

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

其中"shCore.css"、"shCore.js"為必要檔，"shThemeDefault.css"為版面佈景主題，可以至CSS Themes挑選，"shBrushPhp.js"為支援PHP語法之Javascript程式，可依照需求到Bundled Brushes選擇需要掛載的程式，例如C++、C#、CSS等其他語言。

上述範例程式掛載檔案的路徑來自官方網站，版本會不斷更新，若有需要也可以自行下載後上傳至網路伺服器，或許運行速度能更順暢。

接著請到Blogger新文章的「修改 HTML」介面，將程式碼如以下方式加入：

<pre class="brush: php">
//Start of your PHP code
<php?
  echo "Hello world!";
?>
//End of your PHP code
</pre>

即可顯示如本篇文章程式碼顯示的效果，並可依照需要修改要參照的語法。值得注意的是，在<pre>與</pre>之間的程式碼因為會被當成HTML解譯，所以最好經過postable這個小程式的轉換，避開"<"、">"等字元，這樣一來就可以更方便地在Blogger貼上程式碼了。

<參考資料來源>
[cyberack} - Adding a Syntax Highlighter to your Blogger blog
Browny Walking - Blogger 上安裝 Syntax Highlighter

Tuesday, August 31, 2010

Sorting algorithm - Quicksort

Quicksort堪稱最知名實用性又高的排序演算法，操作方式稍微比較複雜一點：先從數列中隨機選取一個基準值(pivot)，通常會直接選用數列最末值，或是隨機選取後再將pivot放在數列最末端，接著由左至右和pivot作比較，凡是比pivot小的值就依序放在左側，直到做完一輪就可將數列區分為{<pivot, pivot, >pivot}，即決定了pivot所在的最終位置，然後再按照此方式繼續處理被分割的小區塊直到結束。此演算法又被稱之為partition-exchange sort。

Quicksort algorithm

由於其分割簡化數列長度的概念降低了系統運行的複雜度，因此可用更有效率的方式完成排序，是較為實用的選擇，底下這段影片也許就是最好的證明。

<Complexity performance>

Worst case: O(n²)
Best case: O(n*logn)
Average case: O(n*logn)

影片的最後有一段Bubble sort與Quicksort間的競賽，好奇誰會獲勝嗎？

<參考資料來源>
Wikipedia - Quicksort

Monday, August 30, 2010

Sorting algorithm - Insertion sort

介紹另一種和Bubble sort複雜度一樣，但實行上較有效率的一套排序演算法，稱為Insertion sort，如其名，它的排序概念是將陣列中每個元件按照大小依序放入已排序的陣列中，不斷執行後就可完成整個數列的排序，是一般人玩撲克牌「大老二」或「接龍」等遊戲時常用的排序法。

Insertion sort algorithm

<Complexity performance>

Worst case: O(n²)
Best case: O(n)
Average case: O(n²)

<參考資料來源>
Wikipedia - Insertion sort

Sorting algorithm - Bubble sort

Bubble sort是最簡單好懂的排序方式，雖然頂多被拿來當範例教學而非實用，但對於新手入門瞭解排序演算法是個不錯的開始，排序的觀念很簡單，就是「兩相比較，前者大於後者時互換位置」(以排序成遞增為例)。

Bubble sort algorithm

圖解是很好的說明方式，因為由左而右兩相比較的關係，每做完一次循環，都可以將未排序數列中的最大值移到最右側，但是相對較小值則只會往左一格，造成如圖中「龜兔賽跑」的情形，這就是為什麼Bubble sort利於理解卻不夠有效率的原因。

<Complexity performance>

Worst case: O(n²)
Best case: O(n)
Average case: O(n²)

<參考資料來源>
Wikipedia - Bubble sort

Sunday, August 29, 2010

PHPMailer - Send e-mail using Gmail SMTP server from PHP

PHP需透過SMTP(Simple Mail Transfer Protocol)外寄伺服器發送郵件，為了避免本地端的SMTP server被擋信，於是乎我很自然地想到利用Gmail的SMTP server來完成此任務。然而我沒有找到直接修改"php.ini"檔的好辦法，卻發現了這款程式：

PHPMailer 5.1

解壓縮後在"\PHPMailer\docs\use_gmail.txt"可找到這份範例程式碼，有幾個地方需要注意：

Gmail SMTP server相關設定如下，請修改使用者名稱與密碼：

<?php
require("PHPMailer/class.phpmailer.php");
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->SMTPSecure = "ssl";
$mail->Host = "smtp.gmail.com";
$mail->Port = 465;
$mail->Username = "Username@gmail.com";
$mail->Password = "Password";

其餘郵件相關的設定比較簡單易懂：

$mail->From = $Sender_email;
$mail->FromName = $Sender_name;
$mail->AddAddress($Receiver_email,$Receiver_name);
$mail->AddReplyTo($Sender_email,$Sender_name);
$mail->Subject = "My Subject";
$mail->Body = "HTML Body";

最後確認以HTML發送即可：

$mail->IsHTML(true);
if(!$mail->Send()) {
  echo "Mailer Error: " . $mail->ErrorInfo;
} else {
  echo "Message has been sent!";
?>

有了此範例就可以輕鬆做出客服留言頁面，只要把表單中的資料取出傳送即可。或者也可以參考PHPMailer-FE這款程式製作。值得一提的是，上述操作使用英文介面沒有問題，但遇到中文寄件者或是主旨時就會變成亂碼無法判讀，解決辦法其實也很簡單，只要補上一行程式碼，將編碼方式設定為UTF-8即可。

$mail->CharSet = "UTF-8";

<參考資料來源>
TECH MEAL - [GMAIL] - [PHP] - Send email using PHP with Gmail
梅問題教學網 - PHP教學－利用Gmail的SMTP製作線上客服系統
 我的網頁設計 - 實作PHPMailer郵件函式庫
 Stack Overflow - Send email using GMail SMTP server from PHP page

phpMyAdmin - (Cannot start session without errors...)

安裝完PHP，MySQL以及phpMyAdmin後，輸入正確的帳號密碼卻無法登入phpMyAdmin嗎？

顯示的錯誤訊息為："Cannot start session without errors, please check errors given in your PHP and/or webserver log file and configure your PHP installation properly"，使用不同的瀏覽器試試看，我之前遇到問題時用Chrome會一直跳回登入頁面，用IE則會出現錯誤訊息。

解決辦法為更改PHP之配置設定檔"php.ini"，修改前請先停止Apache伺服器的運作，

找到並修改："session.auto_start = 1"
若安裝路徑為"C:\PHP"，新增資料夾"C:\PHP\tmp"
修改設定路徑為：session.save_path="C:\PHP\tmp"
重新啟動伺服器即可正常登入

session.auto_start = 1
session.save_path = "C:\PHP\tmp"

<參考資料來源>
紀錄，是為了怕忘記！！ - 無法進入 PhpMyadmin 3.2.0 [Cannot start session without errors]

WAMP Server Setup

這裡將會整理一些架設網站相關的訊息，執行環境為WAMP(Windows+Apache+MySQL+PHP)，Apache為網站伺服器軟體，PHP(Hypertext Preprocessor)為伺服器端網頁程式語言，與資料庫系統MySQL一併使用可方便地建立起互動式網站環境。

目前我安裝的版本是：

Windows XP Home SP3
Apache HTTP Server 2.2.16
PHP 5.3.3
MySQL 5.1.49

MySQL資料庫的操作原本需要透過命令提示字元下指令管理，因此有人貼心地使用PHP開發了一套Web介面的MySQL資料庫管理程式，也就是phpMyAdmin，讓使用者可以更直覺地管理資料庫的內容。

phpMyAdmin 3.3.5

有了這些軟體，就能朝架設出功能齊全的動態網站繼續邁進啦。