Quantcast
Channel: WFU BLOG
Viewing all 784 articles
Browse latest View live

讓 Google 問卷(表單)能自動計分 V2

$
0
0
google-form-auto-score由於 Google Drive 全面更新為新版雲端硬碟,過去曾寫過的「讓 Google 試算表製作的問卷試題能自動計分」,某些舊試算表函數功能已經被廢除,導致在新版試算表,將無法執行舊版自動計分的功能。

如果你的 Google Drive 還保有一些舊版檔案,那麼或許可以套用舊版的自動計分製作方法。如果是新的 Google 帳號,會被強制使用新版雲端硬碟,那麼就得改用本篇的流程來製作問卷表單了。

(圖片出處: pixabay.com)


一、V2 版本介紹


由於新版 Google 試算表取消了 "QUERY" 這樣的函數(以及其他函數),其實也不是沒有好處,因為這些函數會大量消耗 CPU 運算,增加伺服器的負擔。

只不過如此一來,要讓 Google 表單自動計分,不能再使用函數,只好自行寫程式來執行。

跟上一版比起來,也算是有不少優點,舊版的操作流程比較多,而 V2 版全部交由程式執行,幾乎可以算是懶人包了,製作流程算是非常方便。




二、複製試算表


首先登入自己的 Google 帳號,進入下面這個 Google 試算表網址:


google-spreadsheet-auto-count-1

如上圖,按下「檔案」→ 建立副本 → 會自動產生兩個檔案


google-spreadsheet-auto-count-2

  • 如上圖,這兩個檔案可自行修改名稱。
  • 並請注意檔名前面的圖示,分別代表「表單」、「試算表」
  • 接下來我們要製作問卷內容,請按下「表單」的檔案



三、製作問卷


以下是進入表單的畫面:

google-form-auto-count-1

  • 請自行修改大標題
  • 請注意每個題目的字串,為了讓程式分辨哪些項目要計分,不計分的項目,請在題目前面加上兩個星號 **
  • 所有要計分的項目,題目前面不可有兩個星號
  • 盡量使用 "編輯" 按鈕來修改內容
  • 如果使用了 "刪除" 按鈕,那麼會稍微麻煩一點,因為試算表裡面的內容不會同步被刪除,得自己手動進去刪除。
  • 要新增題目的話,請按最下方的紅框「新增項目」


完成表單問卷題目的編輯後,接下來以「會員中心贈送點數限時活動」的畫面為例:

google-form-auto-count-2

建議進行的步驟,依照上圖標示的 1~3──

1. 可以先按「變更主題」,選擇喜歡的版面風格。

2. 按「查看即時表單」,進入填寫問卷的畫面,可看到剛剛選擇的版面效果:

google-form-auto-count-3

同時出題者必須先行作答,選擇所有正確的答案,這樣程式才有標準答案可以比對,進行計分


3. 最後可回到原畫面,按「查看回應」來進入試算表,不過也可以直接從 Google Drive 的主畫面,來選擇試算表檔案進入。



四、自動計分


以下為進入試算表後的示意圖:

google-spreadsheet-auto-count-3

上圖可看到,我們剛剛成為第一位完成問卷的使用者,試算表第二行會出現我們剛剛填入的正確答案。

接下來必須進行設定,讓試算表能自動計分。

請按「工具」→「指令碼編輯器」


google-spreadsheet-auto-count-4

如上圖,可看到紅框處的 m=10,這代表答對一題得到 10 分,請將 10 改為自訂的分數

接著設定自動執行的程序,請按「資源」 →「現有專案的啟動程序」→「尚未建立觸發程序,按一下這裡來新增觸發程序」


google-spreadsheet-auto-count-5

將畫面的選項改成跟上圖一樣,count → 來自試算表 → 提交表單時,然後按下「儲存」

最後系統會要求授權,請依畫面要求同意授權,按完所有選項即可。

至此完成所有流程,以後所有填寫問卷者,會自動批改答案,並在試算表最右邊「**總分」這個欄位,顯示加總的分數



五、常見 FAQ


如果操作遇上小問題請提出,日後若有常見問題,會補充在此。

更多 Google Drive 技巧:

部落格「會員系統」正式啟用

$
0
0
member-support從去年九月「會員中心」試營運以來,最近終於將預計規劃的功能全部上線,同時也感謝讀者的支持,目前已經累積了超過一千名會員。

究竟為何需要加入會員?使用會員中心有什麼好處?正式營運又有什麼優惠呢?請見以下詳細的說明。

(圖片出處: hartsplumbingwa.com)


一、功能介紹


1. 原有功能

這是試營運期間的示意圖:

member-system-1

原始的功能為「公告」、「討論區」、「會員限定文章」,詳細說明請參考「會員系統試營運」。

簡單的說,只要加入會員之後,就能免費閱覽 WFU BLOG 所有的「會員限定文章」。

而且加入會員的流程非常快速,登入 FB 帳號後,只要幾秒鐘、幾乎不需填寫任何資料,就能完成會員註冊程序。


2. 新增功能

除了後來增加的「小遊戲」區,目前正式營運主要增加的功能為:

  • 會員加值文章
  • 點數使用明細

member-value-post-1

可以說是將「點數系統」帶進了會員中心。有了點數之後,可以兌換比「會員限定文章」更優質的「會員加值文章」。

以下詳細說明會員中心的點數相關事宜。



二、會員點數


1. 基本點數

所有新加入的會員,會自動獲得 10 點。為了獎勵早期加入的會員(1 ~ 500),根據不同的會員編號,自動獲得的點數如下:

  • 1 ~ 20:獲得 50 點
  • 21 ~ 100:獲得 30 點
  • 101 ~ 500 :獲得 20 點


2. 獎勵贈點

以下讀者可獲得額外獎勵的點數:

  • 提供建設性意見
  • 回報 WFU BLOG 異常、錯誤之處
  • 與本站互動良好,留言星等達三星以上

不過補充一下,WFU 有時想贈點,但如果讀者是匿名留言、或是留的會員資料與 Blogger 帳號兜不起來,那麼就不知如何贈點了。


3. 不定期贈點

WFU BLOG 會不定期舉辦贈點活動,例如本次正式營運舉辦的「會員中心贈送點數限時活動」。

如不想錯過每次的活動,建議可「訂閱本站最新文章」。


4. 點數加值

除了以上的贈點管道,也可經由轉帳、PAYPAL、信用卡等方式來加值,詳細說明請參考「會員系統點數加值說明



三、特惠活動


在會員中心正式開幕的期間,同時部分「會員加值文章」也有優惠活動,所有的「Blogger 工具」一律只要 50 點即可兌換,敬請把握機會。

目前會員點數的主要用途,為兌換「會員加值文章」,不過若是有客製案子需要進行,此點數也是可以拿來折抵


member-value-post-2

上圖為「會員加值文章」的兌換畫面。



四、走向商業化?


有讀者表示,推出「會員加值文章」代表 WFU BLOG 開始走向商業化了?藉這機會稍微說明一下。

這個說法或許勉強算是,但也很難把這兩件事當成因果關係。真要說商業化的話,其實在一年半前,WFU BLOG 便開始提供「架站/商業諮詢/客製化」服務,而某些「客製化加值工具」也是從這裡而來。

而真正可以算是商業化工具的,其實是這個「會員系統」,這些「會員限定文章」、「會員加值文章」等項目,算是用來展示「會員系統」的功能,讓真正有意想製作會員系統的站長,能夠理解這個會員系統的能耐可以到哪裡。

相較之下,50 點就能換到的「Blogger 加值小工具」,且點數還有多種管道可免費獲得,算是商業價值不大。



五、創造三贏的會員系統


因此,製作這個會員系統,我想應該是個三贏的局面:

1. 會員讀者
  • 比起論壇很容易忘記的帳號密碼,這個系統註冊很方便
  • 看加密文章不用輸入密碼
  • 能參加會員專屬的活動


2. WFU
  • 對我而言,「會員限定文章」可以隱藏起來,重要內容不易被別的網站盜用
  • 某些不想太過公開的內容,我可以丟到「會員加值文章」,讓自己隨時備查內容,等於把 Blogger 做成私人網誌一般。
  • 利用會員系統,可以舉辦只有會員才能參加的活動,增進彼此的交流。


3. 有意商業化的站長

如果想把作品商品化、網站商業化的站長,可參考、試玩這個會員系統。使用了這個系統之後,能將貨品上架,開始利用網站營利,就像下面的示意圖:

member-value-post-3

對於如何修改功能、達到客製化的需求,或有任何疑問,歡迎用下面的表單與我聯繫:

網頁使用自製紋理背景﹍雜點+拔絲+再生紙效果實作 [CSS 技巧]

$
0
0
noise-background過去本站各個區塊一直都是使用單色背景,稍微比較沒質感,而好處是網頁載入速度會快一些。前陣子剛好有讀者詢問哪裡可以找到不錯的紋理背景圖案,因此稍微研究了一下這方面的資訊,順便幫網站背景換上自製的紋路,不過就是得稍微犧牲幾個 http 請求。

其實網路上的免費背景圖資源非常多,可以找到各式極有質感的圖案。為何 WFU 選擇自製?主要是越好看的背景,圖檔也越大,得花更多的載入時間。因此最後找了一些簡單的小尺寸圖案,加以變化後竟也弄出不錯的效果。

以下分享我的實作心得,根據這樣的原理,相信讀者可以做出比我更好的效果。



一、免費背景紋理


1. 推薦網站
這個站的背景圖都非常有質感,且能即時預覽效果,也有標籤可快速分類搜尋。

這個網頁蒐集了很多背景圖資源,如果上一個網站覺得還不夠,可以再來逛這些網站。


2. 雜點紋理

什麼是雜點紋理(noise texture)?先來看一個範例網頁:

noise-example

如上圖,三個不同背景色裡面,都含有隨機分布的雜點紋理。

如果想使用這種背景的話,這個網站提供了線上隨機雜點背景的產生器:


以下簡單介紹如何使用。




二、雜點背景產生器


noise-generator-tutorial

進入該網址後,設定方法如上圖 A~F 步驟:

  • A. 這裡輸入的背景色不會真的產生這個顏色,只是讓我們預覽效果而已
  • B. 尺寸 100 代表產生 100x100 px 的圖檔
  • C. 密度代表隨機產生的雜點數量多寡
  • D. 數字越大越不透明。基本上產生的雜點是透明圖,可以讓我們在任何底色都適用。
  • E. 預設是產生各種顏色的雜點。如果要單色的雜點,請勾選此項。
  • F. 按這裡下載產生的圖檔

以上任一參數設定後,都可按右上角的「Noise」按鈕產生新的效果圖、並下載。



三、雜點背景實作


1. 使用範例

以 Blogger 為例,將下載的雜點背景圖,在文章編輯畫面上傳,可取得圖片網址。

如果熟悉範本的操作,可自行修改 CSS 的設定。如果不熟悉的話,請按以下步驟:

後台範本 → 自訂 → 進階 → 新增 CSS → 加入以下內容:

body {
background:url(http://2.bp.blogspot.com/-m1EeR8TQe1E/VaYb0UdG94I/AAAAAAAAMGE/8K0Pvkv-GzM/s1600/100-30-5.png) #e7eee6;
}

  • 紅色字串請改為自己的圖檔網址
  • 綠色字串請改為自己的背景色碼
  • 以上語法會套用到整個網站的背景

產生的效果類似「二、雜點背景產生器」的說明圖片:

noise-generator


2. 再生紙背景

讀者或許會好奇,目前 WFU BLOG 綠色背景上面的圖案,不太像雜點,反而一絲一絲的,不但這個底色色碼像再生紙,怎麼連圖案都像回收材質做出來的?

這個效果的產生純粹是誤打誤撞,在測試各種 CSS 語法時無意中跑出來的,反正 WFU BLOG 的色系都滿環保的,乾脆就讓這個效果繼續留著了~

同樣在 Blogger 依照先前的步驟,後台範本 → 自訂 → 進階 → 新增 CSS → 加入以下內容:

body {
background:url(http://2.bp.blogspot.com/-m1EeR8TQe1E/VaYb0UdG94I/AAAAAAAAMGE/8K0Pvkv-GzM/s1600/100-30-5.png) #e7eee6;
background-size: 100px 400px;
}

主要差別在於多了紅色的語法,設定了背景圖的尺寸。

100px 為寬度,400px 為高度。由於原始圖尺寸為 100 x 100px,這樣的設定會將圖往垂直方向拉撐,原本的雜點,就成了垂直方向的一絲絲線條了!

瞭解此技巧後,可以發揮創意,任意自訂背景圖的尺寸,來呈現各種不同的效果,而不單單只是最初簡單的雜點背景圖!

recycle-paper-background



四、拔絲效果實作


1. 原始效果

這是一張 100x100 px 尺寸的背景素材圖,由於年代久遠已經忘了從何處擷取:

yellow-bg-100

此圖看起來沒什麼特別之處,紋路看起來很普通。


2. 拔絲效果

上圖取得圖片連結後,以 WFU BLOG 為例,在標頭區塊使用以下的 CSS 語法:

#header-inner {
background: url(http://1.bp.blogspot.com/-YODKGVfWimA/VaXaz68qdRI/AAAAAAAAMFA/MZZGV1lGxd4/s1600/yellow-bg-100.jpg) #F8F8F1;
background-size: 300px 30px;
}


這次 background-size 改往橫向拉撐,以 10 : 1 的比例拉長圖案,標頭區塊的效果成為下圖:

wire-drawing-background

這樣的背景有點類似金屬紋路,如果找的原始圖好一點,拔絲效果會更明顯。

使用影像編輯軟體改一下顏色後,目前本站的文章、側邊欄、底部區塊,都套用了這樣的背景紋路效果。

如果想製作垂直方向的拔絲效果,那麼將 background-size 的兩個參數對調即可!



五、小結


整篇看下來,對 CSS 有概念的讀者,可以了解到本文技巧的關鍵在於 background-size 這個 CSS 語法。以後如果想對網站的背景作些變換,不一定需要另外找圖片、或是重新製作,經由 CSS 參數的巧妙設定,隨時可以將網頁背景變換為不同的風格。


更多 CSS 技巧:

安裝 PAYPAL 贊助+分期付款(訂閱)按鈕﹍以及使用心得

$
0
0
paypal-button前陣子幫讀者處理 PAYPAL 贊助按鈕的設置,加上還有分期付款的需求,藉這機會整理一下心得,讓有需要的讀者參考。

雖然網站很久以前就放了 PAYPAL 贊助按鈕,不過到後來發現贊助的使用率較少,反而是支付的使用較多。因為轉帳對於某些族群比較麻煩,而 PAYPAL 的「信用卡支付」功能,可一定程度提高交易的成功率。

如果你的網站提供了某些服務或商品(例如「諮詢與商品販售」),可以讓使用者進行消費;或是以經營權威網站為方向,內容足以讓讀者進行贊助,那麼在草創時期、資金不足以建構金流的時候,PAYPAL 能夠在 "免架設成本" 之下幫我們解決這件事,是一個不錯的選擇。



一、PAYPAL 基本概念


1. 帳戶種類

申請帳戶時一共有三種類別:
  • 個人
  • 特選
  • 商業

三者的差別請參考官網說明:「我應該選用個人、特選還是商業帳戶?」。

在部落格放置贊助(訂閱)按鈕的話,選擇「特選」即可。


2. 手續費

沒有產生交易的話,PAYPAL 帳戶不需要負擔什麼年費、固定支出之類。

如果產生交易,每筆我們要負擔的手續費,以台灣為例,這個數字比較好記:「4% + NT. 10」。

詳細的金額可參考官網說明「Paypal 費用」。

而當事業規模成長,開始覺得手續費不划算時,可以改申請 PAYPAL "商業" 帳戶,或直接找金流業者談合作及手續費。


3. 提領

現在 PAYPAL 與玉山銀行合作,要提領 PAYPAL 帳戶的款項請到玉山開戶,詳情可參考官網說明「台灣 PayPal 新提領款項流程正式上線」。

摘錄其中比較重要的項目:
  • 目前提領新台幣款項至玉山銀行新台幣帳戶維持「免手續費」
  • 將美金款項提領到你的玉山銀行美金帳戶,會收取 2.5% PayPal 提領手續費。
  • 玉山銀行帳戶的戶名必須要與你的 PayPal 帳戶登記的姓名或公司名字完全相符。請務必確認,以免造成連結失敗。

由於 WFU 很少用 PAYPAL 網路購物,因此把錢留在 PAYPAL 帳戶也是浪費(沒有利息),趁著現在台幣提領免手續費,可以儘早領出餘額。




二、PAYPAL 贊助按鈕


申請完帳號,並登入「PAYPAL 官網」後:


paypal-button-1

1. 如上圖,依序進入「個人檔案」→「我的銷售工具」→「PayPal 按鈕」→「更新」,可製作 PAYPAL 按鈕。


paypal-button-2

2. 左邊的「贊助 WFU BLOG(美元)」等按鈕,是我已經做好的範例,如要建立新按鈕,請按上圖紅框的「建立新按鈕」。


paypal-button-3

3. 從上圖下拉選單可看到,PAYPAL 提供的按鈕有三種功能:購物車立即購訂閱。其中我們可以將「立即購」這個按鈕,拿來改造成 "贊助" 按鈕。

如果只提供給讀者一種贊助金額,可如上圖填入「項目名稱」、「贊助金額」後,看完預覽畫面,按左下角的「建立按鈕」就完成了。

不過這樣的按鈕比較沒彈性,應該多設定幾種金額讓讀者選擇才對!


paypal-button-4

4. 因此我們可以如上圖,勾選左上角紅框,然後按「新增其他選項」,多設定幾個項目。

依序填入每個項目的提示文字、及金額,最後按「完成」即可。


paypal-button-5

5. 最後按下「建立按鈕」後,會產生如上圖的 HTML 安裝碼。

不過直接拿這樣的安裝碼使用,只會出現 "立即購" 按鈕,沒人看得出是 "贊助" 按鈕,因此我們需要進行改造一番。

改造之前,只要記住自己上圖中反白的那串亂數 ID 代號即可,位置在字串 "hosted_button_id" 的後面。



三、調整安裝碼參數


使用 PAYPAL 給我最大的感受是,不曉得是使用者太多,還是 PAYPAL 太節省建構伺服器的費用,網站連線速度總是慢的可以,每次使用 PAYPAL 無論是查詢或測試,實在非常痛苦!

因此如果日後要調整按鈕內容,如果熟悉 HTML 的話,其實直接修改即可,能不進入官網是最好的了。

以台幣刷卡

以下的安裝碼修改將以上面這個贊助按鈕當作範例:


  • 橘色這一行程式碼非常重要,這是官方程式碼沒有的內容。如果你的安裝碼沒有這一行,且 PAYPAL 按鈕按下後,會產生語系錯誤,請務必補上這一行
  • 但是!如果你安裝了這一行,反而產生語系錯誤,那麼請刪除橘色這一行
  • 紅色字串請改為「二、PAYPAL 贊助按鈕」→ 步驟 5 產生的自己的亂數 ID。
  • 藍色字串為標題,可自行修改
  • 如要修改下拉選單的金額、字串、項目數量,請直接增減 HTML 碼內容。
  • 綠色字串為 WFU 製作的圖片,可顯示 "信用卡贊助" 的字樣 → 也可改為自訂的圖片網址。

以上內容修改完後,貼到自己網頁要顯示的地方即可。



四、訂閱按鈕


訂閱按鈕的用途類似訂閱週刊、月刊這類的讀物,可讓讀者定期定額付款,也可說是分期付款。

雖然 WFU 覺得用到的機會不高,不過既然讀者問到這一項,且或許有的網站可走 "質報" 路線,讓讀者長期贊助也說不定。

回到「二、PAYPAL 贊助按鈕」→ 步驟 3,改選 "訂閱" 按鈕。


paypal-button-6

如上圖,訂閱按鈕比較特殊的是,可以選擇付款的週期,從 "日" ~ "年" 都有,時間到了就自動跟讀者收款。

由於其餘步驟或操作相去不遠,就不多著墨了。若要修改 HTML 碼,請直接參考「三、調整安裝碼參數」舉一反三即可。



五、版面配置


對於不熟悉、或沒使用過 PAYPAL 的訪客,其實看到 PAYAL 的操作介面會感到恐懼,因此如果能加上 PAYPAL 的操作畫面說明指引,可增加成交的機率。

這是本站的「贊助頁面」連結,除了有開合功能的操作說明,還提供兩種幣別 "台幣"、"美金",方便台灣以外的讀者操作。

如果對網頁語言熟悉的話,參考這個頁面依樣畫葫蘆製作贊助按鈕,就能做出類似效果的版面配置了。


更多網站工具:

Blogger 放大留言頭像尺寸的 JS 語法

$
0
0
過去曾寫了幾篇關於修改 Blogger 頭像尺寸的文章,例如「舊範本修改各種身份頭像」、「新範本修改留言頭像尺寸及形狀的 CSS 語法」。

不過最近 +toa to於這個「Blogger 中文社群討論串」表示, "最近發現,雖然把頭像變大了,但網址還是s35-c,導致圖片看起來很模糊"。後來仔細想了一下,當初寫 CSS 修改語法時,並不會有這樣的問題,那麼大概是 Blogger 有什麼地方做了變動,因此無法再用 CSS 語法就能處理這件事。

以下先大致說明前因後果、需要解決的問題,想直接安裝請跳「二、準備動作」。

(圖片出處: pixabay.com)


一、需要克服的問題


1. Blogger 的修正

以前 WFU 發現留言者頭像有個大問題,若上傳的頭像尺寸很大,那麼當留言數量很多時,光是讀這些頭像圖檔,就要花很多流量與載入時間。

正因為這些原始的頭像圖檔尺寸可能都很大,那麼之前寫的「新範本修改留言頭像尺寸及形狀的 CSS 語法」,只要透過設定 CSS 寬度,就足以變頭像尺寸、且不會失真。


2. 產生的問題

現在 Blogger 強制將所有留言頭像改為 35 x 35 的尺寸,也就是有帳號的頭像圖檔網址參數一律成為 "s35-c":
  • 好處如上述所提,可以大大提升網頁載入速度。
  • 壞處就是,無法再經由修改 CSS 來改變真實的頭像圖片尺寸。
  • 解決方法為,另外寫 JS 來動態修改圖片尺寸。


3. 各種頭像身份

然而,依據留言者身份的不同,會出現各種的頭像圖案,因此本篇的 Hack,也必須一併處理下列這些身份的頭像尺寸:
  • Blogger 帳號未設定頭像
  • OPEN ID
  • 匿名、無帳號的頭像




二、準備動作


本篇的 Hack 只能做到用 JS 修改圖檔網址及參數,還需要另外設定 CSS 才能真正變更頭像尺寸,因此請務必先參考「Blogger 修改留言頭像尺寸及形狀的 CSS 語法」的流程,設定完所有 CSS 參數。



三、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

E:紅色參數輸入頭像的長寬像素值。

因為桌機的螢幕多半很大,瀏覽器必須將網頁放大顯示,為了讓頭像不模糊,如果頭像在「二、準備動作」想要顯示的尺寸,CSS 設定為 50px 的話,建議 E 行參數設定為 100,將圖片尺寸先行放大為兩倍,這樣瀏覽器顯示頭像的效果會比較清晰。

F:藍字圖片網址可置換為自訂的 "無帳號頭像圖案"

G~H:如想使用自訂的 Blogger 帳號、OPEN ID 圖案,可置換藍字圖片網址。

以上修改完,存檔即可看到效果。


更多 Blogger 留言相關工具:

避免使用 PICASA 網路相簿圖片外連,會造成 Google+ 及 Blogger 縮圖失效

$
0
0
picasa-google-photo-blogger之前曾寫過一篇「Google Drive 當圖床對 Blogger 的不好影響__使用 Picasa 的三大好處」,主要是因為 PICASA 的圖片網址,能夠產生各種縮圖尺寸,這算是 Google 非常高竿的獨家技術。

不過 Google 前陣子推出了同質性的新產品「Google 相片」,這個決策似乎影響了「PICASA 網路相簿」,從七月以來發生了一些災情:

1. Blogger 縮圖失效:詳細情形請見「Blogger 相關文章 V2__安裝懶人包」的留言 #43 ~ #45。

2. Google+ 縮圖失效:詳細情形請見這個「Blogger 中文社群討論串」。

針對這些狀況,有必要瞭解一下如何因應,如果習慣使用 PICASA 網路相簿的讀者,請詳讀本文的分析,我們要討論可能的替代方案:
  • Blogger 上傳圖片
  • Google+ 相片(相簿)
  • Google 相片(相簿)


一、G+ 與 Blogger 的縮圖網址


雖然這個情況看起來很嚴重,不過 WFU 認為會受到影響的讀者沒有想像中多,因為相信絕大多數 Blogger 站長文章中使用的圖片,多半是從後台編輯文章時上傳,那麼就不必擔心此事。

要瞭解因應之道,得先知道 G+ 與 Blogger 的縮圖原理。請先閱讀「使用 Picasa 的三大好處」,大致瞭解以下幾點:

  • Blogger 後台上傳的圖片,網址參數最後都會有 ".../s???/檔名.jpg" 這樣的格式 → ???就是代表這張圖片的尺寸
  • Blogger 會從每篇文章的第一張圖片網址,將 "s???" 這個參數,改為 "s72-c",在 feed 裡存成縮圖 → 這代表 72px 的正方形縮圖
  • G+ 則會將 "s???" 這個參數,改為符合當下寬度尺寸參數,來顯示縮圖
  • 我們如果想自行產生 300px 寬的縮圖,那麼只要將參數改為 s300 即可,其他尺寸可以此類推。

有了以上基礎知識後,我們再繼續看下去。




二、PICASA 網路相簿



1. 參數改變了

現在我們進入「PICASA 網路相簿」後:

picasa-change-url-1

隨意找張圖片來測試,如上圖,按右鍵取得圖片網址。


wfublog-anniversary

上圖的網址為:

https://lh3.googleusercontent.com/-hMRDr2V-aXs/U1osx1KDYAI/AAAAAAAAJTQ/MUCYt2BFiOk/s420-Ic42/wfublog-anniversary.png
請注意紅字的參數,格式跟以前完全不一樣了,後面多了 "IC42" 這樣的字串。


2. 無法取得各種尺寸縮圖

根據「一、G+ 與 Blogger 的縮圖網址」我們知道,若將參數改為 "s300" 可產生 300px 寬的縮圖。但現在 PICASA 網路相簿完全失去了這個功能,改了網址參數後,只會看到以下畫面:


picasa-change-url-2

這是上圖的網址參數:

https://lh3.googleusercontent.com/-hMRDr2V-aXs/U1osx1KDYAI/AAAAAAAAJTQ/MUCYt2BFiOk/s300/wfublog-anniversary.png
所以現在讀者可以了解,PICASA 網路相簿的圖片網址,以後將無法改變網址參數。如果某篇文章第一張圖片使用了這樣的圖片,會導致無法產生 Blogger 縮圖,同時該篇文章分享到 Google+ 時,也無法產生縮圖了!!


3. 可能的原因

前面提過,能夠產生各種縮圖尺寸,是 Google 的獨家技術,不過這需要大量的伺服器 CPU 運算。

個人猜測,也許 Google 同質性的產品太多,因此 PICASA 網路相簿是取捨下的犧牲品,Google 決定減少 PICASA 網路相簿的 CPU 使用率,導致拔除了「產生各種縮圖尺寸」這項功能。



三、Blogger 的圖片網址


如果是純粹使用 Blogger 的站長,圖片都是從文章編輯的畫面上傳,那麼一點都不會受到影響。

wfublog-anniversary

上圖是後台上傳產生的圖片,網址為:

http://4.bp.blogspot.com/-hMRDr2V-aXs/U1osx1KDYAI/AAAAAAAAJTM/Fa2-yAEaZkM/s1600/wfublog-anniversary.png
我們可看到參數 s1600,代表這是原圖大小。

同時也可任意將參數改為 s100 → 就會產生 100px 寬的圖片 → 由於參數可任意修改,這代表要產生 Blogger 縮圖、或是 G+ 縮圖都是沒有問題的。



四、Google+ 相片


相信我,「Goolgle+ 相片」跟「Google 相片」,你一定會搞混。

1. 如何進入 Google+ 相片

這是原本 Google+ 相片的網址:


但是 Google 為了推廣 Google 相片,上面這個網址會強制跳到 Google 相片。

因此,要進入原本的 Google+ 相片請改由以下網址:



2. 取得 Google+ 相片的圖片網址

google-plus-image-url-1

隨便進入一張圖片來測試,如上圖,按右鍵取得圖片網址。

這張圖的圖片網址格式如下:

https://lh3.googleusercontent.com/-7XB9wXTOy7I/VSNU2gc83jI/AAAAAAAALc0/JICvWl5UlRc/w945-h630-no/cc0-image-search-engine.jpg
  • 我們可看到網址參數不太一樣 → "w945-h630-no"
  • 這參數代表此圖 945px 寬、630px 高
  • 若改成其他數字,一樣能呈現不同尺寸的縮圖


3. 無法產生 Blogger 縮圖

經過實測後,這樣的參數可以讓 G+ 產生縮圖,畢竟這是「G+ 相片」,沒什麼道理無法處理。

但是很可惜,無法產生 Blogger 縮圖。推測原因為,Blogger 需要 "s???" 這樣格式的圖片網址,系統才能夠處理。


4. 手動修改參數

為了讓 Blogger 順利產生縮圖,我們將 "w945-h630-no" 這個參數改為 "s1600"、或是 "s0" 也可,都是原圖尺寸的意思。

圖片網址成為:

https://lh3.googleusercontent.com/-7XB9wXTOy7I/VSNU2gc83jI/AAAAAAAALc0/JICvWl5UlRc/s1600/cc0-image-search-engine.jpg
這樣就能讓 Blogger 產生縮圖了。

因此結論為:使用「G+ 相片」的圖片網址時,需要手動修改參數為 "s???" 這樣的格式


5. 圖片無法顯示的原因

雖說「Google+ 相片」也能順利產生 Blogger 及 G+ 縮圖,但比「從 Blogger 後台上傳」的圖片稍微麻煩一些,而且也容易不小心設錯權限而讓訪客看不到圖片

解決的方法請參考「Blogger 各種圖片異常狀況處理」→「六、圖片消失了」,將 G+ 相簿的權限設定為 "公開"。



五、Google 相片


最後來測試「Google 相片」。

隨意點選一張圖片,按右鍵複製網址後,圖片網址格式如下:

https://lh3.googleusercontent.com/T4V29Dh1pnHA_z5hz7mtE-OJkMcaLejzfQiH2oj99Xo=w623-h641-no
看得出「Google 相片」的圖片網址格式跟以往大相逕庭,完全沒有檔名,且參數 "w623-h641-no" 挪到了最後。

這樣的參數一樣能夠修改,只不過測試的結果:
  • 跟 Blogger 不相容,無法產生縮圖
  • 跟 G+ 相容,可以產生縮圖



六、總結


看完全部的測試結果,相信讀者也都知道該怎麼做了。如果你是 Blogger 站長,那麼以下是簡單的結論:

1. 不要使用「PICASA 網路相簿」、「Google 相片」產生的圖片網址→ 無法產生 Blogger 縮圖 → 會導致各種需要縮圖的 Blogger 工具失效,例如「熱門文章」、「相關文章」、「隨機文章」、「首頁輪播」等等。

2. 最好利用「Blogger 後台上傳圖片」來取得圖片網址

3. 不嫌麻煩的話,可以使用「G+ 相片」來取得網址,再修改參數為 "s???",並注意權限要設定為 "公開"。


更多 PICASA 相關文章:

Blogger 首頁文章怎麼消失了?

$
0
0
add-readmore其實這個問題已經趨近每月一問,由於出現次數頻繁,乾脆整理成一篇,以後直接給此篇連結就好。

要瞭解這個問題之前,得先瞭解 Blogger 的官方限制。知道原理之後,就能理解解決方法了。



一、Blogger 所有官方限制


1. 官方規定

請先進入官方網頁「Blogger 相關限制」,這個網頁列出了所有 Blogger 各種項目的使用上限,例如:

  • 網誌數量:每個帳戶最多可擁有 100 個網誌。
  • 小組成員:每個網誌最多只能有 100 位小組成員。
  • 標籤數量:每個網誌最多可設定 2000 個不重複的標籤,而每篇文章最多可設 20 個不重複的標籤。
  • 文章數量:每個網誌都沒有文章篇數的限制。


其中的規定,與本文現象有關的是這兩條:

  • 文章大小:個別文章無特定的大小限制,但文章篇幅過大可能會超出網頁的大小限制 (請參閱下一項規定)。
  • 網頁大小:個別網頁 (您網誌的主網頁或封存的網頁) 大小限制為 1 MB這個上限足以容納數百個文字頁面,但如果您要直接在網誌首頁列出數百篇文章,可能行不通。如果您的網頁大小超出限制,系統就會顯示「006 請洽詢 Blogger 支援小組」錯誤訊息。只要減少首頁的文章篇數即可避免發生這個問題,同時也能加快您的網頁載入速度。

紅字這一行為關鍵點,當 Blogger 系統讀取一個頁面的資料超過 1MB 時,便會停止讀取。


2. 網頁 1MB 限制的問題

瞭解這一點後,我們知道,網頁讀取資料量最大的就是圖檔,如果一篇文章放了很多圖片,就可能產生兩種現象:

1. 單一文章超過 1MB:如果某篇文章圖片太多,導致網頁讀取超過 1MB 的話,那麼超過的部分(內容),就無法顯示出來。

2. 單一網頁超過 1MB:如果是首頁,同時顯示多篇文章,雖然單一文章沒超過 1MB,但多篇文章都有大量圖片,導致加總超過 1MB,那麼超過的部分、或文章,就無法顯示出來。

瞭解以上原理後,後續針對各種異常現象,提出因應的解決方法。




二、減少圖片傳輸量


如果單篇文章圖片過多,導致該篇文章無法完整顯示內容,那麼縮減圖片的尺寸、以及檔案大小是第一要務。

請參考「優化網站效能該注意哪些事?」→「一、是否使用高清圖片?」,想辦法將圖片瘦身。

另外,其實從 Blogger 後台文章上傳圖片時,都會有尺寸的問項。如果非旅遊、美食類需要吸睛效果的網站,那麼可選擇尺寸較小的選項,雖然縮圖看起來不太清楚,但點擊後另開視窗,或是使用官方燈箱、或「Fancybox 燈箱效果」,訪客仍可看到清楚的原圖尺寸。



三、官方繼續閱讀


如果是首頁,有多篇文章加總的傳輸量超過 1MB,導致部分文章無法顯示,那麼最簡單的解決方法,就是使用官方的「繼續閱讀」功能。

這個功能使用了之後,每篇文章只要手動插入繼續閱讀,那麼 Blogger 首頁在讀取文章時,「繼續閱讀」之後的資料,包含所有圖片,都不會讀取,自然也不會算進 1MB 的網頁傳輸量。

使用說明很簡單,請參考官方教學網頁「建立「繼續閱讀」摘要」。



四、非官方繼續閱讀


很多使用者從網路抓了「繼續閱讀」的外掛,其實這可能是讓首頁文章無法正常顯示的禍首。

例如「繼續閱讀懶人加強版」,這個程式功能很不錯,可自動產生「全文|摘要|標題」的連結按鈕,就像這樣:

readmore-plugin


不過這樣的外掛並無法取代官方「繼續閱讀」的功能,如果每篇文章沒有手動設定「繼續閱讀」,而是倚靠此類外掛來顯示繼續閱讀的效果,那麼現在瞭解原理的讀者就能理解,為何這樣的外掛,會讓某些文章在首頁消失了。

當然這樣的外掛有他的時空背景,因為 2007 當年 Blogger 尚未推出「繼續閱讀」功能,使用者只好自力救濟,寫出 "假性的" 繼續閱讀功能。現在既然官方已經有了「繼續閱讀」,請一律為自己的文章手動添加「繼續閱讀」標記吧!



五、非官方模版


也有很多的使用者,是下載了非官方範本,而導致首頁文章消失。這樣的情形,比安裝「非官方繼續閱讀」還更不容易解決。

非官方範本數量太多,我們無法知道每個範本對於 "繼續閱讀" 這部分的程式碼,是如何處置:

1. 或許有的範本,只要跟 "非官方繼續閱讀" 一樣,手動為文章加上「官方繼續閱讀」標記,就能讓首頁文章正常顯示。

2. 但或許有的範本,官方繼續閱讀的相關程式碼根本不存在,或是使用了特殊的程式寫法,就算手動加了「官方繼續閱讀」標記也沒有作用,那麼這種情形就不容易解決了

因此,若遇上無法解決的非官方範本,只能建議換個範本了!


更多 Blogger 相關文章:

CSS 色碼英文名稱對照表一覽﹍快速挑選好看的顏色

$
0
0
color-code-table之前看到這篇「CSS1-CSS3 顏色知識知多少?」,整理了所有 "可用英文命名" 的顏色及色碼,這樣的表格對於查找顏色還滿不錯的。

由於原作者的表格,是依照 CSS1 ~ CSS3 的順序來編排,算是學術用途。我把這個表格整理了一下,變成可以依照英文字母、也可依照色碼來升冪、降冪排序,這樣對於實務用途會比較方便。



一、方便找顏色及色碼的網站


如果不需要英文名稱的話,那麼推薦這兩個網站,整理的顏色比較有系統一些。

1. 依彩虹七色排列


color-code-1

這個網頁依照「紅、橙、黃、綠、藍、靛、紫、黑色」的排列方式,每個顏色由淺到深列出。不想太傷腦筋來挑顏色的話,這個列表很方便。


2. 特殊顏色排列


color-code-2

這個網頁把顏色分的更細,不過每個色系一樣提供由深到淺的排列方式,因此查找顏色也是很方便,而且可以找到更特殊的顏色及色系。




二、色碼英文名稱對照表


以下這個表格,預設排列方式為 "由淺到深",從色碼 #ffffff (白色) 一直排列到 #000000 (黑色)。不過考慮到會有讀者想要 "由深到淺"、或是從英文名稱來搜尋顏色,那麼就需要不同的排列方式。

為了符合各種需求,讀者可自行點擊這兩個標題「顏色名稱」、「色碼」,就可看到不同的排序效果了。

顏色名稱色碼
white#ffffff
ivory#fffff0
lightyellow#ffffe0
yellow#ffff00
snow#fffafa
floralwhite#fffaf0
lemonchiffon#fffacd
cornsilk#fff8dc
seashell#fff5ee
lavenderblush#fff0f5
papayawhip#ffefd5
mistyrose#ffe4e1
bisque#ffe4c4
blanchedalmond#ffe4c4
moccasin#ffe4b5
navajowhite#ffdead
peachpuff#ffdab9
gold#ffd700
pink#ffc0cb
lightpink#ffb6c1
orange#ffa500
lightsalmon#ffa07a
darkorange#ff8c00
coral#ff7f50
hotpink#ff69b4
tomato#ff6347
orangered#ff4500
deeppink#ff1493
fuchsia#ff00ff
red#ff0000
oldlace#fdf5e6
lightgoldenrodyellow#fafad2
linen#faf0e6
antiquewhite#faebd7
salmon#fa8072
ghostwhite#f8f8ff
mintcream#f5fffa
whitesmoke#f5f5f5
beige#f5f5dc
wheat#f5deb3
sandybrown#f4a460
azure#f0ffff
honeydew#f0fff0
aliceblue#f0f8ff
khaki#f0e68c
lightcoral#f08080
palegoldenrod#eee8aa
violet#ee82ee
darksalmon#e9967a
lavender#e6e6fa
lightcyan#e0ffff
burlywood#deb887
plum#dda0dd
gainsboro#dcdcdc
crimson#dc143c
palevioletred#db7093
goldenrod#daa520
orchid#da70d6
thistle#d8bfd8
lightgrey#d3d3d3
tan#d2b48c
chocolate#d2691e
peru#cd853f
indianred#cd5c5c
mediumvioletred#c71585
silver#c0c0c0
darkkhaki#bdb76b
rosybrown#bc8f8f
mediumorchid#ba55d3
darkgoldenrod#b8860b
firebrick#b22222
powderblue#b0e0e6
lightsteelblue#b0c4de
paleturquoise#afeeee
greenyellow#adff2f
lightblue#add8e6
darkgrey#a9a9a9
brown#a52a2a
sienna#a0522d
yellowgreen#9acd32
darkorchid#9932cc
palegreen#98fb98
darkviolet#9400d3
mediumpurple#9370db
lightgreen#90ee90
darkseagreen#8fbc8f
saddlebrown#8b4513
darkmagenta#8b008b
darkred#8b0000
blueviolet#8a2be2
lightskyblue#87cefa
skyblue#87ceeb
grey#808080
olive#808000
purple#800080
maroon#800000
aquamarine#7fffd4
chartreuse#7fff00
lawngreen#7cfc00
mediumslateblue#7b68ee
lightslategrey#778899
slategrey#708090
olivedrab#6b8e23
slateblue#6a5acd
dimgrey#696969
mediumaquamarine#66cdaa
rebeccapurple#663399
cornflowerblue#6495ed
cadetblue#5f9ea0
darkolivegreen#556b2f
indigo#4b0082
mediumturquoise#48d1cc
darkslateblue#483d8b
steelblue#4682b4
royalblue#4169e1
turquoise#40e0d0
mediumseagreen#3cb371
limegreen#32cd32
darkslategrey#2f4f4f
seagreen#2e8b57
forestgreen#228b22
lightseagreen#20b2aa
dodgerblue#1e90ff
midnightblue#191970
aqua#00ffff
springgreen#00ff7f
lime#00ff00
mediumspringgreen#00fa9a
darkturquoise#00ced1
deepskyblue#00bfff
darkcyan#008b8b
teal#008080
green#008000
darkgreen#006400
blue#0000ff
mediumblue#0000cd
darkblue#00008b
navy#000080
black#000000



三、簡易使用方法


一般而言,除非是靠設計吃飯,否則色碼看起來跟不懂程式的人看 code 的感覺是一樣的。範本中各處的色碼,對我們一般使用者而言,代表的含意跟 QR CODE 看起來是差不多的。

如果範本中放置的色碼,能夠改由英文名稱呈現,可以一定程度地增加辨識率,那麼我想會是本篇這個表格可以發揮的作用。

如果讀者有 CSS 基礎的話,那麼可以理解使用顏色的語法會是這樣:

color: #e6e6fa
使用這個對照表後,那麼這個顏色的表達方法,就可以改為以下:

color: lavender
也就是 "薰衣草" 色,這樣在範本進行維護、搜尋就可以方便許多。


更多 CSS 相關文章:

讓網頁表格能自動排序﹍TableSorter 安裝懶人包

$
0
0
web-table-sort-jquery-plugin前陣子製作「CSS 色碼英文名稱對照表一覽」時,需要一個 "讓表格能排序" 的功能,這樣讀者就能依照自己需求,針對不同欄位進行排序,如此查找資料非常方便,算是一個「友善的使用者體驗」。

因此研究了一下網頁表格排序的功能,本篇記錄一下處理的心得,並將安裝方式整理成懶人包,有需要的讀者套用起來會很方便。



一、TableSorter 介紹


在所有 jQuery 表格排序外掛裡面,TableSorter 算是使用率最高的,而且擴充功能相當多(但不一定用得到),因此本篇推薦這個工具。

1. 官網說明


進入上面這個官網連結後,也許讀者會看得很頭大,除了英文介面不容易看懂,其實版面設計對於想趕快安裝的人來說,需要花一番功夫才能理解,WFU 相信多數讀者很難成功地把這個工具裝起來。不過這仍然無法掩蓋作品的強大,因為作者真的把功能寫得很好。

如果安裝過「fancybox 燈箱」這類 jQuery 外掛,過程可能會遇上不少麻煩,因為得找免費空間自行上傳一大堆 js/css/jpg/gif 檔案 。

而這個 TableSorter 也是同樣情形,如果不想用本篇的懶人包,有辦法自行搞定免費空間的話,那麼可以參考「fancybox 燈箱」的安裝流程,自行從 TableSorter 官網下載相關檔案,並安裝 TableSorter。


2. 表格排序效果

以「部落格會員系統」的資料為例,下面的表格為安裝了這個工具之後的效果,點擊標題欄位,即可針對各欄位進行排序

權限會員編號暱稱性別註冊時間
加值會員W00001Wayne男生2014/9/12
一般會員W00002Chen女生2014/9/17
一般會員W00003Ken男生2014/9/17
一般會員W00004Sung男生2014/9/17
一般會員W00005Liu男生2014/9/17
一般會員W00006Don男生2014/9/18
一般會員W00007Chan女生2014/9/18
一般會員W00008Tung女生2014/9/18
一般會員W00009陳俊男生2014/9/18
一般會員W00010HY男生2014/9/18


3. 額外功能

本篇的懶人包,雖然只有基本功能,不過相信已經能夠應付大部分的狀況。如有更多額外的需求,可參考官網的說明來下載額外的檔案、進行更多的操作。

同時也可參考這篇「tablesorter 表格排序效果」,提供了一些基本功能之外的操作範例。




二、表格(Table)範例


要讓這個工具生效,最好有基本的 HTML 知識,因為它只能在 "特定的 Table" 格式生效。如果你製作的 Table 表格 HTML 碼不符合格式,那麼程式不會發生作用。

以前面的「會員系統」表格為例,下面是 HTML 碼範例:

<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>權限</th>
<th>會員編號</th>
<th>暱稱</th>
<th>性別</th>
<th>註冊時間</th>
</tr>
</thead>
<tbody>
<tr><td>加值會員</td><td>W00001</td><td>Wayne</td><td>男生</td><td>2014/9/12</td></tr>
<tr><td>一般會員</td><td>W00002</td><td>Chen</td><td>女生</td><td>2014/9/17</td></tr>
<tr><td>一般會員</td><td>W00003</td><td>Ken</td><td>男生</td><td>2014/9/17</td></tr>
<tr><td>一般會員</td><td>W00004</td><td>Sung</td><td>男生</td><td>2014/9/17</td></tr>
<tr><td>一般會員</td><td>W00005</td><td>Liu</td><td>男生</td><td>2014/9/17</td></tr>
<tr><td>一般會員</td><td>W00006</td><td>Don</td><td>男生</td><td>2014/9/18</td></tr>
<tr><td>一般會員</td><td>W00007</td><td>Chan</td><td>女生</td><td>2014/9/18</td></tr>
<tr><td>一般會員</td><td>W00008</td><td>Tung</td><td>女生</td><td>2014/9/18</td></tr>
<tr><td>一般會員</td><td>W00009</td><td>陳俊</td><td>男生</td><td>2014/9/18</td></tr>
<tr><td>一般會員</td><td>W00010</td><td>HY</td><td>男生</td><td>2014/9/18</td></tr>
</tbody></table>

主要有兩點要注意:

  • Table 標籤必須加上紅色字串,設定 id 及 class
  • 請注意綠色字串 <thead> ~ </thead>的區間,一般的 Table 表格不一定會用到 thead 標籤,但這個工具一定要設定 thead 標籤才行

為了讓程式能正常執行,建議可以拿以上 HTML 碼來進行修改,會比較保險。



三、安裝程式碼


大部分情形下,jQuery 外掛多半安裝在範本之中。不過 WFU 認為表格排序的功能不常用到,如果裝在範本中,會導致每個網頁都執行這個外掛,對於網頁執行效率是一種浪費。

因此建議要用到表格排序的網頁、或該篇文章,再安裝這個工具即可!那麼以下的程式碼,請放在你的表格 HTML 碼之後,也就是該網頁、或該篇文章之中:


以下參數修改請參照以上程式碼行號:

A:可參考「如何使用jQuery版本」,檢查範本是否已安裝過 jquery,以免重複安裝。

B~AO:可自行修改 CSS 參數,調整版面效果。

AP:由於過去發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者有空的時候,參考以上文章連結,自行將綠色字串的 js 檔分流,並用「Google Drive 外連產生器 V2」取得外連網址。

AR:預設的效果會自動將表格隔行變換底色。如果希望底色一致不要換色,請將此行的紅色字串刪除即可



四、補充說明


前陣子寫過一篇「Blogger 插入表格的最佳流程 + 自適應寬度表格」,如果按照這篇的流程,產生出來的表格 HTML 碼,不會包含 <thead>標籤,那麼本篇的工具就會失效。

按照該篇流程製作表格的讀者,可找到 <colgroup><col......</colgroup>的區段,然後將這個區段的 HTML 碼,用「二、表格(Table)範例」→ <thead> ~ </thead>這個格式的 HTML 碼取代,這樣就沒有問題了。


更多 jQuery 外掛:

[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(1) 製作表單格式

$
0
0
google-form-auto-send-email之前舊版的「讓 Google 試算表能自動寄信」,由於近期 Google Drive 雲端硬碟陸續強制升級為新版,如果是新的使用者,已經無法依照原本的流程安裝,因為官方已經取消了舊版試算表的「指令碼庫」功能,無法從後台安裝 FormEmailer 這個自動回信外掛。

其實自動回信的程式碼不難,官方已經提供了 API 可以套用,因此乾脆自己寫個簡便短小的工具,有需要的讀者可以照流程進行,一共分為兩篇,第一篇為製作表單檔案,第二篇為安裝後台自動執行的寄信程式。

為何舊版的流程只有一篇,而這個輕便的程式反而需要更多篇幅呢?主要是因為舊版雲端硬碟的 "表單" 與 "試算表" 儲存在同一個檔案,操作比較簡單;而新版雲端硬碟必須 "表單" 製作一個檔案、"試算表" 另外一個檔案,只好分成兩篇說明了。

(圖片出處: pexels.com)



一、自動寄信方案的抉擇


新版雲端硬碟雖然也可找到寄信外掛,例如「Yet Another Mail Merge」,不過比原本的難用很多。如果要繼續使用 FormEmailer 也不是不行,那麼只能改為手動安裝程式碼。

一方面 FormEmailer 手動安裝的流程長,一方面 FormEmailer 的開發比較像個套裝軟體,功能很多很強,程式碼幾乎用了上千行,執行起來較耗 Google 伺服器的資源。

其實 "自動寄信" 的功能只要幾行就解決了,如果跟 WFU 一樣只需要 "寄信" 功能而已,那麼不一定需要安裝 FormEmailer。如果改用 WFU 的工具,簡潔的寄信程式執行快、可減少伺服器資源的使用,這一點對於長期使用 Google 免費資源的我們來說,能夠幫 Google 節省越多資源,代表免費資源減少濫用,自然能使用得越長久。




二、製作新版 Google 表單


首先進入「Google Drive」官網:

google-form-1

如上圖,按「新增」→「更多」→「Google 表單」


google-form-2

如上圖,依 A~E 的順序:
  • A. 修改表單標題
  • B. 改為「單行文字」
  • C. 填入自訂項目的字串。如果需要使用「Google 試算表當小型資料庫」,請依照這篇的說明改用 "小寫英數組合" 的字串。
  • D. 按下「完成」,結束第一個項目的設定。
  • E. 按下「新增項目」設定其餘項目。

重複 B~D 流程來設定其餘所有表單項目。


google-form-3

補充一下,這三個項目是模擬「會員系統」讓會員填寫的項目,如果要讓填寫表單的人,填寫完畢之後能夠收到感謝、或是制式訊息,那麼設計表單項目時必須有一欄能填入 email 才行

比較常見的情境像是問卷調查、或是出試題給學生,填寫完畢後自動把記錄用 email 給填寫者留存,例如「讓 Google 試算表製作的問卷試題能自動計分」。

完成所有項目後,如上圖按下「查看即時表單」,可測試填寫表單。


google-form-4

此為範例畫面,填寫完按「提交」即可


google-form-5

填寫完畢後,若想利用試算表儲存所有表單提交的記錄,得另外產生一個試算表。請按「查看回應」→ 修改試算表的標題字串 → 按下「建立」即可。


google-form-6

在 Google Drive 的主畫面可看到這個新建立的試算表


google-form-7

進入試算表後,可看到我們剛剛填寫的內容,已經儲存到試算表當中。

完成以上流程後,接著下一篇將說明,如何在新版 Google 試算表,安裝「自動寄信」的程式碼。

[教學] 讓新版 Google 表單(試算表)能自動寄信﹍(2) 安裝程式碼

$
0
0
google-spreadsheet-auto-send-email以下接續「第一篇」的步驟。



google-spreadsheet-auto-send-email-1

在試算表的畫面,按「工具」→「指令碼編輯器」


google-spreadsheet-auto-send-email-2

圖中紅框原本的程式碼請全部清除,置換為本文的安裝程式碼。




三、安裝程式碼



如果要修改參數的話,請參照以上程式碼行號。

B:紅色字串請務必改為自己的 email 地址

C:此行字串可改為自訂標題

D:如果你的 Google 表單供填寫 email 的項目名稱就是 "email",此項不必變動

E:每個 Google 帳號每日可寄信的額度為 100 封,可設定剩下多少額度時通知自己。

這個工具預設為寄信給填表者,如果要改為只通知自己的話,請將 W行的 notifyEmail 置換為 adminEmail,那麼我們不必進入試算表,就能即時看到所有的填寫資訊,也是相當方便的功能。



四、設定寄信觸發程序


google-spreadsheet-auto-send-email-3

程式碼設定完畢後,如上圖,先按 A 處的圖示儲存,再按「資源」→「現有專案的啟動程序」,來設定觸發程序。


google-spreadsheet-auto-send-email-4

按下紅框的字串


google-spreadsheet-auto-send-email-5

按 A~C 的順序,依序調整為圖中的選項,便能在填寫者提交表單時,立即送出 email 通知。

最後按下「儲存」。


google-spreadsheet-auto-send-email-6

寄信功能會要求授權,應該會彈出上圖訊息,按下「繼續」,並依照後續畫面指示,完成授權動作即可。

過去曾有讀者表示,授權畫面不會出現,最後搞了很久才找出原因,原來是瀏覽器安裝了「擋廣告」之類的外掛。建議讀者不要安裝各種擋廣告的外掛,否則很多網頁異常的狀況會讓你花更多時間 debug,卻又找不出原因來。



五、測試自動寄信功能


google-spreadsheet-auto-send-email-7

回到試算表主畫面,我們來試試看能否自動寄信。如上圖按「表單」→「查看即時表單」,自行填寫表單測試。


google-spreadsheet-auto-send-email-8

隨意填寫,按「提交」送出資料。


google-spreadsheet-auto-send-email-9

回到試算表,立即看到新增的一筆資料,請看紅色底線標註的時間點。

如果有安裝「Checker Plus for Gmail™」這類的瀏覽器外掛,其實沒幾秒就會收到信件通知了。


google-spreadsheet-auto-send-email-10

檢視一下 Gmail 的畫面,果然馬上就收到了表單填寫通知。而且無論表單設計了幾個項目,這個工具都會取出所有項目及填寫資料,並在通知信件中列出,可說非常的實用!


更多 Google 試算表工具:

讓 Line 按鈕只在手機+行動裝置顯示

$
0
0
line-button-mobile-device如果網站有安裝過 Line 按鈕的話,應該會發現只有行動裝置(手機+平板)有作用,而網頁版的 Line 按鈕按下後,只會連結到官網。

前陣子有讀者反應,"能否讓 Line 按鈕只在手機及平板出現,網頁版不要出現?"。的確,如果能這麼做的話是最好,以下就來看看這件事如何進行。



一、Line 按鈕的難題


先說結論,這件事沒有 100% 的完美解決方法,但是有應付 95% 的語法,在新技術尚未出來之前,相信這是可以接受的處理方式。

1. 判斷行動裝置

事情的癥結在於目前不存在一個完整的機制,能夠有效偵測所有的行動裝置。雖然兩大陣營 Android、iOS 可以用語法偵測出來,但由於行動裝置推陳出新,新型號、山寨機不斷產生,終究兩大系統之外的機型,JS 語法不一定能偵測得到。


2. 目前完美解法

唯一能偵測所有行動裝置的方法,就是建立一個資料庫,記錄所有型號,例如這個「mobile-detect.js」。

先說結論,WFU 不認為這是好的解決方案,一方面這個外掛檔案太大(35k),沒什麼必要為了 Line 按鈕這件事而多裝個大外掛;另一方面不斷有新的行動裝置機型,代表你得每個一段時間就到官網檢查 mobile-detect.js 是否有更新,不但麻煩,而且作者也不見得願意這麼勤奮,肯無償花時間來隨時更新資料庫。


3. 最佳解

WFU 認為的最佳解,就是不要追求完美解,捨棄支援少部分行動裝置,讓主流行動裝置能支援就好。如此不但省事,也不必安裝多餘外掛。




二、安裝 Line 按鈕


雖然「Line官網」提供了分享按鈕的安裝語法,不過執行效果不是很好。

請參考這篇「Line 分享按鈕各種行動裝置都相容的語法」,改用調校過的語法,可以在各種行動裝置的執行效果最佳化。



三、判斷行動裝置


1. 判斷行動裝置的語法

根據這篇「What is the best way to detect a mobile device in jQuery?」,以下的語法可以判斷出九成以上的行動裝置,涵蓋了 Andoird/蘋果/黑莓機...等等:

<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// 這裡放入 Line 安裝語法
}
</script>


2. 判斷手機的語法

如果要排除平板,單單判斷出手機裝置的話,Blogger 有個「行動版判斷式」滿好用的。

偷偷看了一下 Blogger 原始碼,研究一下 Google 工程師是怎麼判斷行動裝置的:

var a="indexOf",b="&m=1",e="(^|&)m=",f="?",g="?m=1";function h(){var c=window.location.href,d=c.split(f);switch(d.length){case 1:return c+g;case 2:return 0<=d[1].search(e)?null:c+b;default:return null}}var k=navigator.userAgent;if(-1!=k[a]("Mobile")&&-1!=k[a]("WebKit")&&-1==k[a]("iPad")||-1!=k[a]("Opera Mini")||-1!=k[a]("IEMobile")){var l=h();l&&window.location.replace(l)};
這一段看起來像是天書的內容,跟前面判斷行動裝置的語法沒有差太遠,試著改成以下:

<script>
if( /iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && /(?=.*Mobile)(?=.*WebKit)/i.test(navigator.userAgent)) {
// 這裡放入 Line 安裝語法
}
</script>




四、程式碼安裝方式


1. 通用安裝方式

最簡單、所有網站通用的 Line 按鈕安裝方式,請按以下流程:

使用「三、判斷行動裝置」→「1. 判斷行動裝置的語法」的程式碼
將 "// 這裡放入 Line 安裝語法" 這些字串,改成「Line 分享按鈕各種行動裝置都相容的語法」裡的程式碼 D~I 行即可。


2. Blogger 安裝方式

Blogger 由於網頁版跟行動版範本不同,也許讀者對於 Line 按鈕,在網頁版與行動版想要擺放的位置並不一樣,那麼就得利用判斷式分別設定了。

例如手機 Line 按鈕可用以下的程式碼:

<b:if cond='data:blog.isMobile'>
這裡填入通用安裝方式的程式碼
</b:if>


平板 Line 按鈕可用以下的程式碼:

<b:if cond='!data:blog.isMobile'>
這裡填入通用安裝方式的程式碼
</b:if>


附個圖記錄一下調整後的效果,這是網頁版的擺設:

line-button-web


這是行動版(手機)上的模擬效果:

line-button-mobile


Line 相關文章:

取消 Blogger 行動版「向左/向右滑」切換文章的功能 [加值文章]

$
0
0
blogger-mobile-disable-swipe-left-right有多位讀者反應 Blogger 行動版一個非常擾民的問題,也就是操作手機時,滑動螢幕只要稍微不小心往左或往右,就會切換到「上一篇/下一篇」文章。

這個功能的設計想必是出於貼心的考量、方便訪客操作頁面的切換,但往往我們是在操作「往上/往下」時,不小心手勢的角度偏左或偏右,便會立即觸發「往左/往右」的手勢,讓網頁切換到我們不想前往的頁面,也就是跳離了這篇文章。

如果你也不喜歡官方的這個設計,那麼可以安裝本文的小工具,將此功能取消,給訪客友善的操作體驗。



一、加值文章


請注意,本篇為加值文章,需先加入會員,並獲得點數才能兌換。

有的會員可能會發現,現有的點數已經足以兌換這個小工具,而有的會員則否。由於「加值文章」功能才剛剛上線,產品線仍在規劃中。等過一陣子「會員系統」結束試營運、開始正式營運的時候,會進行詳細說明。


blogger-mobile-disable-swipe

複習一下開頭的示意圖,Blogger 在手機上向左或向右滑動時,會出現圖中的藍底半圓形,及向左向右箭頭,用來提示網頁即將前往上一頁或下一頁。

如果動作慢一點,那麼是來得及終止滑動的操作,不過相信訪客不會對 Blogger 網站的操作那麼熟悉,通常都是手一滑就出去了,然後很生氣 "為什麼明明我沒有要跳開,畫面卻自動跳開了!?"




二、準備動作


如「Blogger 行動版範本修改技巧」所提,Blogger 行動版只有選擇「自訂」才能修改,其他的官方範本全部都不能修改,因此請參照該篇文章 →「二、修改行動範本準備動作」的步驟,確認你已經改用「自訂」的行動版範本,否則依照本文安裝的程式碼將不會有任何作用。



三、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,再搜尋 </body>這個字串,找到後在此字串的下一行,插入以下程式碼:


儲存後即可看到效果。



四、聯絡表單


加值文章關閉留言板功能,使用上有任何問題請用下面的表單與我聯繫:



Blogger 行動版相關文章:

將網頁所有網址字串轉換為超連結

$
0
0
雖然「超連結」語法不難,但終究多數的訪客並不熟悉程式語言、不瞭解 HTML 碼,那麼在留言、發表意見時,若需要引用網址,訪客是不會使用 A 標籤語法的,只會直接貼上 http 開頭的網址連結字串。

如此一來,留言中的網址連結無法點擊,不利於資訊傳播。因此我們可以看到 Facebook、Google+ 等社群媒體的設計,會自動將網址字串轉換為超連結,才能發揮社群的散播力。

同樣的,如果想讓自己網站(或留言區塊)的網址字串發揮傳播力,同時也是友善的使用者體驗,那麼安裝本文這個工具相信是必須的。以下先說明程式原理,想直接安裝請跳至「二、安裝程式碼」。

(圖片出處: pixabay.com)


一、Javascript 原理


1. 超乎想像的難度

原本認為這個任務只需要用正規表示式修改字串就完成了,沒想到真正處理起來,問題非常多:

  • 使用正則式來修改字串,只能針對文字節點(text node),不可連帶修改到 A 標籤原有內容
  • 文字節點的字串內容,無法加入超連結 A 標籤的 HTML 語法 → 這些標籤語法將不會被執行,一樣被當成字串
  • 不可修改到任何 HTML 標籤裡的屬性字串(例如 title 屬性若有 "google.com" 字串就不可動到)
  • 判別網址的正規表示式,由於例外太多,很難有周全的寫法
  • 必須處理非 http 開頭的網址,例如 "google.com" 也要能判別出是網址字串


2. 參考資料

這個討論串「How to replace plain URLs with links?」整理了多種解法,留言者最推薦的「Autolinker.js」,由於此 js 實在過於肥大,WFU 不太願意為了這個小小功能而多搞一個外掛,最終還是自己來,利用 jQuery 可以輕易解決處理 DOM 文字節點的繁雜工作。

不過該討論串推薦了一個判斷網址的「正規表示式」,之後的程式碼參考了這個連結來修改使用。這個 Regex 的優點是,有無 http 開頭的網址字串都能判斷出來,且考慮的狀況算是非常周全的一個。




二、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

以下安裝方式以 Blogger 為例,請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:


  • 綠色字串可參考「如何使用jQuery版本」,檢查範本是否已安裝過 jquery,以免重複安裝。
  • 兩個紅色字串 ".comments" 代表 Blogger 留言區塊區塊,會將留言之中的所有網址字串轉換為超連結。如果要擺到到別的位置,請將紅色字串改為 "." + class 名稱、或是 "#" + id 名稱。



三、網址轉換範例


下面是一個 DEMO 範例,請按下方的「轉換網址」按鈕,即可看到哪些字串會被轉換為超連結:

1. 字串黏在一起也能判斷出來,例如:
  • testhttp://google.com
  • 請前往google.com

2. 原本的超連結「WFU BLOG」不受影響

3. 諮詢頁面請參考 http://www.wfublog.com/2013/06/service-suggest-cooperation.html,在 Blogger 上架站,如不想用官方範本,建議的方式為尋找接近客製形式、現成的免費或付費模板,然後進行修改,推薦幾個品質很棒的範本網站:
  • btemplates.com
  • ivythemes.blogspot.com
  • www.templateism.com
  • www.soratemplates.com

4. 聯絡資訊:
  • Google+:https://plus.google.com/+WayneFu
  • FB:https://www.facebook.com/wayne.fu.blogger



更多 jQuery 相關工具:

BLOGGER 留言有禁止訪客自刪的功能嗎?

$
0
0
在備份「Blogger 中文社群」文章到「Blogger 中文論壇」時,發現了這個討論串「BLOGGER留言有禁止訪客自刪的功能嗎?」。

這樣的需求不是沒有道理,若是自刪的留言原本為 "發問內容、題目",那麼當有人回覆、提出解答,日後其他的訪客在閱讀整個討論串時,前後文邏輯對不起來,這則資訊在網路上將失去存在的意義,也阻礙了資訊的流通。

以下大概說明一下處理的原理,想直接安裝請跳至「二、安裝程式碼」。

(圖片出處: pixabay.com)


一、防止留言自刪


Blogger 沒有禁止留言自刪的功能,想來想去能夠做到的方法為,找辦法把「刪除」按鈕移除,這樣留言者就沒輒了。也許留言者會覺的不方便,有時只是不小心輸入錯誤內容、太快送出留言,不過可以再發一則留言更正,或請站長刪除前一則即可。

但是後遺症是,連站長自己也看不到刪除按鈕、沒得刪除留言。因此得先判別出登入身份是否為站長,當非站長時,才執行移除所有的「刪除」按鈕。

以上是簡單的程式邏輯,另外借點小篇幅聊聊這個主題的感想。東方人可能比較害羞,因此不太敢發問。而有些問了之後更怕被別人覺得是 "不夠格的問題",有可能得到回覆後就把自己的問題刪了;更多的是沒有人回覆時,自己也悄悄把問題給刪了。

WFU 得到的很多知識都是從網路上 Google 來的,不過多數的問答在英文網站才能找到,我想這也是西方人強盛的原因之一,他們不怕提出 "任何問題",因此知識、資訊得以互相流通,當然實力就不斷累積。

以本文為例,這個去年的提問討論串,因為沒有自刪,現在得到了解答。雖然晚了一年,但今後這則資訊得以讓中文 Blogger 使用者獲益。希望我們的每一則提問,將來都能成為別人的幫助。(參考:「網站故事」)




二、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
可參考「如何使用jQuery版本」,檢查範本是否已安裝過 jquery,以免重複安裝。


2. 接著請搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:


儲存後即可。想先測試一下效果,可前往 DEMO 網頁:




三、修改官方字串


該討論串 Ray Tsai 另外詢問:
「如何改變「作者已經移除這則留言。」這則訊息呢?...我想改為提醒讀者不要隨便刪」
如果有這項需求的讀者,完成「二、安裝程式碼」的步驟後,請另外安裝以下程式碼,一樣放在範本中 </body>前一行:

<!-- 修改訪客自刪留言字串 -->
<script>
(function($) {
var officialText = "作者已經移除這則留言。",
nexText = "填入提醒訪客的字串";
$("span.deleted-comment").each(function() {
if (this.innerHTML == officialText) {
this.innerHTML = nexText;
}
});
})(jQuery);
</script>
<!-- Designed by WFU BLOG -->

將以上的紅色字串,置換為自訂字串即可,以後官方的預設字串 "作者已經移除這則留言。" 就會改而顯示設定的提醒訊息。


更多 Blogger 留言小工具:

增加工作效率﹍四款倒數計時 Chrome 套件評比

$
0
0
countdown-timer-chrome-plugin「倒數計時」這類功能簡單、又可增加工作效率的小軟體,過去試用了多款桌面軟體,不過始終找不到一個輕量級、好操作、看得順眼的選擇,最終乾脆在桌上擺個實體計時器,直接按還比較方便快速。

直到最近測試了幾個 Chrome 套件,沒想到效果、質感比桌面軟體好很多,操作也比實體計時器便捷。由於打開電腦作業時,Chrome 幾乎都是開啟的狀態,因此倒數計時的套件的確能取代實體計時器的使用。

基本上 WFU 對軟體的選擇還滿挑剔的,基本除了功能要符合需求,如果操作介面不順手、畫面太粗糙,多半也會用不下去。

以下本文介紹四款套件,已經剔除品質不佳、操作不便的相關套件,順序從「推薦」→「極推薦」的等級評比,不過評判標準是依據個人的使用習慣,因此還是請讀者依自己的習慣做抉擇。



一、Stopwatch & Timer



Stopwatch-timer-1

這個套件的畫面還滿有質感的,操作也非常簡便,若只需要單純的「倒數計時」功能,還滿推薦這個套件的。


Stopwatch-timer-2

依上圖標示:

A. 按下 "漏斗" 圖示可進入倒數計時模式,基本操作為按數字鍵調整時間,再按 "START" 開始倒數。

B. 若按下這個 "時鐘" 圖示,則會出現預設的時間選項,例如 "15秒"、"30秒"、"1分鐘"...."2小時" 不等,省下按數字的麻煩

C. 按下 "鈴聲" 圖示,可選擇三種提醒音效。

不過這個套件在四款之中敬陪末座,除了功能最單純,音效的設定也不夠彈性:
  • 音效檔時間太短
  • 可選擇的音效太少、太單調
  • 無法連續播放

如果將來改版能夠改善這部分,就能替這個套件大大加分。




二、蕃茄計時器



「蕃茄鐘工作法」是一套很有名、能增加工作效率的作業流程,若不熟悉的話可參考這篇「番茄鐘工作法!改變習慣作好時間整理」。而這個「蕃茄計時器」,正是用來輔助蕃茄鐘工作法的絕佳工具。


tomato-clock-1

這個套件功能齊全、畫面佳,如果是熟悉「蕃茄鐘工作法」的讀者,應該就不用多介紹如何介紹操作及設定了,安裝這個套件就對了!


tomato-clock-2

他的優點實在太多,很多細部的設定都能自訂,提醒音效還能自選,而且如上圖,還可保存使用蕃茄鐘的統計數據喔!可用來評估自己的工作效率。

這麼好的套件,為何 WFU 只擺在第三呢?純粹是個人作業習慣的考量,因為蕃茄鐘設定的倒數計時方式,有一套既定的模式。由於無法刪減設定,只好割捨這個套件,不過還是要推薦給「蕃茄鐘」的愛好者。



三、Timer Loop



這是一個類似「蕃茄鐘工作法」的套件,但由於比較符合 WFU 的作業習慣,因此反而推薦順序排第二。「蕃茄鐘工作法」有一套固定的流程,必須同時設定工作時間、休息時間,但「Timer Loop」非常的彈性:
  • 如果需要的話,可以在一組工作流程之中,設定 10 個倒數計時組合。
  • 也可以只設定 1 個倒數計時提醒(蕃茄鐘做不到這一點)


time-loop-1

簡單介紹一下操作:

A. 下拉選單可選擇我們已經設定好的多個工作流程

B. 按 "鉛筆" 圖示可編輯這個工作流程。


time-loop-2

這是編輯畫面:

A. 新增一個倒數計時排程

B. 刪除不要的倒數計時排程

C. 勾選的話,會自動關閉提醒視窗

D. 可設定循環幾次後,終止自動循環的流程


說結論,我們可以為這個套件設定多個工作流程。當一個工作流程有多個倒數計時排程時,就等於是蕃茄鐘工作法。但也可設定只有一個倒數計時排程,例如 5 分鐘倒數,用下拉選單就能叫出來執行。

這是一個比蕃茄鐘計時器更有彈性的小套件。



四、1-click-timer



WFU 太喜歡這個套件了,雖然他的功能不多,純粹就是倒數計時而已,但是相信你一使用就會愛上他,實在太方便了~~因此推薦指數排名第一!


1-click-timer-1

跟其他套件不同的是,前三個套件都是「應用程式」,必須多點幾次滑鼠才能開始執行。而這個套件是真的 Chrome「擴充功能」,會直接出現在瀏覽器右上角的區塊,因此如上圖,隨時可以點擊按鈕圖示來執行倒數計時。


1-click-timer-2

簡單說明一下操作,畫面分成 60 小格,各代表 1分鐘,依上圖 A~F 標示:

A. 滑鼠移到 10 附近按下,就代表設定為倒數計時 10 分鐘。

B. 按下這個圖示就開始執行倒數,非常簡單方便;要暫停倒數一樣按這個圖示。

C. 鈴聲圖示按下後,可分別設定提醒音效為 "大聲"、"小聲"、"無聲"。

D. 倒數結束後,若要重複同樣的倒數時間,按這個圖示可重新倒數。

E. 全螢幕執行

F. 按方框裡的這個圖示,可以設定不一樣的播放提醒音效


1-click-timer-3

接續前圖 F 的操作,會出現上圖畫面,雖然圖示很多,但只有方框中的三個圖示比較重要,可以選擇三種音效播放。


簡單總結一下這個套件的優點:
  • 最方便執行,點 Chrome 右上角圖示就可開啟。
  • 右上角圖示隨時會顯示倒數剩下幾分鐘。
  • 倒數計時的時間設定機制最簡單。
  • 結束的播放鈴聲會自動重複播放,不在座位上也不會漏掉音效的通知,會播放到你聽到為止。
  • 怕吵到別人也可以設定為無聲,螢幕上會彈出倒數結束的視窗。


因此如果只是需要 "單純" 的倒數計時功能,1-click-timer 會是最佳的選擇。


更多 Chrome 相關套件:

「BLOGGER 中文論壇」正式成立

$
0
0
Blogger 長久以來在中文環境下,沒有能匯集使用者、進行交流分享的專屬討論區。將近三年前,WFU 在 Google+ 成立了「Blogger中文社群」,作為中文環境的 Blogger 討論區之用。一開始在 G+ 社群功能剛發佈的推手下,討論算是十分熱絡。不過隨著時間拉長,除了 G+ 是否能持續經營產生雜音;另一方面,把 "社群媒體" 當作 "討論區" 用途的缺陷也慢慢浮現。

"G+ 社群" 畢竟不是專為 "論壇功能" 而設計的工具,長久來看,Blogger 還是需要一個專門的討論區,才能讓有深度、真正重要的主題獲得持續的關注與討論,而不是像 "社群媒體" 的特質 → 討論串在兩三天後就消逝無蹤。

現在,籌備多時「BLOGGER 中文論壇」終於完成建置。這個論壇保有了傳統討論區的功能與優點,也融合了部分 "社群分享" 的元素,有任何「Blogger 相關」、「網頁技巧」、「網路雲端」的問題討論、資訊分享,都可前往這個新天地──




一、G+ 社群


為何決定捨棄 G+ 社群作為討論功能,粗略的原因如前言所提,以下則較為仔細地說明細節:

1. 文章生命週期短

社群媒體的文章可以在兩三天內爆紅,然後再也不會有人關注這件事,這是很可惜的事。論壇完全不會有這個缺點,就算十天半個月後有人回覆,該則討論串馬上置頂,好文章可以再次、持續地被關注,讓更多人分享到有用的資訊。


2. 無法收錄精華文章

這是討論區、論壇的基本功能,但社群媒體做不到,會使得有用的資訊無法持續地被充分利用。

雖然 WFU 曾想出一個方法,在 G+ 社群新增討論區名稱為 "精華文章",然後將篩選過的貼文更改為 "精華文章" 討論區 → 結果造成投機的使用者發文時,自行將討論區選擇為 "精華文章" → 增加更多管理員的不便。


3. 資訊不易瀏覽

社群媒體多半為 "瀑布流" 的設計,捲到螢幕底部才會讀取較舊的文章,這造成使用者操作上的心理障礙,不太可能花太多時間持續等待舊文章的讀取,造成習慣只瀏覽近期的文章。而討論區若要跳到早期文章,操作上都不會太困難。


4. 垃圾訊息多

由於社群媒體分享文章非常容易,還能透過第三方工具大量發文,也造成垃圾貼文多,增加管理員的負擔。


5. 資料備份

由於 G+ 的不確定性,為了保存 Blogger 社群的討論精華與眾人智慧,有必要備份重要的討論串訊息。不過目前 G+ 社群尚未有備份機制,而將文章轉到 Blogger 論壇後,就能定期對論壇的所有文章、留言進行備份。


6. 小結

雖然 G+ 社群無法作為論壇的替代品,終究得感謝過去這兩三年的貢獻,留下許多有價值的討論串。移轉到 Blogger 論壇後,可以讓這些資訊繼續發光發熱。



二、BLOGGER 中文論壇


BLOGGER 中文論壇實質上不等於傳統論壇,因為這是一個架設在「Blogger 平台」的系統,功能上也必須遷就 Blogger 現有的限制。不過 WFU 仍盡量把傳統論壇的優點給含括進來,並融合社群分享的概念:

1. 留言回覆可置頂

進入論壇首頁,即可看到最新回覆的討論串主題及相關訊息,這代表不管多久以前的文章,都可再度置頂得到關注。


2. 收錄精華文章

設定了「常見 FAQ」及「精華文章」兩個標籤,專門收錄相關的重要文章資訊。此為版主功能,發文者無法設定。


3. 資訊搜尋方便

這一點倒是比傳統論壇更強,「Blogger 中文論壇」提供了多種篩選資訊的方式,可參考「如何使用論壇」→「三、搜尋文章的技巧」,除了傳統的所有搜尋方式,還有這兩種不同的技巧:
  • 依照不同的討論區名稱,可列出該討論區的所有文章標題
  • 利用 Blogger 的「網誌存檔」工具,可將所有文章按照 "年"、"月" 依序列出


4. 減少垃圾訊息

Blogger 論壇無法用程式發文,只能手動發文,可減少管理垃圾貼文的時間。若遇到執意洗版的發文者,也可列入黑名單,取消其帳號的發文資格。


5. 文章及留言備份

Blogger 平台備份相當簡單,從後台定期「匯出網誌」,就能備份所有的文章及留言。


6. RSS 訂閱個別討論區

跟一般論壇提供的功能一樣,不需要閱讀整個論壇的文章時,也可單獨訂閱個別討論區的 RSS,擷取自己需要的資訊即可。


7. 分享文章容易

這部分借用社群媒體的優點,讓分享文章變得容易。只要貼上附加連結,就能自動抓取該文章連結的 "標題"、"縮圖"、"摘要" 等資訊,不需貼文者手動一一輸入。

如同社群媒體,要貼圖片連結、YouTube 連結也都能自動處理。



三、作者權威度


有經營部落格的站長,會比較小心另外貼在論壇、討論區、PTT 等地方的內容,因為如果轉貼了部落格文章,可能會被 Google 搜尋引擎判定為重複內容,也無法累積自己的 "作者權威度"。

不過「Blogger 中文論壇」對於發文作者的語意標籤進行調整,每篇貼文都能正確判讀出作者資訊。以這篇「Google Drive 雲端硬碟又無法外連?備用方案 OpenDrive 教學」為例,若將論壇的文章網址分享到 FB,結果如下圖:



除了可以正確抓到文章標題、縮圖、摘要、論壇文章網址,還能正確顯示 "作者資訊" → 代表這篇論壇的貼文,跟發佈在自己部落格的效力一樣,都是屬於自己的作品,都能累積 "作者權威度"。

若貼在其他論壇,不一定能判別出作者身份,對 SEO 有研究的站長,便可瞭解「Blogger 中文論壇」的這項優點。

如果對 SEO 有興趣,想知道 "作者權威度"、"網路身份"、"網路 ID" 等名詞及操作方法的話,可參考 +Mark X 的這幾篇文章,瞭解更深入的資訊:



四、論壇功能建議


目前初期先完成基礎建設,讓論壇的功能可正常運作,未來還會加強使用者體驗的設計、及增加更多功能。當到達一定的階段後,也會開放免費申請論壇的架設。

如果論壇的操作、使用上,有任何的異常、意見及建議,都歡迎在此提出:



在符合 Blogger 平台的架構限制之下,會參酌各種意見,讓論壇功能更完善。

讓 Blogger 留言能顯示圖片及 Youtube 影片﹍將網址字串轉換為圖片

$
0
0
一直以來 Blogger 留言不開放貼圖語法,這是很可惜的事,畢竟很多時候「一張圖勝過千言萬語」,搭配影像的輔佐可節省許多文字的描述。

當然官方應該也是有其考量,若開放了 img標籤的使用,萬一訪客放了高解析大圖、或是大量貼圖用來惡搞網站,導致網頁開啟速度被癱瘓是有可能的;更甚者在圖片網址夾雜惡意連結,都有可能造成資安危機。

因此,已經考量清楚的站長,決定開放 Blogger 留言區塊讓訪客貼圖的話,可前往「二、安裝程式碼」。



一、顯示圖片的原理


1. 舊外掛原理

就像 Discuz 這類的論壇,以前的 Blogger 外掛處理這件事時,需要訪客手動在圖片網址前後加上 "[img]" 這樣的字串,程式才有辦法判斷這是一張圖片,再進行轉換。

這種方式的缺點為,不熟悉 code 的訪客不會使用,或是沒有注意使用說明的話,就不知道站方提供了這個方法來顯示圖片,那麼通常只有熟客才會知道這個 Blogger 留言可顯示圖片。


2. 直接轉換圖片網址

讓訪客無痛使用貼圖的方式,就是直接在留言貼圖片網址,而程式直接將網址字串轉換為圖片語法。

上次處理「將網頁所有網址字串轉換為超連結」後,對這類功能已經駕輕就熟,一樣利用正規表示式就能將圖片網址、Youtube 網址字串,直接顯示為圖片及影片。

在「Blogger 中文論壇」發表文章時,有個 "附加連結" 的功能,當貼上 "圖片" 或 "Youtube" 網址時,就能直接顯示圖片或影片,便是使用了本文小工具的程式碼。




二、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 準備動作

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head>這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<style>
.comments .convertImgUrl img { /*留言區圖片*/
margin: 10px;
max-width: 100%;
}
.comments iframe { /*留言區 youtube*/
display: block;
margin: 10px auto;
}
</style>

第一行可參考「如何使用jQuery版本」,檢查範本是否已安裝過 jquery,以免重複安裝。

其餘的部分,如果對 CSS 熟悉可自行修改參數,請參考註解字串的提示。


2. 安裝程式碼

接著請搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:


這個工具預設作用於 Blogger 留言區塊,也就是紅字參數 ".comments" 的區塊。

如果要使用在別的區塊,請自行將紅色字串改為別的區塊,例如 "." + class 名稱、或是 "#" + id 名稱。



三、展示及測試效果


想先看一下效果,或是測試留言能否出現圖片、Youtube 影片,請前往這個展示頁面:


只要在留言之中插入 http 開頭的圖片網址字串、或是 Youtube 網址,網址字串後面用 "空格" 或 "Enter" 跟其他文字區隔開來,程式就能自動判斷,並轉換為對應的圖片、Youtube 影片顯示。


更多 Blogger 留言相關工具:

不必再進入 Facebook﹍訂閱不公開社團 RSS 的技巧

$
0
0
ifttt-fb-group-rss之前寫過一篇「IFTTT 訂閱 Facebook 社團貼文心得」,可惜敵不過 FB API 的頻繁改版,現在 IFTTT 已經無法再支援「FB 社團」的同步功能。

不能訂閱 FB 社團是很麻煩的事,因為 WFU 加入的社團很多(人數也很龐大),在訊息量這麼大的情況下,不太可能天天進 FB 社團看每一則貼文,就像我們不可能掃完所有 Line 群組的每一條訊息。

利用 RSS 閱讀器介面,從標題篩選、過濾不必要的雜訊,才是資訊爆炸時代獲得訊息的王道,也是我們網路族群善用網路工具所具備的優勢。

於是花了點時間研究,有沒有一個機制能夠利用 RSS 閱讀器來訂閱 FB 社團的貼文。最終找出來的步驟不少,但相信將來足以省下更多時間,請見本文的心得分享。



一、訂閱 FB 公開社團 RSS


一開始在網路上找到這個可以訂閱 FB 社團的服務:


先按其指示找出 FB 社團的 ID,就能產生該社團的 RSS 訂閱網址。

不過很可惜,這個服務只能產生 "公開" 的 FB 社團 RSS 網址,但 WFU 加入的社團幾乎都 "不公開",因此這個第三方服務派不上用場。

後來仔細看了說明,Wallflux 其實也提供了「不公開社團」的 RSS 服務,不過要收費 "5 歐元",且不保證永久有效。

那麼,有需要的讀者請繼續往下看,按著步驟進行就可用 RSS 訂閱 FB 不公開社團,還可省下 5 歐元!



二、Facebook 設定


先大致說明整個流程的原理:
  • FB 可以設定每個社團的發文通知,並寄發 Email。
  • 如果習慣用 Email 看社團文章的話,那麼就不必進行其餘動作。
  • Blogger 提供了用 Email 發文的功能,我們可以設定 FB 社團的發文通知,自動轉寄到 Blogger。
  • 接著訂閱該 Blogger 的 RSS,就能用 RSS 閱讀器篩選 FB 社團的文章了。

瞭解以上流程後,以下開始逐一設定。

fb-group-notify-1

上圖為進入社團後的畫面,按下紅框中的「通知」→ 選「所有貼文」,可收到所有文章的通知。不需要所有文章的話,可依據個人需求選擇「焦點動態」。

如果覺得社團一個個設定太麻煩,可進入以下設定網址:


在「社團動態」→ 編輯 → 可一次編輯所有社團的通知設定


fb-group-notify-2

接著設定 email 通知,從 FB 網站右上角的倒三角形 → 設定 → 通知 → 電子郵件 → 編輯,可進入上圖的畫面。

若覺得以上步驟太麻煩,也可直接進入以下設定網址:


選擇紅框中的選項,社團的最新文章就會寄到我們 Email 信箱。

這個設定也會導致一些無謂的通知也寄來,不過只要如上圖 FB 的提醒,"若要關閉特定電子郵件通和,只要點擊電子郵件底部的取消訂閱連結",就不會再收到不想要的通知。



三、BLOGGER 設定


這個部分我們需要新開一個空白的 Blogger 部落格,作為接收訊息的中繼站。先登入 Google 帳號,進入以下網址,點「新增網誌」即可:



blogger-email-post-1

從 Blogger 後台 → 設定 → 行動裝置及電子郵件,可進入上圖畫面。

這裡可設定 Email 發文的功能,如上圖紅框,設定一組只有自己知道的字串後,寄到這個 email 的內容會自動發佈為最新文章。請記下自己設定的完整 Email 字串,之後會用到


blogger-email-post-2

從 Blogger 後台 → 設定 → 基本,可進入上圖畫面。

記得將「隱私權」設定為「不讓搜尋引擎檢索」,才不會像 WFU 一樣在「訂閱 Facebook 社團貼文心得」→「五、Blogger 設定」遇上麻煩事。



四、Gmail 設定


最後利用 Gmail 的篩選器,自動將 FB 社團發文通知,轉寄到 Blogger 的貼文 Email,即可完成整個流程。

首先設定轉寄信箱,將「三、BLOGGER 設定」我們自己設定的 email,在 Gmail 中設定為轉寄信箱,可參考這篇官方說明完成這個流程:



接著進入 Gmail → 右上角齒輪圖示 → 篩選器 → 建立新篩選器,或是也可直接從這個網址進入:



gmail-forward-blogger-1

如上圖 A~B 順序

A. 填入 "facebookmail.com",篩選所有來自 FB 的郵件。

B. 這裡填入所有 FB 社團的名稱,彼此間用大寫英文字母 "OR" 隔開;若社團名稱含英文字,請用雙引號包住完整的社團字串。

填寫完畢後,按右下角的「繼續」按鈕。


gmail-forward-blogger-2

如上圖,最重要的是勾選「轉寄給:」,並選擇正確的 Blogger 轉寄 email。

其餘的設定可依個人需求調整,也可如上圖勾選「標示為已讀取」、套用標籤等等,最後按下左下角的「建立篩選器」按鈕即完成。



五、訂閱 RSS


如果熟悉 RSS 訂閱機制的話,那麼這部分可跳過,請使用喜愛的 RSS 閱讀器來訂閱自己的 Blogger 部落格即可。


blogger-post-list

Gmail 轉寄機制沒問題的話,在 Blogger 很快就會看到 FB 社團的文章。


feedly-subscribe-blogger

如果不熟悉 RSS 閱讀器的話,以市佔率最高的「Feedly」為例,若不清楚 Blogger 的 RSS 網址,如上圖 Feedly 網站的畫面,在右上角搜尋框直接輸入部落格網址,Feedly 也能幫我們找出 RSS 網址。

以上整個流程需要花一些時間設定,不過完成之後,利用行動裝置的 RSS 閱讀器 APP,就能很方便的檢視 FB 社團的最新貼文,不怕錯失任何重要資訊了!


更多 Facebook 相關技巧:

Blogger 文章封面圖 (縮圖) 的各種呈現方式

$
0
0
最近接到一個需求,案主希望在文章標題上方擺放文章縮圖。要說是 "縮圖" 其實不太精確,因為圖片必須滿幅寬(跟文章區塊同寬),而這麼大的圖,應稱為 "封面圖" 比較貼切。

要做到這件事不難,使用「PICASA 或 Blogger 後台上傳的圖片」,Blogger 就能取得文章縮圖,再利用 Javascript 修改圖片網址參數,即可讓縮圖改以大圖呈現,並放到網頁的指定位置。

文章標題上方擺長方形圖片這個效果真的不錯,現在 WFU BLOG 版面也做了相關的調整。且後來發現 Blogger 還有更輕鬆的方式,不必寫任何 js 程式就做出這個效果,更棒的是圖床不限定 "PICASA 或 Blogger 後台上傳",例如處理 "Flickr" 圖片也沒問題,因此值得分享新的作法及延伸應用。

(圖片出處: pixabay.com)


一、Blogger 封面圖標記語法


Blogger 使用縮圖的標記語法為 <data:post.thumbnailUrl/>,這代表該篇文章的縮圖網址,是一張 72x72 px 的正方形圖片。

這個設計在以前的年代沒什麼問題,FB、G+ 一開始縮圖也都是抓正方形的小圖。不過後來 FB 開始帶動 "封面圖" 風潮,貼文如果使用大尺寸圖片的話,會增加其曝光率。

當然 G+ 沒多久也開始跟進,也許是這個因素,Blogger 悄悄增加了一個新的標記語法:<data:post.firstImageUrl/>

從字面上的意思很清楚,他會抓每篇文章的第一張圖片網址,無論是什麼圖床都可以,也不會縮小成 72px 的正方形

知道這個標記語法後,就可以拿來製作封面圖了,且真的比原本的縮圖標記語法好用多了,不必再用 js 來修改網址參數,才能取得大圖網址,因為這個標記語法,代表的就是原始大圖網址。



二、文章標題前後擺封面圖


瞭解原理後,執行起來就容易多了。首先參考「Blogger 範本﹍(3)文章區塊」→「三、文章區塊」→「1. 文章標題」,可找到範本中 "文章標題" 的位置。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

如果想把封面圖放在標題上方,可在 "文章標題" 程式碼的前一行,插入以下程式碼:

<div class='post-cover'><img expr:src='data:post.firstImageUrl'/></div>
如果想把封面圖放在標題下方,以上程式碼請放在 "文章標題" 程式碼整個區塊的下一行。

這樣就能讓文章中的第一張圖片,出現在指定位置。

需要調整版面的話,請繼續設定 CSS,到後台範本 → 自訂 → 進階 → 新增 CSS,輸入以下內容:

.post-cover {
margin: 15px auto;
text-align: center;
}
.post-cover img {
width: 100%; /*強制圖片寬度跟區塊一樣*/
height: 300px; /*強制圖片高度, 請行調整數值*/
padding: 5px; /*內襯距離*/
background: #ffffff; /*背景白色*/
border: 1px solid #444444; /*外框*/
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /*陰影*/
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

  • 以上是簡單的圖片 CSS 設定,熟悉 CSS 的讀者請自行修改細節。
  • 由於對圖片寬度、高度強制設定了尺寸,請讀者每篇文章的第一張圖片,尺寸、比例必須相近,以免變形嚴重
  • 想要設定不一樣的陰影、外框效果,可參考「將圖片套用立體陰影效果」。



三、首頁縮圖+文摘


過去在「Blogger 頁面判斷語法__五個實用範例說明」→「三、在首頁顯示自訂尺寸縮圖及文章摘要」介紹過這個不錯的效果,很多範本網站都可看到類似的版面。

現在拿「Blogger 封面圖標記語法」來套用,這段程式碼就精簡多了,不需再執行 js。以下簡單舉例,將原本的程式碼修改為以下版本:

<b:if cond='data:blog.url == data:blog.homepageUrl'><!--首頁時使用縮圖及文摘-->
<div class='index-thumbnail'>
<b:if cond='data:post.firstImageUrl'><!--檢測第一張圖是否存在-->
<span class='home-post-cover'><img expr:src='data:post.firstImageUrl'/></span>
</b:if>
</div>
<div class='index-snippet'><!--文摘開始-->
<data:post.snippet/>
</div><!--文摘結束-->
<b:else/><!--非首頁時,使用Blogger預設圖文模式-->
<data:post.body/>
</b:if>
<!--<data:post.body/>--><!--此行為註解、保留原本的程式碼-->

接著設定圖片 CSS,一樣到後台範本 → 自訂 → 進階 → 新增 CSS,輸入以下內容:

.home-post-cover img {
width: 200px; /*強制圖片寬度*/
height: 100px; /*強制圖片高度*/
float: left; /*漂浮左側*/
margin: 0 10px 10px 0; /*邊界距離*/
padding: 5px; /*內襯距離*/
background: #ffffff; /*背景白色*/
border: 1px solid #444444; /*外框*/
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /*陰影*/
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

請參考綠字註解來修改,最重要的是將縮圖寬、高改為自訂尺寸。



四、隱藏第一張圖片


最後剩下的問題會是,封面圖(縮圖)獨立拉出一個區塊來顯示時,讀者可能會在很近的距離,看到兩張一模一樣的圖片,也就是封面圖與文章中的第一張圖。

所以如果不想讓訪客看到這樣的情形,可以將文章中的第一張圖隱藏起來,使用簡單的 js 可做到這件事。

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋此字串:

<div class='post-footer'>

可能會有兩個搜尋結果,兩個都要處理。請在此字串之前,插入以下程式碼:

<script>
document.querySelector(".post-body img").style.display = "none";
</script>

這樣就沒問題了。

需要注意的是,如果使用了「三、首頁縮圖+文摘」的程式碼,那麼以上程式碼請加個判斷式,只在文章頁面執行,否則首頁的縮圖會被判定為第一張圖,反而被隱藏起來了。


更多 Blogger 語法技巧:
Viewing all 784 articles
Browse latest View live