首頁 相簿 flickr 相簿 RSS 訂閱
分享+ 貼到 Facebook 貼到 funP 貼到 Plurk 噗浪 HemiDemi Google Bookmarks MyShare 其他更多書籤
顯示具有 站務 標籤的文章。 顯示所有文章
顯示具有 站務 標籤的文章。 顯示所有文章

星期三, 3月 02, 2011

40 萬瀏覽量、25 萬人次造訪達成報告

從開始使用 Google Analytics 統計流量以來,歷經了 3 年 4 個月的時間,終於達成了 40 萬頁瀏覽量(Page views),同時造訪人次(Visits)也突破了 25 萬,而這 25 萬人次中,不重複的訪客(Unique visitors)則超越了 20 萬人,實在非常感謝各位的參與。

(以上均排除本人瀏覽)

統計時間:2007/10/1~2011/2/28
資料依據:Google Analytics,Click 檢視大圖。



趨勢
從瀏覽量的曲線圖來看,2009 年後期到 2010 年整年是本站較低迷的時候,而這剛好也是我偷懶比較少寫新內容的時期,所以 Blog 持續更新仍然是維持一定流量的必要條件之一。



來源
維持一貫的結果,本站 7 成 5 的流量來自於搜尋引擎,而透過網站連結與直接進入本站則各佔剩下 25% 的一半。



關鍵字
由於本站絕大部分流量來自於搜尋引擎,因此關鍵字也就是左右瀏覽量的最大關鍵,而前 10 名的關鍵字也跟最熱門的網頁相呼應。



分布
訪客分布部分,約將近 85% 來自台灣,其餘依次為香港、美國、中國、日本... 等。



熱門網頁
而最受歡迎的網頁部分,第一名仍然是台灣故事館(屹立不搖),第二名則是 VQ1005 LOMO 相機,第三為豆酥朋,綜觀前 10 名不外乎就是 LOMO、RF 與吃...



下一個里程碑:100 萬瀏覽!!

...(閱讀全文)

星期日, 2月 15, 2009

Blogger Hack - 使用 Modal Window 方式顯示大尺寸照片

由於 masaru's vision 版面配置的原因,我的照片都是以縮圖的方式發表,當點選縮圖後才以另開視窗的方式開啟大圖,最近趁著閒暇時間研究如何提供更好的使用經驗與感受,於是開始著手撰寫利用 Modal Window 形式來展示大圖,這個效果已經上線一段時間了,似乎沒太大的問題,所以將這段程式碼分享給大家。

所謂的 Modal Window 是一種顯示子視窗的方式(如下圖),在此不探討此種介面的特性,有興趣可以到 Wikipedia 查閱。回到主題,在撰寫此效果時,第一個考慮的是裝置這個功能的便利度,如果每次發表文章都要額外添加許多 Code,那就不是我要的結果,再來就是對於不支援的瀏覽器或是 JavaScript 錯誤或關閉時,是否會造成照片無法顯示的問題,所以在這個版本,於發表文章時只需要增加一個 class 的屬性,而當發生不支援情況時,則會以原本的另開視窗來顯示大圖,而不會造成錯誤。



  • 名稱:Masaru Photo Modal Window Hack
  • 版本:0.51
  • BSP:Google Blogger(其它 BSP 亦可安裝)
  • 相簿平台:僅支援 Google PicasaWeb 網路相簿,並自動處理寬度 144、288、320 或 400 pixels 的縮圖(大圖則為 800 pixels)
  • 支援瀏覽器:Microsoft Internet Explorer 6, 7, 8、Mozilla Firefox、Google Chrome、Apple Safari

★ 小提醒:masaru 不保證此程式碼能完全正確執行,亦不負安裝後造成異常的責任;另外,在修改範本前請先做好完整備份的工作。

安裝步驟
開啟 Blogger 管理網誌介面,進入「版面配置」→「修改 HTML」,修改前先點選「下載完整範本」備份你的範本。接著點選「展開小裝置範本」的 Check Box 開啟完整的範本,依下列順序分別裝載 CSS、JavaScript 與 HTML 即可。

1. CSS:
將 CSS 複製到 ]]></b:skin> 這行字元的下一行,或是貼在 <head></head> 之間即可。

<style type='text/css'>
.photoPanel
{
position: absolute;
width: 770px;
height: 600px;
z-index: 99999;
text-align: center;
display: none;
}

.photoPanel .photo
{
padding: 10px;
border: solid 1px #666666;
background-color: #ffffff;
}

.photoBackground
{
position: absolute;
top: 0px;
left: 0px;
z-index: 99998;
background-color: #000000;
cursor: not-allowed;
filter: alpha(opacity=60);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-moz-opacity: 0.6;
opacity: 0.6;
display: none;
}

.largePhoto
{
}
</style>

2. JavaScript:
將下列 JavaScript 放置於 CSS 之後。而其中紅色字樣的 URL 為載入照片時會顯示的 Loading 圖示,請自行改用自己的 Loading 圖示網址。

若你不想自行設計,可以下載這張圖後,再上傳至你的網路空間,並更新紅色字樣的 URL。(請勿使用我提供的網址)

<script type='text/javascript'>
// masaru's vision photo viewer version 0.5
var masaruPhotoViewer = {
loading: "http://lh3.ggpht.com/...../s288/loading.gif.jpg",

start: function() {
document.getElementById("photoImage").src = this.loading;

var ns = (navigator.appName == "Netscape");
if (ns) document.captureEvents(Event.CLICK);

document.onclick = function(e) {
if (!e) {
e = window.event;
}

var pass = true;
var regex = new RegExp("/s(144|288|320|400)/", "g");

var t = ns ? e.target.className : e.srcElement.className;

if (t == "largePhoto") {
pass = masaruPhotoViewer.initPhoto((ns ? e.target.src : e.srcElement.src).replace(regex, "/s800/"));
}
else if (t == "photo") {
pass = false;
}
return pass;
}
},

initPhoto: function(photo) {
var pass = navigator.userAgent.indexOf("MSIE 6") > 0 ||
navigator.userAgent.indexOf("MSIE 7") > 0 ||
navigator.userAgent.indexOf("MSIE 8") > 0 ||
navigator.userAgent.indexOf("Firefox") > 0 ||
navigator.userAgent.indexOf("Chrome") > 0 ||
navigator.userAgent.indexOf("Safari") > 0;

if (pass) {
var p = document.getElementById("photoPanel");
var b = document.getElementById("photoBackground");
var w = document.documentElement.clientWidth;
var h = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
var st = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
var t = (document.documentElement.clientHeight / 2) - (600 / 2);

if (t &lt; 0) {
t = 0;
}

p.style.top = t + st + "px";
p.style.left = (w / 2) - (770 / 2) + "px";
b.style.width = w + "px";
b.style.height = h + "px";

p.style.display = b.style.display = 'block';
document.getElementById("photoImage").src = photo;
}

return !pass;
},

closePhoto: function() {
var p = document.getElementById("photoPanel");
var b = document.getElementById("photoBackground");
p.style.display = b.style.display = 'none';
document.getElementById("photoImage").src = this.loading;
return false;
}
};
</script>


3. HTML:
HTML 部分則放於 <body></body> 之間的任意位置即可。(建議放前面一些)

<div class='photoPanel' id='photoPanel'><a href='#' onclick='return masaruPhotoViewer.closePhoto();' title='點一下關閉'><img id='photoImage' class='photo' /></a></div>
<div class='photoBackground' id='photoBackground'> </div>
<script type='text/javascript'>
masaruPhotoViewer.start();
</script>


使用方式
在撰寫 Blog 文章時加入了照片,會產生如下列的 HTML 碼,只要在 <img> 中加入 class="largePhoto" 這個屬性(紅色字串)即可讓你的 Blog 擁有以 Modal Window 顯示照片大圖的功能。

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPvqHfTDk_N7y1wAmt31bhLBgytIKB0ZnFj_45p_cAxbZN3oLFpykuhdEni78zrzHu1cB_53DilGIDU2y6pHc92yv9q0DS1F7mxMIrkx9-G4-SETgZcjcWc8rh0M6hZA6VEHr1a30a3gTF/s1600-h/P1081595.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPvqHfTDk_N7y1wAmt31bhLBgytIKB0ZnFj_45p_cAxbZN3oLFpykuhdEni78zrzHu1cB_53DilGIDU2y6pHc92yv9q0DS1F7mxMIrkx9-G4-SETgZcjcWc8rh0M6hZA6VEHr1a30a3gTF/s400/P1081595.jpg" border="0" class="largePhoto" alt=""id="BLOGGER_PHOTO_ID_5288933330058924642" /></a>


效果展示
點選下列照片來體驗 Photo Modal Window。


若有任何問題,歡迎留下你的意見。

...(閱讀全文)

星期五, 1月 09, 2009

本站啟用 myPix.tw 易記短網址

經過幾天的 DNS 發佈與測試,masaru's vision 正式啟用 myPix.tw 的易記短網址,Pix 為 Pictures 照片之意,所以 myPix = 「我的照片」,簡短又容易記,在瀏覽器位址列輸入 mypix.tw 即會轉址至本站。



而原來的 www.masaru-vision.net(或 masaru-vision.net)仍然是本站的正式網址,原來舊有的習慣與網址都沒有改變,不過仍然希望短網址能提供給更多朋友方便與快速的找到 masaru's vision。

現在就試著點一下網址:http://mypix.tw
還有我的相簿也可以這樣連:http://photo.mypix.tw

另外,masaru's vision 也做了下列幾項微調:
  • 文章下方可直接留言,不需要再另開視窗,讓使用體驗更良好。
  • 部分文章會提供「位置」的資訊,點選位置連結可以開啟 Google Maps 查看,這是 Blogger Draft 新的功能。例如這篇就提供位置資訊(文章下方)。
  • 增加對文章感覺的反應機制,這也是 Blogger Draft 的新功能,不過我還在測試,如果沒看到就是被我關掉了。
關於 masaru's vision 的事務,歡迎留下你的意見。

...(閱讀全文)

星期日, 10月 05, 2008

10 萬 Pageview 達成報告

終於達成 10 萬 Pageviews 的記錄,距離上次的 5 萬 Pageviews 達成(2007/10/1~2008/6/28),這次只花了 3 個月左右便累積到另一個 5 萬,此外、造訪次數也突破 5 萬,漸漸逼近 6 萬關卡。

註:2008/9/29 達到 10 萬 Pageviews,但以下圖表則統計至 2008/10/3,統計來源 Google Analytics,並已排除自己的點閱記錄。



從 Pageview 的趨勢圖來看,近 3 個月的趨勢變化相當規律,而這段期間內的單日最高點則落在 9/17 日的 804 頁。

以下圖表可 Click 檢視大圖。



而訪客數(絕對特定訪客)也有所成長,應該不久後也能突破 5 萬人。而流量來源部分,搜尋引擎的比例大幅攀升,從搜尋引擎而拜訪本站的已將近 7 成,其中 Yahoo 佔 64.89%、Google 則為 34.36%,兩者就佔了 99.25% 的比例。



最後 Top 10 的網頁如下圖,最讓人意外的是「台灣故事館」在上次連前 10 名都進不了,這次卻直接成為第 1 名,而且是唯一超過 10,000 頁檢視的文章,其中原因我到現在還是想不透啊!

而不意外的部分,Genie IIIVQ1005 的相關文章仍是最大宗,總共佔了 6 個名額,而美食類則佔了 2 個名額。



下一個里程碑:20 萬 Pageviews

...(閱讀全文)

星期六, 6月 28, 2008

50,000 Pageviews 達成報告

本站自 2007/10/1 掛上 Google Analytics 開始有統計資料以來,終於在昨天(2008/6/27)正式突破 50,000 個網頁檢視(已排除自己的點閱)這個關卡,約花了近 9 個月的時間慢慢累積完成。



從 Pageviews 的趨勢來看,今年 2 月之前,可以說是一片平坦、慘不忍睹,之後才慢慢看得到曲線;所以我另外統計從 2008/2/28 開始算起的最近這 4 個月,Pageviews 已達 47,135 頁,佔總 Pageviews 的 93.8%。而本站單日最高網頁檢視量為 2008/4/15 的 978 頁,主要是發表 Genie IIIVQ1005 的文章後沒多久。

以下圖表可 Click 檢視大圖。



而這段期間所累積的訪客為 21,647 位,趨勢上與 Pageviewes 是很接近的。另外從流量來源來看,有超過一半(56.85%)的比例來自於搜尋引擎,28% 來自於網站的連結或書籤網,而 14% 則是直接連結本站。



Top 10 的網頁如下,但其中第 2 名「輕 LOMO 風的姬霓 - BELL+HOWELL Genie III 入荷」與第 8 名「濃々 LOMO 味的姬霓 - BELL+HOWELL Genie III 入荷」其實是同一篇文章,只因改過標題所以被分開計算了,兩者相加為 4,454 頁,超過原第 1 名「尋回濃々的 LOMO 味 - VistaQuest VQ1005 入荷」成為新的第 1 名;而從 Top 10 被姬霓相關主題文章佔據的情況看得出來,Genie IIIVQ1005 真是惠我良多,呵呵~



下一個里程碑:100,000 Pageviews

...(閱讀全文)

星期六, 3月 08, 2008

今天 Google 了哪些服務!

原本只是想統計到底用了多少 Google 服務在這個 Blog 上,沒想到列出來後還蠻嚇人的,所以乾脆整理一下,順便 PO 篇文章當作紀錄。

Blogger » 部落格平台(BSP)
曾經用過無名、天空、Xuite 等部落格平台,不是不夠成熟,就是曾經當機損毀過資料,搬了幾次家,最後還是決定留在 Blogger;個人最愛 Blogger 的高自由度與擴充性,再加上對 Google 的信賴,除非要自己架站,否則 Blogger 應該是我目前的最佳選擇。


Picasa Web Albums » 網路相簿
其實網路相簿最成熟的還是 Flickr,但是不用 Flickr 原因很簡單:免費用戶限制多,不符合需求,第二,Flickr 被 Yahoo! 收購了。個人對 Yahoo! 沒什麼意見,但是對 Yahoo!奇摩卻很反感。

Picasa 網路相簿雖然功能不強,但是目前免費 1G 的空間、沒有流量限制等,能讓我用上好幾年,幾年後的 Picasa 應該不只這樣了!另外與 Blogger 的整合也是使用 Blogger BSP 用戶的第一選擇。

至於 Picasa 這套軟體,由於我不習慣使用這類軟體管理相片或發布照片,因此並沒有使用這套軟體,不過最近發現 Picasa 可以把 Picasa 網路相簿(包括相片順序與說明) Download 下來備份,這個功能對我而言相當實用,值得把這套軟體留在我的電腦內。


Google Apps 應用服務 » 網域名稱
以前我都是買台灣的 idv.tw 網址,自從改而跟 Google 買 .net/.com 網域名稱後才發現 idv.tw 還真貴;現在我每年只花 10 元美金維持 masaru-vision.net 這個網域名稱,不但可以自己管理網域,Google 還附贈整套標準版的 Google 應用服務!


Gmail » Email 信箱
Googel Apps 提供 @masaru-vision.net 的 Gmail 信箱,可自行建立帳戶,提供如 contact@masaru-vision.net, service@masaru-vision.net 這類的服務信箱。


Page Creator » 第二網頁空間
使用 Googel Apps 的 Page Creator 功能,提供 www2.masaru-vision.net 網路空間,主要存放站務需要 HTML、image 或其他檔案。


Start Page » 起始網頁
使用 Googel Apps 的起始網頁功能,類似於 iGoogle,網址是 start.masaru-vision.netmasaru-vision.net


FeedBurner » RSS Feeds 燒錄
透過 FeedBurner 提供優化的 RSS Feeds、訂閱統計等,也提供透過 Email 訂閱文章的服務。


Google Analytics » 統計分析
Google Analytics 這個免費又強大的服務真的非常好用,利用篩選的功能,能很精確的統計與分析出流量的各種資訊,可以當作改進 Blog 的參考與依據。


Google AdSense » 廣告
不能免俗的,我也放了Google AdSense,不過通常我都忽略它,也沒期望能收到第一次的款項。


Google Webmaster Tools » Google 搜尋管理
Google 網站管理員工具也是好物,提供關於 Google Search 的診斷、統計、Sitemap 與工具等。


Google Maps » 地圖
Google Maps 我主要拿來建立美食地圖,再內嵌於文章內,除了提供更豐富資訊外,也能讓我當作資料整理,方便日後查詢。

...(閱讀全文)

星期四, 2月 21, 2008

關於本站的近期事務

  • 改用 FeedBurner 提供 RSS 訂閱服務。
  • 提供 Email 訂閱服務,可從右側推薦分享區訂閱。
  • 加入 BloggerAds 廣告聯播。
  • 加入台灣部落格列表。
  • 加入部落格觀察,目前排名為 17147。(Update, 2/27: 初期統計不準確,故刪除)
  • 加入 Alexa Traffic Rank。

...(閱讀全文)

星期三, 1月 02, 2008

使用行動裝置瀏覽本站相簿

Picasa 相簿已經開始支援行動裝置,因此可以透過手機或 PDA 連上本站的相簿,以下使用 Nokia E70 透過 3G 連上相簿為例。
(點選小圖可觀看完整畫面)

#1 使用手機的瀏覽器。


#2 輸入本站相簿網址 photo.masaru-vision.net


#3 連上後,顯示所有相簿。


#4 進入相簿的瀏覽畫面,點選 << 或 >> 翻頁。


#5 觀看照片,並且可以寫下評論。


 
...(閱讀全文)

星期四, 11月 22, 2007

相簿的照片尺寸擴大並開始提供 EXIF 資訊

因千萬畫素時代與大尺寸 LCD 螢幕的趨勢,以往我所認為最合適的照片大小已然不符潮流,所以即日起不論直橫幅,均由原本的 600x450 pixels 擴大至 720x540 pixels(擴增 44%),但因 Picasa 相簿顯示時會自動調整最適大小,在此提供下列一些小技巧,以獲得更良好的瀏覽經驗。

照片右上角的工具列
表示已是最大顯示尺寸。
表示有更大尺寸,點選圖示放大照片,放大後可用滑鼠拖曳捲動。
表示已經放大中,點選圖示會縮至原始顯示大小。

另外,以往因為檔案大小與效能考量,照片均用 Web 最佳化的方式儲存而無法保留 EXIF 資訊,未來將改變存檔方式(檔案會變大)並開始提供 EXIF,並且可從相簿中獲得該資訊。

右方功能列說明


(1) 最大的照片尺寸,這裡所列 740x590 像素為包含邊框的大小,照片本體為 720x540 像素。
(2) 點選詳細資訊可獲得 EXIF 資訊,包含相機、光圈、快門、焦距等資訊。
(3) 使用幻燈片方式播放,可觀看更大的圖片尺寸(尤其指橫幅照片,大小則依螢幕解析度而定)。

...(閱讀全文)

星期六, 8月 20, 2005

【認養活動】 請救救可憐被當實驗動物的狗狗們

屏東科技大學因為某項動物實驗已經結束,校方沒有能力,繼續照顧這一大群狗狗,所以這批功成身退的狗狗必須處理掉。

這當中有20隻米格魯、15隻拉拉和20來隻混種狗狗,全部都是女生,據悉,拉拉和小米是校方從繁殖場買來的,血統純正,狗狗的年齡平均約在3~4歲,另外有幾隻5~6歲,此外,這六、七十隻狗狗因為是進行卵巢方面的實驗,所以近日內卵巢都醬摘除並完成結紮,不過身體都非常健康。

校方會等到九月底左右,如果沒人認養,就會送去動物收容所,下場就…;已經開放認養,地點在屏東科技大學,有意願者請洽洪同學 0928-348-233。

希望你身邊如果有人想養品種成犬,可以考慮一下他們…也歡迎轉貼,希望他們可以得到幫助!!

引用 Citation:
"【求助】請救救可憐被當實驗動物的狗狗們 "。 2005年。 《米格魯家族》。
2005 年 9 月 20 日 <http://tw.msg.club.yahoo.com/msg/msga?cid=money588&id=10629&r=665242&f=http%3a//tw.club.yahoo.com/contlist%3fcid=money588%26rand=665242>.

...(閱讀全文)