Interactivity and DOM/Java Applications
網路互動與雲端元件應用
Web Design:
Automations - Epistemological/Digital Aesthetics
- Formation Methodology
網站/網頁設計:自動化實作-知識美學/數位美學之建構方法
網路互動是由伺服器後端資料庫所產生的，使用者係經由前端表單(forms)介面呼叫資料庫。當前，也有許多企業-如Google，提供雲端式的互動服務。
許多個人或組織，也提供各種進階自動化元件。其中Java 是廣泛發展各種互動功能的常用語言。
而配合HTML的Java，特稱為DOM/Java。
Search 搜尋引擎設定
在網頁內嵌入Google搜尋引擎
You may use MS Search, however, it is better to use Google Search.
<img alt="只在「統雄社群」內查詢以下主題" src="search-comm.gif"
width="117" height="18" class="border0" />
<form action="http://www.google.com/search" method="get"
style="width: 220px" class="tb-0">
<input type="hidden" name="output" value="googleabout"/>
<input type="hidden" name="sitesearch" value="http://tx.liberal.ntu.edu.tw"/>
<input type="text" name="q" size="20" style="width: 210px"/><br/>
<input type="submit" value="確認" name="submit"/></form>
Sub
Domain and Sub Directory
<input type="hidden" name="sitesearch" value="http://tx.liberal.ntu.edu.tw"/>
|
tx.liberal.ntu.edu.tw |
includes all files of sub directories (physical folders) and sub domains (virtual path) |
|
tx.liberal.ntu.edu.tw/ |
includes all files of sub directories of root web but sub domains |
|
tx.liberal.ntu.edu.tw/sub/ |
restricts files only of the specified sub directories or sub domains |
Pop-up Page
立體空間之彈出網頁
許多看起來「很眩、很酷」，也曾經、甚至持續在風行的網路設計，現在卻被檢討其實用性，甚至成為被封鎖的對象，Pop-up Page 彈出網頁與Rotating Banners 動態輪播橫幅，都是這類的例子。
It used to be an important function, however, it has been abused by vicious ads.
A JavaScript function to create pop-up windows for extra visual dimension.
<script language="JavaScript">
<!--
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open('', 'popupnav',
'left=35,top=100,width=400,height=450,resizable=1,scrollbars=1');
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;
}
popup.location.href = 'popup.htm';
}
// -->
</script>
Insert the script between <head> and <body> into a 'non-framed' page.
Use it for something new or very special.
Avoid to be annoyed.
However, many new browsers will close the pop-up windows automatically.
Advanced: Rotating Banners
動態輪播橫幅
Rotating Banners 動態輪播橫幅又稱為Carousels. Sliders，是網站設計商，非常愛為客戶推薦的項目。
但近年無論網頁效果研究、或網頁設計專業社群，愈來愈不推薦，甚至建議應移除Rotating Banners 動態輪播橫幅。主要理由，就是設計者以為「眩」的物件，對使用者沒有「取用效果」，甚至有反效果。
不過，仍然提供有興趣者，程式設計如下。
<script type="text/javascript">
var imgs1 = new
Array("TxCom.gif","wholistic.gif","math.gif","english.gif","computer.gif","happylearn.gif","cheers.jpg");
var lnks1 = new
Array("http://tx.liberal.ntu.edu.tw","../../RwdTXWu/Jx/Common/TxEducation.htm","../../RwdPurpleWoo/Methodology/spider.htm","../../RwdTxFB/humor/jokes.htm","../../RwdTxMusic/index.htm","../../RwdTxFB/Essay/%E7%A7%91%E6%8A%80%E5%A0%B1%E5%B0%8E/A_Pioneer_of_Education_Reform.htm","../../RwdTxFB/Essay/Chinatimes/Everyone%20could%20be%20a%20student%20of%20NTU-%E5%85%B6%E5%AF%A6%E2%80%A7%E6%AF%8F%E5%80%8B%E4%BA%BA%E9%83%BD%E5%8F%AF%E4%BB%A5%E5%94%B8%E8%87%BA%E5%A4%A7.htm");
var alt1 = new
Array("內容網站：提供與分享各種知識、資訊、作品。互動群組：社員可以討論、展示、交流、企畫、分工、管理、投票決策。合作群組：Web2.0的民主自治精神，社員可以參與決定群組的內容與表現形式。","人類的潛能，應平衡開發。");
var currentAd1 = 0;
var imgCt1 = 7;
function cycle1() {
if (currentAd1
== imgCt1) {
currentAd1 = 0;
}
var banner1 =
document.getElementById('adBanner1');
var link1 =
document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval("cycle1()",6000);
</script>
<a
href="https://seantxwu.pages.dev/" id="adLink1" target="_blank" >
<img
src="../../-cache/TxCom.gif" id="adBanner1" border="0" width="220" height="65"></a>
雲端元件
雲端元件是減輕網站開發負擔的新趨勢，各搜尋引擎、社交網站、系統公司均有提供。
FB App and Plugins 臉書外掛程式
開放社交關係圖標記 Open Graph/ OG:
OG（程式以 OG: 表示） 全名為 Open Graph Protocol，是由 Facebook 提出的設定，官方翻譯為「開放社交關係圖」，目標是讓網頁在社交媒體呈現時，能有較豐富的內容展示，如縮圖、標題、描述等。
當前各社交/部落格平台上：line、whatsapp、facebook、instagram inbox、medium、vocus、wordperss...等，都是 og 會發生作用的地方。
社交網站預設圖設定
OG 標籤雖有多個，但除了商務網站的考量外，對一般內容網站優響最大的只有預設圖設定。當網頁有多個圖片，上傳社交網站後，會亂抓預設圖、更多的情形是沒有預設圖。
雖然 FB 有提供「開發者工具中的分享偵錯工具」可以重抓圖，但太費時間人力，還是直接寫在程式中為理想。
在「範本中」可以保留多個 OG，以防萬一，但常態只使用 meta property="og:image"
<!-- #BeginEditable "doctitle" -->
<title></title>
<meta
name="keywords" content=","/>
<meta name="description" content=""/>
<meta property="og:title" content="同標題">
<meta property="og:description"
content="同簡介，但需精簡">
<meta property="og:image"
content="https://網站/Path/預設圖">
<meta property="og:url" content="絕對位址">
<meta property="og:type" content="website">
base target=""/>
<style>
</style>
<!-- #EndEditable -->
OG 的各種效果
還有更細的設定，可以不用。
<meta property="og:image:width" content="600" />
<meta
property="og:image:height" content="1000" />
FacEBook Developer
https://developers.facEBook.com/apps/?action=create
TxApp
txappspace
FacEBook for Websites
https://developers.facEBook.com/docs/guides/web/
Social Plugins 社交外掛插件
https://developers.facEBook.com/docs/plugins/
FB的社交外掛插件，可以提供其他網站使用 FB 的一些功能，舉例如下。
Comments 討論區外掛插件
https://developers.facEBook.com/docs/plugins/comments/
節省本站討論區的資料庫、登入控制，也可增加更多討論來源。
FB 第三方外掛插件
當前有許多業者提供FB 第三方外掛插件，如：
提供外觀、圖層、廣告轉播工具…等等，以及更多SEO: 含白帽 SEO，與黑心 SEO的插件。
不過，即使是白帽插件，選用也要小心，因為可能不易刪除FB 第三方外掛插件。
Web Counter 網站計數器
網站計數器是一種小程式，但形式很多，並分為線上、和本機2類除了訪客計數外，還可以有其他計數功能。
這方面技術層次不高，且數字可以人為調整，故意義不大。
提供國內外免費嵌入計數器的連結如下，警告：任何下載都必須注意如何不中電腦病毒/網路病毒，尤其避免被誤導下載病毒。
線上嵌入計數器
https://s04.flagcounter.com/index.html
本機嵌入計數器
http://www.simplehitcounter.com/
http://terisawu.pixnet.net/blog/category/660138
npm (Node Package Manager)
Node 模組管理器‧解決 HTML5, CSS3 燃眉之急
npm（Node Package Manager）一般中譯為 Node 包管理器，統雄老師建議，較佳之中譯應為 Node 模組管理器。它是一個javascript 的軟體套件管理系統，預設工作環境為Node.js，從Node.js0.6.3版本開始，npm被自動附帶在安裝包中。
Package 早期是指相對大型的客戶訂製系統，現在則指可「再用 reuse」、容易更新的小程式、小模組。
npm 其實就是一種自由 java 模組，如PHP之於(PEAR)、Perl之於(CPAN)。由Isaac Z. Schlueter 在符合CommonJS的規範下，而開發出npm。
在Html5, CSS3 時代，由於許多瀏覽器尚不及支援新定義，故以 mpm 暫時解決燃眉之急。
不過，實務上，各瀏覽器還會支援 Html4 的命令，如 <marquee>，已被 Html5 取消（改為 css），但<marquee>在可見的未來，仍然能夠使用。
Other Java Applications 其他Java程式
Chinese Version
連結不到網頁