跳到主要內容區塊

ntuccepaper2019

技術論壇

活用 Web Widget
  • 卷期:v0007
  • 出版日期:2008-12-20

作者:許凱平 / 臺灣大學計算機及資訊網路中心程式設計組程式設計師


我們在瀏覽萬維網的時候,常常會看到有些網頁上面加了一些有趣又實用的小東西「Web Widget 」,例如搜尋列、氣象方塊、小日曆、公佈欄、留言版、訪客地圖以及迷你相簿等等。除了增加不少可用性外,它也可以讓網頁增加「鮮活」的感覺,讓一個網頁的作者完成他的文章後,還可以透過回覆與評價與讀者互動,以及讀者之間的互動。如何讓自己的網頁也加上這些有趣的配件呢?本文僅就目前網路上流行及計資中心提供的「Web Widget」做一簡單的介紹。
 

前言

衍生於代碼重用的概念,「Web Widget」實際上就是一小段容易複製使用的HTML/CSS/ JavaScript 程式碼。引用者毋須對這些程式碼加以編譯,簡單地複製貼上就可以使用,因此可以很容易地移植到任何網頁上。除了被稱為「Widget」之外,它還有gadget」「snippet以及「flake」等名稱。

Widget服務提供者負責建置主機,以及程式碼的更新,Widget服務使用者只要利用Widget產生器,做幾個簡單的選擇,便可以取得客製化的程式碼。將這段程式碼貼回自己的網頁之後,即可運作。使用上來講,大部分的Widget都不需使用者會寫程式,也不需用戶自行架設應用程式伺服器。

這些小套件加以設定之後,往往會產生意想不到的絕妙組合,讓以往靜態的網頁不再死板。進階使用者更可發揮創意,混搭(Mashup)幾個不同的服務,產生新的服務。


站內搜尋服務

20081220070901

利用Google提供的「自訂搜尋引擎」的服務,就可以輕鬆替自己的管理的網站添加站內搜尋功能。首先你要有一個gmail帳號作為未來管理之用,gmail帳號可以在網址列輸入https://www.google.com/accounts/NewAccount 建立。

建立自訂搜尋引擎的步驟

1.利用gmail帳號登入google
2.選取自訂搜尋,或直接輸入http://www.google.com/coop/cse/
3.點選「建立自訂搜尋引擎」。
4.按照說明填寫網址,政府、大學或非營利機關可以勾選免除廣告
5.收信,然後將信中的代碼貼入你的網站即可


迷你地圖

在電子報第四期「電子地圖」已經介紹過了。我們可以在urmap或google map上標示單位建築物之地點以及路徑,再產生Widget。將Widget程式碼回嵌網頁,即可提供訪客可縮放搜尋的活地圖。


相簿

網路相簿除了提供自己欣賞外,也可以利用相簿服務提供者所建立的Widget將相簿回嵌部落格。
20081220070902


問卷調查

請參考「運用JotForm製作簡易表單」一文,利用免費問卷調查服務,線上製作問卷,再產生程式碼回嵌自己的網頁即可。

 

臺大計中提供的Web Widgets

以下介紹兩個台大計中提供的Web Widgets,分別提供專屬公佈欄以及電子報訂閱嵌入單位網頁的服務。

 

臺大校園最新消息之整合服務
臺大各單位每天產生許多的公告,一個典型的作法就是張貼在自己的單位網站上。部份系所行政人會會想到一些進階的功能,例如分類、通知以及到期自動隱藏等等。有經費或有同學可以幫忙設計的系所,很可能就有了一套電子佈告欄系統可以使用。這些程式碼可能可以提供其他單位複製,但是得到這些程式碼的單位也要自備主機,並且要有人可以維護設定才行。

如果公告對象是自己系上或自己所屬的單位的話,這個方式沒什麼大問題,要看的人自然會來看。如果對象是全校的話,只好又到學校的「臺大校園公佈欄」張貼一次。如果可以過濾掉與系上無關的公告的話,我們就可以將「臺大校園公佈欄」放到系上的網頁上,並且以後只要貼一次就好。「臺大校園最新消息之整合服務」就是提供這樣的服務,利用系統提供的「Web Widget」系所不用自己建置電子公佈欄,又可以有自己的公佈欄,詳細使用請參考李維恩先生在第三期之「臺大校園最新消息之整合服務」一文。

 

臺大電子報專屬訂閱/歷史報區 Widget
如何增加訂戶,這是校內各單位在建立自己的電子報後,常常碰到的問題。對系上有興趣的訪客,經常會拜訪的就是系所首頁。雖然我們也可以在單位首頁上加電子報的連結,讓訪客連過去再訂閱;但如果能讓訪客可以直接在單位首頁上輸入email即可完成訂閱,不用再連來連去就更完美了。沒錯!臺大電子報專屬訂閱/歷史報區 Widget提供的就是這樣的功能,下圖便是國際事務處首頁嵌入Widget的螢幕擷取畫面。實際使用請參考「如何將專屬訂閱頁面嵌入我的單位網頁或電子報中?」(http://epaper.ntu.edu.tw/admin/help/widget.htm )


20081220070903


結語

以前開發程式,常會被使用者輕賤的是:為什麼我開發的應用做不到像 Word / Excel 一樣方便? Office一套才多少錢? 現在的程式師一方面很幸福,一方面也很慘。幸福的是:有強大的開發工具跟開放源碼的專案可以使用;慘的是被用來比較對象不再只有微軟,而是全球的工作者:他們可以做到又美觀又好用, 甚至「不用錢」。 很多服務建置根本不需要程式師的存在;一些使用者甚至運用這些免費的工具, 可以拼出比專業工程師更好的成品。

生活在這個全球化加十倍速的時代,如果能夠掌握最新的趨勢,巧用網際網路上的各種資源,相信要做到又快又好還是有可能的。需要的是一直有人肯拋磚引玉,分享自己的經驗,讓大家能夠以更少的時間成本,學到更多能夠運用於工作之中的東西。另外我們製作的東西,也要讓別人可以輕易使用,才能跨越組織的藩籬,產生無遠弗界的影響。