分類
程式技術

在bootstrap下的影片responsive設定

在 bootstrap 下, image 可以很容易地使用 img-responsive class 進行 image 的 responsive 設定, 但是 embed 或是 video 如何處理呢?

在 bootstrap 3.2 起, 增加了好用的 embed-responsive 功能, 簡單說明語法如下:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

在外部建立一個 div, 包含了 embed-responsive 與 embed-responsive-16by9 or embed-responsive-4by3 class, 然後在 video 或 iframe 包含 embed-responsive-item class, 就可以順利地讓 embed video 能有完整地 responsive 功能了.

參考範例:
http://codepen.io/ncerminara/pen/zbKAD/

分類
PHP

使用PHP上傳圖片至Azure Storage供圖檔應用

使用 PHP 將圖檔上傳至 Microsoft Azure 雲端空間供圖檔應用, 有以下幾個步驟:

1. 建立 Azure 的 Storage Account , 並取得 key 與建立 container (也可以使用程式建立)

2. 安裝 Azure PHP Client: http://azure.microsoft.com/en-us/documentation/articles/storage-php-how-to-use-blobs/

2-1. 先安裝 Git
2-2. 依說明建立 composer.json 與下載 composer.phar (http://getcomposer.org/composer.phar), 並進行安裝: php composer.phar install
2-3. 完成程式下載

3. 在 php 程式碼中引入對應程式碼, 以上傳圖檔為例, 程式碼如下:

require_once 'vendor/autoload.php';
use WindowsAzure\Common\ServicesBuilder;
use WindowsAzure\Common\ServiceException;
use WindowsAzure\Blob\Models\CreateBlobOptions;

$connectionString = "DefaultEndpointsProtocol=https;AccountName=[storage account name];AccountKey=[storage access key]";

$blobRestProxy = ServicesBuilder::getInstance()->createBlobService($connectionString);

$content = fopen("myfile.jpg", "r");
$blob_name = "myfile.jpg";
$createBlobOptions = new CreateBlobOptions();
$createBlobOptions->setBlobContentType("image/jpeg");

try {
    //Upload blob
    $blobRestProxy->createBlockBlob("[container name]", $blob_name, $content, $createBlobOptions);
    echo "ok";
    echo "<img src='http://[storage account name].blob.core.windows.net/[container name]/".$blob_name."' />";
}
catch(ServiceException $e){
    // Handle exception based on error codes and messages.
    // Error codes and messages are here: 
    // http://msdn.microsoft.com/library/azure/dd179439.aspx
    $code = $e->getCode();
    $error_message = $e->getMessage();
    echo $code.": ".$error_message."<br />";
}

其中範例中的程式, 並沒有指定對應 blob 中的 Content-Type, 會使用預設的 application/octet-stream , 其實在網頁使用並無影響, 但若是直接連結會變成是下載的狀況, 比較不適合, 而且也應該是指定為正確的 Content-Type 較佳.

若有需要使用到 php 上傳圖檔至 Azure storage, 可以參考上面做法進行上傳應用.

相關資料:
Put Blob: https://msdn.microsoft.com/library/azure/dd179451.aspx

使用 ASP.NET 版本參考這篇:
http://blogs.msdn.com/b/ericsk/archive/2013/12/18/php-on-windows-azure-windows-azure-blob-storage.aspx

分類
系統技術

DigitalOcean便宜大碗的雲端主機服務

大型的雲端服務廠商, 不用多做介紹, 大家都知道了, 如 Amazon web service, Windows Azure, 等, 今天介紹這家是在海上的 DigitalOcean, 價格真的很便宜, 非常適合用來做 staging 或是 lab, 與開發環境.

記得從我的 ref 連結註冊, 你一開始可以多USD10, https://www.digitalocean.com/?refcode=c5fa03fa1aa6

特別的地方是他只有 VM, 以最低方案來看, 512MB RAM, 1Cores CPU, 20GB SSD, 1TB的資料傳輸, 每個月只需要5美元, 而以小時計是每小時只要 0.007美元, 真的超級划算的.

管理介面可以透過他的 web console 登入主機, 或用自己的 ssh 都可以, 和 aws 差異是沒有外部的防火牆或網管政策, 所以記得要自行用 iptables 或類似的內建防火牆進行保護.

若有線上雲端主機的需求, 尤其又是或測試或是開發應用的朋友們, 可以多加利用.

PS, 它的付款方式除了信用卡外, 還有 Paypal 更方便呢!

分類
好用軟體

免費好用的網站監控-Monitor.us

自己架的網站, 有時候沒有什麼監控, 導致中斷也不知道, 往往到下次自己在使用的時候, 或是檢視 GA報表的時候才發現, 的確很囧.

使用免費的工具來自己監控, 以利能第一時間取得資訊. 這個網站服務提供了免費的監控服務, 大家可以試看看. 早期使用的免費工具, 大多是限制監控點的數量, 只有一個, 十分不便, 當然, 服務也是為了收費, 所以有一些限制很正常, 不過這個 monitor.us 提供的更多, 以下是他的付費與免費的比較:

(以上內容引用自官方網站: http://www.monitor.us/en/about-monitor-us/monitis-premium-product )

主要差異在於監控的頻率與保存的時間, 而沒有監控數量的限制(上面的monitor location指的是測試發起的地點, 不是監控項的數量), 不過若是個人或一般小型商業應用, 應該是很足夠的.

除了 WEB(HTTP、HTTPS) 的監控外還有許多免費監控項目, 如下:
Uptime monitors: Ping、DNS、FTP、TCP、SSH、SIP、UDP、SMTP、POP3、IMAP、MySQL、SOAP
Server/Device monitors: CPU、Memory、Drive、Linux load、Process、Server events、SNMP、Ping、HTTP、HTTPS

其他付費的還有 Application monitors, Cloud monitors 等, 真的很豐富.

而管理介面的圖表也十分易讀好管理, 最棒的地方, 是他還有手機版本可供管理及查詢(還有push notification通知訊息)

Android 版: https://play.google.com/store/apps/details?id=com.monitorus.android.mobile
iOS版: https://itunes.apple.com/us/app/monitor.us-free-web-server/id508012934?mt=8

快來建立一個自己的監控的服務吧.

分類
WebTrend

付費空間無上限-Amazon CloudDrive

個人用雲端空間, 大家都很熟悉了.

像是 Dropbox, Google Drive, OneDrive, Box, Mega, Copy 等, 相信大家都不陌生, 不過有個挑戰者來了, Amazon CloudDrive.

先來看看各家方案:
Dropbox: https://www.dropbox.com/plans
免費 2GB/每月USD9.99 1000GB

Google Drive:
免費 15GB/每月USD1.99 100GB/每月USD9.99 1TB

OneDrive: https://onedrive.live.com/about/zh-tw/plans/
免費 15GB/每月NTD60 100GB/每月NTD219 1TB

Box: https://www.box.com/pricing/
免費 10GB/每月USD10 100GB

Mega: http://mega.and1.tw/zh_tw/
免費 50GB/每月NTD399 500GB/每月NTD799 2TB/每月NTD1199 4TB

Copy: https://www.copy.com/page/home;section:plans
免費 15GB/每月USD4.99 250GB/每月USD9.99 1TB

再來就是有趣的 Amazon CloudDrive: https://www.amazon.com/clouddrive/home
沒有免費/每年USD11.99 5GB+Photo無限/每年USD59.99 無限

真的是很破壞性的價格, 當然還有大陸的許多空間沒有列入, 不過以上面個人使用的狀況來看, Dropbox 和 Google Drive 、One Drive、Box都有方便的同步工具, 而目前 Amazon Cloud Drive 僅有上傳工具, 目前尚沒有好用的同步工具.

但就價格來看, 真的是很破壞性的價格, 但使用在工作上, 似乎又不是那麼便利.

若是後面它能有更棒的同步工具, 相信會有另一番競爭力.

繼續閱讀:
http://www.bnext.com.tw/article/view/id/35767

分類
Database

Mysql的字串轉型問題

Mysql 在字串欄位比對上, 有個奇妙的狀況. 當然, 在正常一般狀況下不太容易發生.

某欄位 f1 為 varchar 或 char , 而在 where 條件下, 使用了

where f1=’sometext’

這樣沒有問題.

但若是使用了

where f1=0

會發生什麼事呢? 結果是全部成立.

根據 f1=0 來看, mysql 會先將 f1 欄位轉為數字, 而將字串轉為數字, 在 mysql 中, 會是 0 的結果, 導致會全部成立. 檢查以下語法:

SELECT cast( 'test string' AS SIGNED )

結果會是 0 , 也就解開了這個問題.

另外可以參考一下 cast 的語法:
http://dev.mysql.com/doc/refman/5.6/en/cast-functions.html

其 case ( data as type ) 中的 type, 可以為以下幾種:
BINARY[(N)]
CHAR[(N)]
DATE
DATETIME
DECIMAL[(M[,D])]
SIGNED [INTEGER]
TIME
UNSIGNED [INTEGER]

供各位在不小心, 使用了等於零在判斷條件時, 發生問題的參考.

分類
WebTrend

台灣水庫蓄水量

台灣水庫蓄水量在這裡: http://water.taiwanstat.com/

資料來源是從經濟部水利署來: http://www.wra.gov.tw/

以視覺化的方式來將資料呈現出來, 很棒的作法, 也讓大家能快速理解水庫蓄水總量, 存量資訊.

大家可以多多利用.

分類
程式技術

如何取得Google Plus的user avatar(大頭圖)

繼上次 facebook 取得大頭圖 (link)後, 這次來說明取得 Google Plus大頭圖的方式.

需要先取得一個 Google Plus API 的 key (目前共有4種, server、browser、android、ios), 依實際需求來使用, 若要方便測試, 可以建立 server api key, 並設限 ip 0.0.0.0/0 全開放, 或是 browser api key 並設限為不限網域全開放.

接下來我們將使用的 Google Plus Api 是這個: plus.people.get, 參考以下網址:
http://developers.google.com/apis-explorer/?hl=zh_TW#p/plus/v1/plus.people.get

由於我們要取得大頭圖, 所以 fields 是使用 image, 可以獲得 api 存取需要以下網址:
https://www.googleapis.com/plus/v1/people/{user_google_plus_id}?fields=image&key={YOUR_API_KEY}

接下來訪問這個 url:
https://www.googleapis.com/plus/v1/people/106189723444098348646?fields=image&key={YOUR_API_KEY}

就可以取得如下回應:

{
 "image": {
  "url": "https://lh3.googleusercontent.com/-Y86IN-vEObo/AAAAAAAAAAI/AAAAAAADO1I/QzjOGHq5kNQ/photo.jpg?sz=50",
  "isDefault": false
 }
}

這個大頭圖的 url 就會出現囉. 大家猜一下是哪位呢?

參考資料:
http://stackoverflow.com/questions/17962759/is-it-possible-to-create-an-avatar-profile-picture-link-from-a-google-id
https://developers.google.com/+/api/oauth?hl=zh-tw

分類
好用軟體

Flickr Slidershow

想要秀一下在 flickr 上的相片嗎?

使用好用的 flickr slidershow 功能, 像是這個: http://www.flickrslideshow.com/ , 只需要填入 URL of user 或是 set, 就可以產生 embed 的 flickr 相簿. (使用 flash)

另外像是這個: http://flickrit.com/ , 則是填入關鍵字、標籤、相簿代碼、使用者或是群組代碼, 即可產生 embed 的 flickr 幻燈片. (使用 iframe , 不使用 flash)

分類
程式技術

Facebook Avatar – 大頭圖取得

可以利用 Facebook 的 Graph API 進行即可.

facebook avatar api:
http://graph.facebook.com/[user-id]/picture default: 50×50

http://graph.facebook.com/[user-id]/picture?height=100&width=100 for 100×100

其中的 [user-id] 直接拿驗證後的 fbid 值即可, 原始的 fbid 也是可以正常使用的, 另外有設定自訂名稱的亦可.

參考資料: https://developers.facebook.com/docs/graph-api/reference/v2.2/user/picture?locale=zh_TW

例如:

http://graph.facebook.com/4/picture
http://graph.facebook.com/zuck/picture
http://graph.facebook.com/4/picture?height=300&width=300