關閉導覽列 Close Menu
數位文創
English
吳統雄
數位美學
電子書
數位視覺
優化網站
微電影
數位文創管理
大學青年網誌
研究目錄
教學課程頁
討論區目錄
站務與協助
☰
More
社群地圖
社群新聞
│吳統雄
履歷
研究
教學
服務
榮譽
│社科
第1類知識
第2類知識
第3類知識
研究方法
統計/多變項分析
投票行為與選舉預測
53237 選民結構
人類取用行為新典範
取用行為國際研究團隊
│資管
管理學‧經濟學
貨幣主義
數位貨幣‧投資行為
資訊系統開發
電子商務
網路教育
數位電視
產學合作
就業進修‧甄選必勝
│文創
數位美學/數位文創導論
數位出版/電子書
視覺設計
優化網站
數位視訊/微電影
數位文創管理
大學青年‧網路雜誌
│電音
統雄 數位音樂作品選
我,被禁唱的民歌手
數位音樂創作教學
統雄的音樂知識美學
歡迎聽歌.點歌.下載樂譜
│人文
公共評論
法律評論
社會評論
教育文化傳媒評論
科技科普評論
美語樂學
文學創作
萬象現代(NBA)
資訊社會
幽默人生
統雄樂水
Automations 網站/網頁:自動化與互動設計3

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 網站計數器

Flag Counter

網站計數器是一種小程式,但形式很多,並分為線上、和本機2類除了訪客計數外,還可以有其他計數功能。

這方面技術層次不高,且數字可以人為調整,故意義不大。

提供國內外免費嵌入計數器的連結如下,警告:任何下載都必須注意如何不中電腦病毒/網路病毒,尤其避免被誤導下載病毒。

線上嵌入計數器

https://s04.flagcounter.com/index.html

本機嵌入計數器

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
同類別內相關主題

上層主題
Web: 什麼是Web?Web虛擬世界的實體環境與虛擬環境 Web: Fundamentals
IIS: 什麼是 IIS?網站部署與IIS基礎應用 IIS: Fundamentals
Web的設計與管理模式 Web Design and Management Models
網路內容的製作與呈現類型 Internet Contents Presentation Types
Web Design Tools 網站開發工具
How to Expression Web/SharePoint Designer 微軟網站開發軟體應用快訣與其機巧
A Quick Canon for Expression Web 網站設計:Expression Web 簡捷建站功法
A Quick Canon for SharePoint 網站設計:SharePoint 簡捷建站功法
How to Html 超文件標註語言的結構、功能、應用快訣與其機巧
網頁語言 HTML5 簡介 HTML5: An Introduction
Web Analysis Framework and Its Formation Elements 網站/網群創作分析架構與建構元素
Web Design: Community Structure 網群結構
Website Structure_Navigation Design/ 網站虛擬結構:Extension Web 導覽設計
Website Structure_Navigation Design/ 網站虛擬結構:SharePoint 導覽設計
Web Design: Website Structure_Folders Design/網站實體結構:資料夾設計
Basics and Borders Method of Web Page Layout 網頁平面設計基礎與邊框法
Table Method of Web Page Layout 網頁平面設計表格法
Frames Method of Web Page Layout 網頁平面設計框架法
CSS Method of Web Page Layout 網頁平面設計CSS法
Web Design: Context- Presentation 意涵-文字視覺設計:字碼‧字型‧字體與字的性格
Web Design: Context- Presentation 意涵-文字視覺設計:字級‧字大小‧字重要性
Web Design: Context- Presentation 意涵-文字視覺設計:其他字特徵的呈現與配樣式
Web Design: Context- CSS 網站/網頁設計:意涵/文字-什麼是CSS
Web Design: Context- CSS Practice 網站/網頁設計:意涵/文字-CSS 實作
CSS Practice Advanced 層疊樣式表 CSS 進階實作_網站/網頁設計:意涵/文字
Web Design: Theme 網站布景主題設計
布景主題個人化 Personalized Theme
Web Design: Blocks- Pictures 網站/網頁設計:圖文框-圖片/影象處理
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格多元應用
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格與邊框設計
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格進階應用
Web Design: Blocks- Objects 網站/網頁設計:圖文框-非圖表物件
Webpage Layers Design 圖文層設計‧網頁圖層應用
Web Design: Automations-Links 網站/網頁設計:自動化與互動-超連結與導覽
Various Hyperlinks_Automations and Interactivity 各種超連結_自動化與互動
Navigation Bar Design 導覽列設計/微軟網路機器人 Webbot 法
Navigation Bar Design 導覽列設計/互動式按鈕設計法
Navigation Bar Design 導覽列設計/自訂 Java 法
Navigation Bar Design 導覽列設計/Html5 CSS 法
Navigation Bar Design 導覽列設計/下拉選單與樹狀導覽法
Navigation Bar Design 導覽列設計/雙導覽列_多導覽列法
Navigation Bar Design 導覽列設計/固定位置導覽列法
Information Map Design_Web Design 資訊地圖設計
Web Design: Automations-Webbot 網站/網頁設計:自動化與互動-網站機器人
Web Design: Automations- Advanced 網站/網頁設計:自動化與互動-雲端元件
Web Design: Multimedia 網站/網頁設計:多媒體影音應用
Web Design: Multimedia 網站/網頁設計:網路音訊與網路收音機設計
Web Design: Multimedia 網站/網頁設計:嵌入影音播放器標籤
網頁內嵌多媒體當機‧整體優解 QuickTime Plug-ins 7.7.4 has crashed
Web Design: Multimedia 網站/網頁設計:播放清單檔設計
網頁視訊與媒體播放器
在網頁插入微軟視窗媒體播放器
Insert Adobe Flash Player 插入Adobe Flash 播放器
Embed YouTube Player and iframe Tag 嵌入YouTube播放器與遠端影音之標籤
HTML5 Video: A Morning Glare Battlefield/ HTML5 媒體播放器:旭光戰場
Video and Media Player 播放器進階與視訊小工具
Web Design: Dynamic Templates 網站動態範本設計
Web Design: Dynamic Templates 網站動態範本應用
目錄管理與遠端編輯


內容網站:提供與分享各種知識、資訊、作品。互動群組:社員可以討論、展示、交流、企畫、分工、管理、投票決策。合作群組:Web2.0的民主自治精神,社員可以參與決定群組的內容與表現形式。

吳統雄的音樂-Sean TX Wu's Music  笑話中學美語-Humor and American English Learning   私人來信-Write a private mail to Sean TX Wu  留言與討論 Leave Comments/ Forum 吳統雄的相簿-Sean TX Wu's Album

只在「統雄社群」內查詢以下主題 Search in TXCommunity

統雄網群的Google排行本站Google排行榜‧全球冠軍
統雄社群-相關主題

各種超連結與導覽

Link Between Webs,站間連結
Meta tag, Redirection,統合標注與重新導向
Target Frame,目標框架
Bookmark: Within Page,頁內書籤
Email Address 連結電子郵件
Icon: Visual Link,圖示連結
閱覽順序 Pagination
無限捲軸 Infinite Scroll
Link on a image 圖片連結格式
Link external pics,站外圖片連結
Link Management,連結管理

導覽列與按鈕設計

微軟網路機器人 Webbot 法
導覽列設計/互動式按鈕設計法
導覽列設計/自訂 Java 法
導覽列設計/Html5 CSS 法
導覽列設計/下拉選單與樹狀導覽法
導覽列設計/雙導覽列_多導覽列法
導覽列設計/固定位置導覽列法
Information Map,資訊地圖設計

微軟網站機器人與表現方式

Common Contents,共用內容
Marquee,跑馬燈
Common Contents,共用內容
Navigation History導覽歷史管理
Using Behaviors, 基本Java應用
Redirecting users to a new window 導向新視窗
Messages in status bar狀態列訊息

網路互動與雲端元件應用

Search,搜尋引擎設定
Pop-up Page,彈出網頁
Rotating Banners,動態橫幅
FB Apps,臉書外掛程式
Web Counter 網站計數器
npm: java Node 模組
Other Java Apps,其他Java程式