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 DirectorySub 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

More infoMore info

 

advanced 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 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","http://tx.liberal.ntu.edu.tw/Jx/Common/TxEducation.htm","http://tx.liberal.ntu.edu.tw/~PurpleWoo/Methodology/spider.htm","http://tx.liberal.ntu.edu.tw/TxFB/humor/jokes.htm","http://tx.liberal.ntu.edu.tw/TxMusic/index.htm","http://tx.liberal.ntu.edu.tw/TxFB/Essay/%E7%A7%91%E6%8A%80%E5%A0%B1%E5%B0%8E/A_Pioneer_of_Education_Reform.htm","http://tx.liberal.ntu.edu.tw/TxFB/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="http://tx.liberal.ntu.edu.tw/" id="adLink1" target="_blank" >
<img src="../!Cache/TxCom.gif" id="adBanner1" border="0" width="220" height="65"></a>


雲端元件

雲端元件是減輕網站開發負擔的新趨勢,各搜尋引擎、社交網站、系統公司均有提供。


FB App and Plugins 臉書外掛程式

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 第三方外掛插件,如:

fbskins

提供外觀、圖層、廣告轉播工具…等等,以及更多SEO: 含白帽 SEO,與黑心 SEO的插件。

不過,即使是白帽插件,選用也要小心,因為可能不易刪除FB 第三方外掛插件

 

Web Counter 網站計數器

網站計數器是一種小程式,但形式很多,除了訪客計數外,還可以有其他計數功能。

這方面技術層次不高,故提供國內外免費計數器的連結如下。

http://www.e-zeeinternet.com/

http://www.hitwebcounter.com/

http://www.simplehitcounter.com/

http://counter.i2yes.com/

http://terisawu.pixnet.net/blog/category/660138

 

Other Java Applicationsnpm (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 ApplicationsOther Java Applications 其他Java程式

http://www.soweb.net/learn/

 

Chinese Version

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題