顯示具有 網誌技巧 標籤的文章。顯示所有文章

2011-09-22

海量的「Picasa 網路相簿」：相片大小低於 2048x 2048 像素，就不會計入免費儲存空間配額

筆者的部落格使用的是： Google Blogger。

圖片與影片自然也都是存放在 Google 所提供的服務上。

以照片為例，使用就是「Picasa 網路相簿」。

原本，「Picasa 網路相簿」是規定相片大小需要低於 800x 800 像素，影片長度少於 15 分鐘，才不會計入免費儲存空間配額。

如今，若是使用 Google+ 後，一舉提升為：相片大小低於 2048x 2048 像素，影片長度少於 15 分鐘，就不會計入免費儲存空間配額。

目前規定：
提供 10,000 相簿，每本相簿的相片和影片數量上限：1,000。
折算下來，可以存放個一千萬張照片。

加入 Google+ 的好處真是不錯...^_^

以下為原檔轉換為符合檔案大小的例子：

本次使用的是：2048 * 1361

原圖是：

尺寸：4912 * 3264
寬度：4912 個像素
高度：3264 個像素
水平解析度：350 dpi
垂直解析度：350 dpi
位元深度：24

檔案大小：4.81 MB (5,046,272 位元組)

--01_原圖尺寸

使用 XnView 的「批次轉換」後：

尺寸：2048 * 1361
寬度：2048 個像素
高度：1361 個像素
水平解析度：350 dpi
垂直解析度：350 dpi
位元深度：24

檔案大小：1.79 MB (1,884,160 位元組)

--02_轉檔後尺寸

--
筆者使用的是 XnView「批次轉換」

--03_批次轉換

--04_設定品質_最高

--05_調整大小_新增

「Picasa 網路相簿」

也能夠顯示照片 EXIF 資訊，以及照片的經緯度等資料。

EXIF（Exchangeable image file format）是可交換圖像文件的縮寫，是專門為數位相機的照片設定的，可以記錄數位照片的屬性信息和拍攝數據。

免費儲存空間限制

(1) 已申請 Google+

只要相片大小低於 2048x 2048 像素，影片長度少於 15 分鐘，就不會計入免費儲存空間配額。

自動調整大小
Google+ 會自動將所有上載的相片長邊調整為 2048 像素，並且不會計入免費儲存空間配額。

而所有上載到「Picasa 網路相簿」的相片一旦超過免費的大小上限，就會計入 1 GB 的免費儲存空間。
您的儲存空間快要用完時，您上載到「Picasa 網路」的相片只要超過大小限制，系統就會自動將相片的長邊調整為 2048 像素。

(2) 尚未申請使用 Google+

免費儲存空間限制

只要相片大小低於 800x 800 像素，影片長度少於 15 分鐘，就不會計入免費儲存空間配額。
自動調整大小

所有上載的相片一旦超過免費的大小上限，就會計入 1 GB 的免費儲存空間。
您的儲存空間快要用完時，您上載到「Picasa 網路」的相片只要超過大小限制，系統就會自動將相片的長邊調整為 800 像素。

--01_免費儲存空間限制

帳戶上載限制

請務必留意下列的帳戶限制：

(1) 相片大小上限：圖片一律不能超過 20 MB 及 5000 萬像素。

(2) 影片大小上限：上載的單一影片大小一律不能超過 1GB。

(3) 網路相簿數量上限：10,000 本

(4) 每本網路相簿的相片和影片數量上限：1,000

(5) 總儲存空間：「Picasa 網路相簿」可儲存 1 GB 的相片和影片。大小未達特定限制的檔案不會計入這個配額限制。

02_帳戶上載限制

參考資料：
帳戶上載限制
http://picasa.google.com/support/bin/answer.py?answer=43879

免費儲存空間限制
http://picasa.google.com/support/bin/answer.py?answer=1224181

2010-10-07

SyntaxHighlighter 3.0.83 與 Google Blogger

在撰寫網誌時，若是有使用到程式碼，可能多半會遇到將程式碼貼到網誌時，版面是一團混亂，目前筆者是使用 SyntaxHighlighter 這個免費的 Java Script 工具。

這個是在客戶端的瀏覽器上執行，所以只要瀏覽器有支援，應該都可以正確顯示。

關於 SyntaxHighlighter

日期：2010/07/02
截至目前為止 SyntaxHighlighter 最新的版本：3.0.83。

新增加的功能：

Dynamic Brush Loading、No Flash Copy To Clipboard、Code Selection、Block Title、CommonJS、Improved CSS support等。

軟體授權方式：
在 SyntaxHighlighter 2.0 以上的版本，其授權模式採取 Donationware。

建議各位若要使用 SyntaxHighlighter 2.0 以上的版本時，記得要給作者實質上的鼓勵。

請參考以下的說明：
Please donate to keep development active!
GNU Lesser General Public License
GNU較寬鬆公共許可證

關於複製區塊內的程式碼方式，也變得十分簡潔，方法如下：

1. 在程式碼區塊內，滑鼠左鍵連點兩下。

2. 就可以自動全部選取此區塊內的程式碼。

3. 若要複製，請搭配快捷鍵：Ctrl+C。

在 SyntaxHighlighter 3.0.83 版本上，一改 SyntaxHighlighter 2.x 版本上被垢病的flash執行效能、額外的圖示等問題。

請注意：
SyntaxHighlighter 3.0.83 版本與 SyntaxHighlighter 1.5.1 在張貼程式碼所使用的區塊寫法是不同。

這在升級前，請您務必留意。

以下以 Google 的 Blogger 搭配使用 SyntaxHighlighter 為範例：

工作1：修改範本來使用 SyntaxHighlighter

步驟01. 進入「Blogger」，點選「設計」\「修改 HTML」。
步驟02. 在「修改範本」區域，搜尋到標籤 <head> 。

步驟03. 貼上以下的範例程式碼：

<!-- 設定載入 shCore.css 與  shThemeDefault.css -->
<link href="http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shCore.css" rel="stylesheet" type="text/css"/>
<link href="http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shThemeDefault.css" rel="stylesheet" type="text/css"/>

<!-- 設定需要載入的核心檔案 shCore.js -->
<script src="http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shCore.js" type="text/javascript"/>

<!-- 設定需要載入的程式語言檔案  -->
<script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushCSharp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushJScript.js' type='text/javascript'/>
<script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushSql.js' type='text/javascript'/>
<script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushVb.js' type='text/javascript'/>
<script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushXml.js' type='text/javascript'/>

<!-- 設定啟用 highlighter   -->
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true; 
SyntaxHighlighter.all()
</script>

步驟04. 點選「儲存範本」。

提醒您：

1. 請將 http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/ 置換為您所使用的網頁位址。

若不介意的話，或許可以直接引用本站的範例碼來使用，也是可行的方法。

關於可以使用程式語言，請參考以下的資料，增加或是置換所需的檔案名稱(File name)：
Bundled Brushes

2. 因為筆者使用的是 Blogger，所以需要設定以下的參數：

SyntaxHighlighter.config.bloggerMode = true;

工作2：張貼程式碼的方式

步驟1. 爾後在編寫網誌，在張貼程式碼時，注意事項如下：

1. 請使用標籤 <pre> ...</pre> 區塊來存放程式碼。
2. 在屬性 class 部分，請填入「brush: 程式語言代碼」，其中「程式語言代碼」是指「Brush aliases」的名稱。

支援的「程式語言代碼」 Bundled Brushes

請範例如下：

 
 您的程式碼請貼此處。

若您的程式碼，有使用到html ，或許可以使用以下的方式來轉換：
Postable | Making your code friendly

筆者僅使用了部分功能，有興趣，請參考官方網頁的說明。
SyntaxHighlighter What's new

相關準備工作：
1. 利用Google的「協作平台」，建立「檔案櫃」，可以來存放存放網頁、相關檔案等。
Google 協作平台
請參考以下的圖示：

2. 下載 SyntaxHighlighter

參考資料：
SyntaxHighlighter

SyntaxHighlighter 參數 Configuration

在 Google Blogger 中使用 SyntaxHighlighter 1.5.1

2008-03-05

Windows Live SkyDrive - 全新網路硬碟

Windows Live SkyDrive - 全新網路硬碟

本來還在想要用什麼方式來分享檔案，或是在部落格上放參考檔案等等。雖然網路上有很多的免費空間，但是卻都有不少限制，像是：
單一檔案大小、檔案保存時間等等一堆問題...唉，免費的真的不容易有好東西。
如今 Micorosoft 推出的 Windows Live SkyDrive - 全新網路硬碟，這個還不錯耶。

正式名稱：Windows Live SkyDrive
中文名稱：微軟網路硬碟
服務網址：http://skydrive.live.com
上線時間：2008/2/21
註冊帳號：可使用Windows Live Messenger、Hotmail、Passport Network 等 Windows Live ID 或新申請 Windows Live ID
儲存空間：5GB　
單一檔案：50MB
檔案類型：無限制，可放任意檔案，可存放MP3、圖片、影片、文件、小檔案等。支援中文檔名
下載限制：無限制
流量限制：無限制
拖曳上傳：可以，需按指示安裝ActiveX，將可使用更直觀的操作介面
檔案分享：可新增資料夾及自訂分享權限
分享語法：提供 iframe 式的 HTML 程式碼方便貼入各大部落格與網站
檔案外連：提供外連的連結網址與貼圖的連結網址

參考資料：
Windows Live SkyDrive - 全新網路硬碟，介面直觀好容易
http://2008skydrive.spaces.live.com/default.aspx

Windows Live SkyDrive - 分享檔案直接嵌入部落格，精美又便利。
http://2008skydrive.spaces.live.com/blog/cns!BFFB65DE20EDC79B!223.entry

注意事項：

若要安裝 ActiveX 控制項，電腦的作業系統必須是 Windows XP with Service Pack 2 (SP2)、Windows Vista、Windows Server 2003 或 Microsoft Windows 2000 with Service Pack 3，而網際網路瀏覽器必須是 Microsoft Internet Explorer 6 或更新版本。
禁止上載受著作權保護或猥褻的內容。
檔案大小目前限制為 50 MB。
目前您無法移動檔案至其他資料夾。如果您希望將檔案放到其他資料夾，您必須重新上載檔案至該資料夾。

2007-12-25

在 Google Blogger 中使用 SyntaxHighlighter 1.5.1

更新日期： 2010/10/07

在 Google Blogger 中使用 SyntaxHighlighter 3.0.83
http://sharedderrick.blogspot.com/2010/10/google-blogger-syntaxhighlighter-3083.html

更新日期：
2009/05/25
SyntaxHighlighter 作者已經更新到版本為 2.0.320 。

請參考以下的網址：
SyntaxHighlighter - Alex Gorbatchevhttp://alexgorbatchev.com/wiki/SyntaxHighlighter
但在 SyntaxHighlighter 2.0 以上的版本，其授權模式採取 Donationware。建議各位若要使用 SyntaxHighlighter 2.0 以上的版本時，記得要給作者實質上的鼓勵。請參考以下的網址：
SyntaxHighlighterDonate
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate

Donationware
SyntaxHighlighter is donationware. If you are using SyntaxHighlighter 2.0 on your site or including it in your product, please donate.

Retrieved from http://alexgorbatchev.com/wiki/SyntaxHighlighter

在撰寫網誌時，若是有使用到程式碼，可能多半會遇到將程式碼貼到網誌時，版面是一團混亂，目前筆者是使用 SyntaxHighlighter 這個免費的 Java Script 工具。這個是在客戶端的瀏覽器上執行，所以只要瀏覽器有支援，應該都可以正確顯示：

下載網址
dp.SyntaxHighlighter ， Version: 1.5.1
http://code.google.com/p/syntaxhighlighter/

作者的網址：
http://www.dreamprojections.com/syntaxhighlighter

筆者以在 Blogger 中使用 SyntaxHighlighter 來介紹：
步驟1. 先去 SyntaxHighlighter 下載檔案。
步驟2. 到 Google Pages 申請免費的網頁存放空間。

http://pages.google.com/

因為 Google 已經停止 Google Pages。請改用其他方式來存放相關的程式碼，例如，使用 Google Code 等等。

Google Page 提供數項功能：
A. 提供免費的工具，協助您製作網頁、發行網頁。
B. 目前是提供 100 MB 的空間可供使用。
C. 提供多樣的佈景主題、版面等等可以自選。
...
請參考此處說明：http://pages.google.com/-/about.html#using

步驟3. 將檔案解開來後，在 1.5.1 版本中，解壓縮後，將會有 3 個資料夾；請將以下的檔案，全部上傳到先前申請 Google Pages 的空間上：

A. Scripts 資料夾內的程式(*.js 與 *.swf) 。
B. Styles 資料夾內的 SyntaxHighlighter.css。
步驟4. 登入您的 Blogger。
步驟5. 點選[版面配置]\[範本]\[修改 HTML]。
步驟6. 請以下的範例，複製到 </body> </html> 標籤的前面。

<link href="http://DerrickLaLa.googlepages.com/SyntaxHighlighter.css" type="text/css" rel="stylesheet"></link>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shCore.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushCpp.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushCSharp.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushCss.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushDelphi.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushJava.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushJScript.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushPhp.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushPython.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushRuby.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushSql.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushVb.js"></script>
<script language="javascript" src="http://DerrickLaLa.googlepages.com/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf="http://DerrickLaLa.googlepages.com/clipboard.swf";
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

提醒您：
1. 請將 DerrickLaLa.googlepages.com 置換為您所申請的網頁空間。
2. 若是 Google Page 停止申請，您若不介意的話，或許可以直接引用本站的範例碼來使用，也是可行的方法。
或是您可以連線 SyntaxHighlighter 作者提供的網址：http://alexgorbatchev.com/wiki/SyntaxHighlighter:Hosting

裡面由 1.5.1 版本到目前最新的版本 2.0.320 等都有提供，請自行參考。

但此網站的網路頻寬部分，筆者也不清楚，此外，若您要使用 2.0 以上的版本，其授權模式採取 Donationware。建議各位若要使用 SyntaxHighlighter 2.0 以上的版本時，記得要給作者實質上的鼓勵。請參考以下的網址：SyntaxHighlighter/Donatehttp://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate

步驟7. 在撰寫網誌時，若是需要貼上程式碼時，可以搭配以下的使用方式：

<textarea class="languages" name="code" rows="50" cols="70">
... 需要呈現的程式碼，請放置於此 ...
</textarea>

或是

<pre class="languages" name="code">
... 需要呈現的程式碼，請放置於此 ...
</pre>

其中 languages 部分，目前所支援有：
C++、C#、CSS、Delphi、Java、Java Script、PHP、Python、Ruby、Sql、VB、XML/HTML 等等。
請參考以下列表，將指定的語言之 Aliases 置換到 languages 的位置上。

支援的語言

Here's a list of supported languages and their aliases:

Language	Aliases
C++	`cpp`, `c`, `c++`
C#	`c#`, `c-sharp`, `csharp`
CSS	`css`
Delphi	`delphi`, `pascal`
Java	`java`
Java Script	`js`, `jscript`, `javascript`
PHP	`php`
Python	`py`, `python`
Ruby	`rb`, `ruby`, `rails`, `ror`
Sql	`sql`
VB	`vb`, `vb.net`
XML/HTML	`xml`, `html`, `xhtml`, `xslt`

步驟8. 另外，因為 Blogger 會將程式碼的最後面，新增一個換行符號<BR>，所以直接使用 SyntaxHighlighter 可能會有問題，請啟用 BloggerMode 即可解決此問題，範例碼如下：

dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');

請參考：
BloggerMode 的說明http://code.google.com/p/syntaxhighlighter/wiki/BloggerMode

筆者在步驟6. 的範例碼中，是已經包含啟用 BloggerMode 的程式碼。

步驟9. 請測試是否 SyntaxHighlighter 與 BloggerMode 有正常運作。

補充說明：
某些朋友在使用時，可能發覺在編寫一篇文章時，SyntaxHighlighter 並沒有動作，但 SyntaxHighlighter 是需要等到此文章發行到部落格上後，才能看到的效果。
採用 SyntaxHighlighter 的方式，這是將耗用掉客戶端的系統資源來執行 Java script。
所以如果下載網路速度慢，客戶端系統的硬體效能不佳，這是會有影響的。
可以參考官方的討論：How to use SyntaxHighlighter.
http://code.google.com/p/syntaxhighlighter/wiki/Usage

考慮使用 klein.stephane 所建議的，增加：window.onload = function () 或是 ashwin.jayaprakash 所設計的函數來改善...等等方式來處理。

今舉一個範例如下：

修改為：

此外，還有以下的事情需要留意：
window.onload 事件會在整個 HTML 頁面 (包含圖片等) 載入完成後，才進行執行。
但若是您先前也有程式使用 window.onload 的話，這將是會把前一個 window.onload 的動作給覆蓋。

訂閱：文章 (Atom)

德瑞克：SQL Server 學習筆記

搜尋本站文章