電腦玩物

在忙碌工作中，我們很多時候會需要製作簡報或網頁來展示我們的想法、專案、產品，可能是在會議中報告，可能是在活動中分享，或是要在社群中給大家參考。然而，專注在原本的專案、產品內容上的我們可能並不擅長設計，或是沒有太多時間進行複雜的設計。 這時候，如果有自動完成簡報、網頁設計的工具，可以節省我們許多時間 。

老師如果想要做一個給學生看的「數位學習工具」的推薦網站、賣家想要架出一個「熱門商品」介紹主頁、作家想要列出「書籍」或「講座活動」清單網頁，如果是臨時需要，如果自己也沒有程式技術，有沒有什麼速成一個堪用網頁的方法呢？

「 Google Sites （ Google 協作平台） 」是 Google 多年前推出的一個讓任何人都能做網頁、做網站的工具 ，尤其適合做企業、團隊內部合作時使用的網站，因為可以整合來自 Google 雲端硬碟等服務的資料，我最常看到的例子就是台灣很多老師會使用 Google 協作平台來架設班級網頁，在 Google Sites 中整合班級的相簿、作業、課程資源，讓全班的同學或家長都能查看與使用。 而且因為「 Google Sites （ Google 協作平台）」訴求「不需要懂一行程式碼」，只要像原本編輯文件那樣，做一些資料的編輯與排版，就能把團隊、班級網頁做出來，所以對一般人來說真的很適合拿來做內部的網站製作。 但是「 Google Sites （ Google 協作平台）」之前很多年沒有大更新，整個介面與外觀也顯得過時了。沒想到，就在最近 Google 推出了大改版的「 Google Sites （ Google 協作平台）」，帶來了現在流行的新網頁風格，更好看的介面，自動適應各種螢幕大小的設計，以及真正多人即時協同編輯等功能。

Google 為了輔助開發者製作「 Material Design 」介面，推出過很多免費網頁設計資源，例如提供大量免費下載的「 ICON 圖示 」，而且這些 Google 分享的 ICON 還偶爾會更新，目前已經累積到 900 多個免費圖示。 最近， Google 又推出了一個免費的網頁設計輔助小工具： 「 Resizer 」，顧名思義，它的用途是幫你測試一個網頁在不同大小螢幕上的顯示效果。 「 Resizer 」特別針對 RWD 響應式網頁設計，你只要把網頁網址輸入線上工具「 Resizer 」，就會顯示出電腦、平板、手機上的網頁顯示樣貌，還能進一步根據想要查看的螢幕解析度做測試，幫助開發者與設計師快速了解自己的 RWD 網頁是否有問題。

當你正在規劃一個網站的版面設計、想要製作一個活動網頁、想要上線一個購物網頁，這時候或許需要從其他網站的設計中尋找一些靈感啟發，那麼， 平常有沒有什麼好工具可以幫我們「收集網頁設計靈感」呢？ 我立刻想到一些方法，例如就單純用瀏覽器的書籤儲存這些網站的網址連結？ Google 最新版書籤 也能顯示部分網站預覽圖，但還是無法把真正需要的「畫面」儲存下來。或者 用 Evernote 擷取網頁 ？但是 Evernote 不能拍照長網頁，一般網頁擷取也無法完美保留版面格式。 上面的問題讓我們可以思考，什麼是網頁設計師需要的網站書籤工具？這樣的書籤工具目的不只是記下網址而已，而是要「拍下畫面」。而今天要介紹的「 Hypershoot 」或許就是一個為了幫網頁設計師收集靈感而誕生的書籤工具。

前一週介紹過「 程式碼教學利器！可協作免費漂亮線上程式碼編輯器 」後，我便想繼續深入研究一下有沒有這類的線上程式碼編輯器，於是找到了今天要介紹的這個「 Editey 」免費網頁程式碼編輯器。 如果要說「 Editey 」最大特色，那就是他可以在 Google Drive 上新增、編輯、同步協作 HTML、 CSS、  JavaScript 等網頁程式碼檔案。 完全免費的「 Editey 」服務有兩大用途： 1. 在 Google Drive 上直接開啟一個全新的網頁編輯專案，網頁需要的檔案建立在 Google Drive 中同步，並從 Google Drive 開啟編輯，利用 Google Drive 和多人線上協同合作編輯。 2. 編輯在 Google Drive 上已經存在的 HTML、 CSS、 JavaScript、XML、 PHP 等程式碼檔案。 下面就讓我簡單介紹「 Editey 」的基本操作方式。

之前在介紹「 Draw.io 中文線上製作流程圖首選！專業水準完全免費 」一文的下方，有來自另外一個線上圖表製作軟體：「 creately 」的開發團隊來留言，推薦自己的工具擁有「 數量多更多 」的流程圖、心智圖、資訊圖表等專業有創意圖表模板範本，希望我也可以去試試看他們的服務。 說到這裡，讓我先岔出來一下下。我很樂意部落格裡多一些這樣的自薦留言，因為我是一個熱愛研究新工具的人，但一般人不需要也無法這樣做，那麼就由我來幫大家測試、挑選與介紹。這樣做的意義在於：不同的工具會有不同的特色，不同的特色就會滿足不同需求的人，而這個世界上還有無數種的需求等待著滿足。

因為工作需要，在國外找到一個資源豐富的 商務版型下載網站 ：「 PoweredTemplate 」，統稱是版型下載，其實涵蓋了簡報圖表模板、 Word 文件範本、卡片刊物印刷樣版，以及網頁版型等資源。說是商務應用，意思則是它走的不是新潮設計路線，而是我們可能在工作行政、學校社團中常常會用到，可以節省我們作業時間的套版檔案。 「 PoweredTemplate 」內容很多，同時包含了付費的模板，但也包含了一定數量以上的免費版型，網站主畫面上宣稱有超過 40000 個以上的免費資源，我雖然沒辦法細算，但整體看下來，也確實能夠找到很多能立即應用的商業簡報範本，或是應急的印刷品版面設計。