公告版位

目前日期文章:201507 (8)

瀏覽方式: 標題列表 簡短摘要

Facebook 與 Google 這樣的網路龍頭有著共同特色,不斷嘗試、修正錯誤,功能持續更新,因此產品的說明文件很難多年保持不變。讚按鈕(like button)經過多年的演化,已經跟當初不太一樣。雖只是約 38x20 像素的區塊,他的安裝方式、設定選項與應用方式,其實多得超乎想像。



我們從網路搜尋看到的單一安裝方式,都算是片面的用途,本篇綜合整理「讚按鈕」的完整安裝方式,讀者可從中審視自己的需求,選擇最適當的安裝方案。

Wayne Fu 發表在 痞客邦 留言(0) 人氣()

HTML 標籤屬性 title 裡的提示訊息,在瀏覽器差不多延遲一秒才會出現。在資訊爆炸的時代,訪客閱覽文章多半施展 "超速讀",相信更不會有耐心去臆測某個地方是否藏著 title 屬性、或等待一秒後的訊息浮現。使用 javascript(簡稱 js) 處理可讓 title 訊息立即顯現(就是所謂的 tooltip 效果),還可做出各式外框、動畫、置中等等效果,這才是友善的使用者體驗設計,就像下面這個按鈕:

 

滑鼠請移過來





效果還不錯吧!不過特別的是,這並非使用 js 做出來的,而是純 CSS 效果。因為在「優化網站效能」的前提下,為了減少網頁 js 的使用,嘗試將一些 js 能輕易辦到的事,看看能否轉交給 CSS 完成。

好消息是這個構想成功了,且本文的安裝方式非常簡單(傳統的 CSS tooltip 製作方法很麻煩、步驟多),複製貼上後整個網站就能立即套用效果。以下先說明製作原理,想直接安裝請跳至「二、安裝 CSS」。


<< 請注意!本篇文章含會員限定內容 >>

Wayne Fu 發表在 痞客邦 留言(19) 人氣()

PTT KOEI 板有人詢問 251 北海孔融開局,以下為發表於該板的內容──

提到停戰同盟的話,我猜原 PO 是種田派,那麼以下提供的小技巧,想要安心種田五年十年不成問題,可以龜到軍備充足、也可以隨時想撿尾刀就溜出去撿尾刀,給原 PO 參考一下:

Wayne Fu 發表在 痞客邦 留言(0) 人氣()

在使用 Blogger 之前,一直是 Opera 的愛用者,可惜 Opera 與 Blogger 不太相容,為了網頁的展現效果只能轉投 Chrome 陣營。

不過現在 Opera 改採 Chromium 引擎後,Blogger 網頁得以正常顯示,加上越新版本的 Chrome 越來越常當掉、資源越吃越多,此時 Opera 反而成了可以考慮的選項。



新世代的 Opera 15 多數評價不高,認為只是掛上「Opera」招牌的 Chromium。不過對我這種「XP 再戰十年」的舊配備而言,倒是很高興有這樣的產品現身(精簡版 Chrome + 執行效率 + Opera 的某些友善設計),也認真地考慮如何調整目前 Opera 的操作不便之處。因此這篇算是個人的調校心得,也許不能套用到每個人的使用習慣,不過相信對於 Opera 基本操作的改進還是具有參考價值。

Wayne Fu 發表在 痞客邦 留言(5) 人氣()

寫完「部落格浮動側邊欄」之後,對於這樣的功能還可以有什麼樣的應用,直覺想到的是水平導覽列選單(也就是 Blogger 的 "網頁" 小工具),認為直接把程式碼拿來套一下應該就能浮動置頂、凍結在網頁的最上方。



2013.12.20 公告:由於本篇程式碼會有些 bug,請直接前往「讓部落格導覽列選單能浮動置頂__更新版」。


試了一下發現小改程式碼即可,於是再加了一點透明的效果,滑鼠經過導覽列時解除透明,就像本站上方這個水平導覽列一般,或是請看下面的示意圖:

Wayne Fu 發表在 痞客邦 留言(16) 人氣()

「回到頂端」按鈕是很常見的設計,且 code 不難寫。那麼特地撰寫本文的目的為何呢?其實主要是拜讀了 +Bin Ye 的「改善 Google Blogger 返回頂部按鈕的使用體驗」覺得很有道理,因此雖然未使用這個按鈕(已經有「置頂導覽列選單」了),不過這個友善的使用者體驗設計,值得把他做出來,讓有需要的站長自取,因為本站的作品基本上也是朝使用者體驗的方向在前進。


(Pic from: shimivn.blogspot.com)


Wayne Fu 發表在 痞客邦 留言(32) 人氣()

把「Google 試算表當成小型資料庫」 後,說真的只要 javascript 夠熟練,想在自己網站增加什麼功能幾乎都做的到,不會被部落格平台(Blogger 等有開放 javascript 的 BSP)給限制住。



而使用一陣子後心想,若是資料庫每次有新資料時,能夠自動通知就太方便了。也果真有高手寫了「FormEmailer」這個 Google 試算表的外掛,並找到這個「安裝教學網頁」。不過用一陣子之後自己摸索出更好的使用方式,而且該網頁是手動安裝的步驟、畫面選單是舊版的 Google 試算表,乾脆自己來寫一個自動安裝的步驟,並且加上自己的心得與訣竅,剛好可以達到互補的作用。

Wayne Fu 發表在 痞客邦 留言(14) 人氣()

費盡心思寫出的文章、製作的網頁被輕輕鬆鬆地整個打包帶走,沒有人會覺得公平,甚至瓢竊者大賺自己網頁的廣告錢,還加上「未經同意禁止轉載」的字樣,更是讓人怒火中燒!常見的反制方法是 "禁右鍵"、"禁鍵盤"、"禁選取" 等等的功能,雖然暫時阻擋了 "一級盜賊",但也造成了無辜使用者的操作不便(個人遇上這類網頁絕不再來),而且這些方法對 "二級以上的盜賊" 完全無用。回想當初將文章放上網路,不就是為了與更多人「分享」,讓更多朋友得到益處,而如果現在禁止別人複製網頁內容,啟不違背初衷?而且我們自己連上網路就是為了搜尋資料,找到了資料結果不能複製,那還上網做什麼~~


(Pic from: 123rf.com)


因此個人覺得,只要是放上網路的東西,在符合網路禮節的個人使用下,複製、引用文字內容是允許的。個人想法是,要分一杯羹可以,但要 "整碗端走" 免談。因此本文要構思的是,是否存在不影響瀏覽器正常操作,而又能有效防堵初階盜賊搬走網頁的技巧?至於防堵高階盜賊就不在能力範圍了,唯一能阻止他們的方法就是別放上網路,況且他們的目標也不會是一般小老百姓的網頁、部落格,應該會是悠遊卡公司、銀行、政府軍事機關等等才對。

一般而言,自己架設的網站或是付費的網頁空間,網頁可以有較佳的防護效果,這是屬於比較進階的防衛技術,例如可以利用 htaccess 設定許多權限,但相信大部分都是使用免費的網頁空間或部落格,因此本文的初階構思是針對這部分的使用者。以下預計分成三部分,對「純文章」、「網頁資料」、「程式碼教學」提出個人預防的想法。

Wayne Fu 發表在 痞客邦 留言(2) 人氣()