這幾年看過一些波浪狀、具有弧度的圖形設計,可能運用在網頁、應用程式或文件,這些圖案可以利用產生器製作,像是之前介紹過的 Get Waves、Svg Wave 都能在瀏覽器上建立出符合自己需求的波浪圖,無論波浪類型、波峰數量、層數、高度、顏色密度等等,有些還能搭配上漸層色效果,如果要尋找波浪圖的話就不需以繪圖軟體自行繪製,類似產生器很多,能打造出相當個人化的圖形。
站長工具
設定 Cloudflare 健康情況檢查監測特定伺服器或網站,無法連線時發送通知
上週因機房的網路連線異常,導致免費資源網路社群網站有幾分鐘無法連線時間,預先設定的網站監控服務也陸續傳送警報通知,例如我介紹過的 Uptime Robot 就有手機應用程式可推送通知;或是另一個 Better Uptime 在監測網站變化上也相當即時快速(可惜它的免費方案不能推送應用程式通知)。如果你是使用 WordPress 架站的話,官方的 Jetpack 外掛提供相當多模組功能,其中就有一項監測服務 Jetpack Monitor 也很有用,完全不用額外設定,網站異常時會以 Email 通知。
HTML.cafe 線上即時 HTML 編輯器,修改原始碼立即查看效果變化

現在比較少有機會從頭到尾、以原始碼編寫一個網頁,記得十幾年前剛開始製作免費資源網路社群時還沒有使用 WordPress 架站,最早的網頁就是直接用 HTML 文字編輯器寫出來,後來有了所見即所得編輯器,很多事情變得很方便,也少有機會去編寫原始碼。若你偶爾需要測試一些 HTML 內容,看看呈現出來的結果是否正確,可試試接下來的免費工具。
Cool Backgrounds 免費背景製作工具,內建五種效果可自訂顏色
根據 Cool Backgrounds 開發者研究,在發佈網頁或文章前最困難的步驟之一是找到合適背景圖片,好的圖片不僅能凸顯整篇內容質感,也可獲得更多使用者注意。我之前推薦不少免費背景產生器,依照使用者需求快速製作出很活潑、色彩鮮豔的背景,例如 Svg Wave 產生波浪狀背景圖案(在很多網站都能看到);Hero Patterns 製作好看的重複平鋪式背景,而且只要將 CSS 語法帶入就能套用。
Meta Tag Generator 網站資訊標籤產生器,為搜尋媒體和社群網路最佳化
對我來說,要讓網站在搜尋引擎取得好的排名表現,把程式碼寫正確是首要任務,因此我相當重視 Google 之前釋出的「搜尋引擎最佳化入門指南」說明文件,如果你對於開發網站有興趣,或是工作也會碰到相關內容,之前推薦過「HEAD 網頁開發參考手冊」很有用,它收錄 HTML5 在會出現的各種元件和使用範例,幫助開發者寫出更為完整全面的網頁標頭,對不想要翻找艱澀繁瑣說明文件的朋友 HEAD 也直接給出最基本的標頭範例。
StackWhats 將 WhatsApp 線上交談加入你的網站,點選開啟網頁聊天功能
曾經有段時間很流行將聊天室工具(Live Chat)按鈕放在網站底部,點選後就能開啟對話視窗,以即時通訊服務展開線上交談,比較常見的是 Facebook Messenger 即時通,因為官方直接提供外掛程式和相關程式碼,當然也可透過 WhatsHelp.io 之類的服務進行串接,好處是第三方工具能夠同時整合更多服務,讓使用者在點擊交談功能後選擇自己較方便的即時通訊應用。
Iconpie 上傳圖片自動產生各種網頁及應用程式專用的圖示尺寸
無論是開發網站、網頁服務或是一般手機應用程式,一定都會用到圖示,這在網站上通常被稱為網頁圖示(Favicon),應用程式也會因裝置需要不一樣的圖示大小,雖然轉換圖片大小是很簡單的事,但我們不一定確切知道需要什麼樣的尺寸或格式,有一些工具可以快速解決問題,像是 Favic-o-Matic 就能協助使用者製作出各種尺寸的網站圖示,而且也提供對應的程式碼非常有用。
Formito 免費網站圖示 Favicon 產生器,以文字或表情符號線上製作圖案
以 Automatic Platform Optimization (APO) 為 WordPress 快取加速網站
一直以來我都是 Cloudflare 的忠實用戶,除了可以做為 DNS 代管,為網站提供更快、更穩定的速度及安全防護功能,後來也變身為網域名稱註冊商 Cloudflare Registrar,直接給出最貼近成本價的域名註冊和續用價格,包括 SSL 憑證、DNSSEC 或 WHOIS 隱私防護等功能在內都是不須額外加價的附加服務。如果你是使用 WordPress 架站,我也寫過 Cloudflare 的 WordPress 外掛教學,只要下載啟用後連接到你的帳戶就能快速整合 Cloudflare 各項功能。
Svg Wave 線上製作波浪背景圖,調整波峰數或高度產生 SVG、PNG 格式
對於一般內容網站來說,為了使頁面內容有好的可讀性,可能會維持網頁底色為白色或單一顏色,但如果是網路服務或應用程式,想讓背景活潑也能加入變化,例如 Hero Patterns、Background Image Generator 或 SVG Backgrounds 產生紋理材質背景,既不會太過混雜又不像單一顏色這麼無趣,在維持網頁效能的情況下只要透過 SVG 或產生小張 PNG 圖片,以 CSS 方式載入就能自訂背景。