2016年12月31日

如何使用 Google reCAPTCHA 防止網頁被留垃圾廣告訊息

google-recaptcha-如何使用 Google reCAPTCHA 防止網頁被留垃圾廣告訊息前陣子「Blogger 中文論壇」遭到垃圾訊息洗版,被機器人大量貼文,一次發了幾十篇,甚至有一次達到上百篇。雖說也不會造成太大困擾,因為 Blogger 後台一次能勾選 50 篇文章刪除,不用幾秒就全部消滅了,不過能夠事先預防總是比較省事。

於是想到 Google 的這個好工具「reCAPTCHA」,有了它,網頁的表單、留言等工具,就有辦法防堵廣告、垃圾訊息。

只不過,reCAPTCHA 不是設計給前端使用的工具,一般部落格想用的話,需要一點巧思及不錯的 JS 功力,本篇適合前端工程師參考

(圖片出處: googleblog.com)
2016年12月26日

將 Google 行事曆排程顯示在網頁﹍FullCalendar CDN 安裝懶人包

fullcalendar-cdn-installation-將 Google 行事曆排程顯示在網頁﹍FullCalendar CDN 安裝懶人包過去一段時間,網站業務的排程經常處於吃緊的狀態,於是決定好好利用「Google Calendar」,把行事曆的排程顯示在網頁上,業主可查詢案件何時能進入排程、以及案件的時程區間。

基本上,Google 日曆預設就有提供嵌入網頁的語法,如果是功能取向的站長,不一定需要另外瞭解本篇介紹的外掛程式。

如果是形象網站,需要自己設計行事曆的版面、讓效果看起來更專業的話,例如去除 Google 官方 Logo、連結、樣式等等,那麼「FullCalendar」這個強大的外掛,除了最簡單的改版面,還能自己寫程式來設計各種功能。

由於連「Google Drive 都會中止外連功能」,一般的部落格站長,現在要裝各種外掛其實滿困難的,因為很難找到免費又穩定長久的網路空間。還好 FullCalendar 夠熱門,有免費 CDN 提供了各種版本的外連檔案,讓站長們不用擔心這個問題,本篇就來看怎麼進行。


2016年12月21日

使用 Blogger 免費範本(模版),可能需要面對的問題有哪些?

blogger-free-template-problems-使用 Blogger 免費範本(模版),可能需要面對的問題有哪些?使用 Blogger 的優點之一,就是有取之不盡的免費資源,網路上可找到各種美觀、符合自適應(RWD)、且又免費的範本可套用。

免費範本的確很方便,一陣子後覺得不合用、或想改個新鮮的版面,都可再另外找一個,如同免洗筷一般,再換一雙就好。

但在某種程度上,免費範本跟免洗筷還真的有像,因為製作成本低、品質良莠不齊,有的可能會加雙氧水、漂白劑,吃了不小心就中毒。

WFU 經手處理過的 Blogger 各式範本,案件量十分龐大,看過的免費範本非常多。那麼本篇就來整理一下,使用免費範本可能會遇到哪些問題。

(圖片出處: ivythemes.blogspot.com)
2016年12月18日

Blogger 使用圖片的各種技巧:上傳+刪除+管理+取得網址 (Picasa 圖床)

blogger-upload-photo-Blogger 使用圖片的各種技巧:上傳+刪除+管理+取得網址 (Picasa 圖床)協助許多使用者架站時,由於不少都是剛接觸 Blogger,不太熟悉這個部落格平台怎麼處理、操作圖片。他們可能用過台灣其他的免費部落格平台,習慣了有個可以專門上傳、管理圖片的後台介面,但在 Blogger 找不到這樣的東西,因此「Blogger 要如何上傳、管理圖片」,變成了常見的問題。

例如熱門的「圖片輪播」功能,使用者可能會困惑 "圖片要放在哪裡"、"圖片網址如何取得" 等等,對於有後台管理圖片的部落格,這些都是不用另外說明、自然而然就會操作的事情,但 Blogger 偏偏不是如此。

不過 Google 對於處理圖片的概念有自己的想法,跟台灣部落格截然不同,因此有必要先瞭解一下 Google 的設計理念,心理上會比較容易適應,然後再來說明處理圖片各種的操作方法。

2016年12月14日

[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例

上一篇「有助於色盲使用者的友善體驗 (1)設計構思」,提出本站的設計方針為:

  • 原本文章區塊為黃底黑字,另一套 CSS 將會使用白底黑字,用來增加對比。
  • 原本文章區塊的連結無底線,另一套 CSS 將會使用底線。
  • 本站文章常用紅字標示重點,同時教學程式碼中包含了大量的紅、藍、綠字串,為了幫助辨識,另一套 CSS 會將常用顏色特別標示出來。

本篇會將這樣的概念實作出來。不過,我的設計方法不見得適合套用到每個網站,多少都需要調整,畢竟每個網站的配色、功能都不太一樣。

那麼要拿我的範例來修改的話,建議有足夠的 HTML / CSS / JS 基礎,比較適合閱讀這一篇。



(圖片出處: commons.wikimedia.org)
2016年12月11日

[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思

color-blink-web-design-1-[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思前陣子有讀者在「Blogger 文章標題最佳化」留言表示:"建議WFU大,文章的字顏色對比可以強一點,或標個線?這樣對色弱色盲人土比較友善,我完全找不到紅字在哪"。這才發現過去接觸網頁設計的主題時,很少碰到這一塊,因此沒想過要研究這部分的設計。

經查詢資料後,發現色盲、色弱者的比例,比想像中還多不少,站在 "營造友善的使用體驗" 這樣的立場,的確應該改善網頁設計,讓這個族群閱讀文章時沒有障礙。

本篇會大致列出協助色盲使用者的網頁設計要點,同時也提出個人的設計構想。

(圖片出處: commons.wikimedia.org)
2016年12月4日

讓訪客能自行放大網頁文字,提升友善閱讀體驗

閱讀網路文章時,不免會遇到某些網頁的預設文字過小,不但看起來不舒服,也加重了眼睛的負擔。過去曾介紹過 Chrome 的外掛「讓 Chrome 只放大縮小文字(Zoom Text Only 套件)」,可以單獨調整文字的大小,讓我們閱讀文章時更舒服。

但並非每個訪客都會安裝這樣的套件,如果你是站長的話,想要打造友善的閱讀環境,最好能另外提供「放大文字」這樣的按鈕,讓訪客自行調整文字尺寸,就能照顧到銀髮族、視力不佳、或需要維護視力的族群。

本篇會提供一個「調整文字尺寸」的按鈕,以下先說明設計原理,想直接安裝可跳至「二、安裝程式碼」。



(圖片出處: pexels.com)