PDA

查看完整版本 : 這是用什麼程式或腳本寫成的網頁?


哈啦
2006-01-01, 06:57 PM
剛看到有人介紹「愛牆」www.lovewall.net 這種可以讓人寫留言但表現方式卻像現實生活中的便利貼,這是用什麼東西寫成的?


中間的那些黃黃紅紅的方塊可以用滑鼠移動挪開。
http://img459.imageshack.us/img459/425/x7cx.gif

而看他們的部落格中有說這個網站是「一个WEB2.0的典范,是在草根阶层兴起的年代出现的优秀网站」,請問什麼是WEB2.0? 一定要這種WEB2.0才能有這種表現型態嗎?

哈啦
2006-01-01, 07:35 PM
找到一個有類似效果的java script,但只能出現一個方塊。
語法如下:


先在網頁的<head>和</head>之間插入這段文字:

<style>
<!--

/*Post-it note script- by javascriptkit.com
Visit JavaScript Kit (http://javascriptkit.com) for script
Credit must stay intact for use*/

#postit{
position:absolute;
width:250;
padding:5px;
background-color:lightgreen;
border:1px solid red;
visibility:hidden;
z-index:100;
cursor:hand;
}

-->
</style>


然後在網頁內容的<body>和</body>之間,最好是靠近底部以後比較好參考,放入這段文字:

<div id="postit" style="left:150px;top:150px">
<div align="right"><b><a href="javascript:closeit()">[關閉]</a></b></div>

<!--INSERT YOUR CONTENT HERE-->

<b>便利貼:</b><br>
<p><font size="2" face="Arial"><a href="http://www.webmasterclub.org" target="_new">站長俱樂部<br>
</a>歡迎參加站長俱樂部論壇</font></p>
<p><font size="2" face="Arial"><a href="http://www.domainclub.org" target="_new">網域名稱俱樂部<br>
</a>網域名稱買賣、交易、評估等討論。</font></p>

<!--END YOUR CONTENT HERE-->

</div>

<script>

//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0

///No need to edit beyond here///

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit


function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function showornot(){
if (get_cookie('postdisplay')==''){
showit()
document.cookie="postdisplay=yes"
}
}

function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}

if (once_per_browser)
showornot()
else
showit()

</script>

<script language="JavaScript1.2">

//drag drop function for ie4+ and NS6////
/////////////////////////////////

function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}

function initializedrag(e){
if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script>

steven
2006-01-01, 10:49 PM
這個idea真棒.....令我大大讚賞....

哈啦
2006-01-02, 12:27 AM
這個idea真棒.....令我大大讚賞....

如果這真是大陸人原創的點子,那只能說大陸未來在網路世界的產業將無法令人小覷。
其實從「老鼠愛大米」這樣風格的歌曲流行到台灣後,就顯示了大陸的許多文化創意將逐漸抬頭而且不斷壯大,總有一天覆蓋過原本走在「流行」尖端的香港和台灣。我覺得電腦和網路上的影響力會更快。

報馬仔
2006-01-02, 07:10 PM
請問什麼是WEB2.0? 一定要這種WEB2.0才能有這種表現型態嗎?

Web 2.0的時代來臨
BEA技術經理 蕭百齡
29/10/2003
原文網址 : http://taiwan.cnet.com/enterprise/column/0,2000062893,20084802,00.htm

上週我們談到Web services是服務導向架構 (SOA; Service-Oriented Architecture)的血肉;而正確的設計觀念和周詳的導入規劃則是SOA 的靈魂。如果只是趕時髦、為Web services而Web services,無法掌握導入的精髓,那麼充其量也只不過是具行屍走肉罷了,更別說能夠為整體IT帶來多大的助益(搞不好會適得其反)。

上次談到科技發展的兩個曲線–炒作曲線和導入曲線。這次我想從其他的層面來看Web services觀念的起源、發展所處的階段,以及技術上所覆蓋的層面。

1994 年網頁瀏覽器的出現,迅速地讓World-Wide Web在短短的幾年間,首度達到前所未有,一個真正橫跨全世界的超級資訊庫,所有的文件都遵照相同的格式提供出來,並相互串聯。

如果我們從技術的角度探究Web之所以能成功,會發現遵循開放標準所帶來的鬆散藕合(loose coupling)是最重要的關鍵。怎麼說?站在一個使用者的立場,我只要有一個瀏覽器,不管是用什麼平台--PC、Unix、Mac,甚至是PDA,我都可以看遍全世界的網站。或許我明天會挖掘出幾個之前從來沒去過、令人興奮的新網站。

最棒的是,我的電腦和瀏覽器事先不用和那些新的網站先進行設定,只要想連結到哪個網站去就隨時可以去。更神奇的是,瀏覽器(資訊消費者)和網站(資訊生產/服務提供者)雙方不會因為各自不定期,或者是定期的升級、改版動作而影響彼此的連結與資訊的擷取。這就像燈泡、電池一樣,可自由選擇不同廠牌,來搭配不同的檯燈和手電筒。而Web之所以能成功,正是因為大家--也就是各廠牌的瀏覽器和網頁伺服器--基本上都遵循HTML、JPG,HTTP 這些開放格式和標準。但如果用到某瀏覽器或伺服器專屬的功能時,開放性和選擇性就會受到扼殺。

隨著網站的迅速普及,除了用網頁來提供內容和資訊外,很快的,網站也變成了資料庫查詢、線上交易等各形各色的服務提供者。網站伺服器 (Web server) 同時也開始被賦予要執行應用程式的任務。當這些任務變得愈來愈重要、艱鉅且專業時,應用伺服器 (application server) 便應運而生,時至今日,發展已趨於成熟。

我們可以把這一波的網路革命--使用者藉由瀏覽器作為窗口,享受到網站所提供的各項應用服--稱做是Web 1.0的時代。而「browser to AP」可說是這個時代不二的運行模式。

幾年前,網路上的有識之士開始思考:為什麼要那麼僵硬的侷限大家,一定要透過瀏覽器才能來執行網站上的應用、享受所提供各項服務?是不是可以讓資訊服務的消費者和生產者之間更「鬆散藕合」一點;換句話說,網站上的應用程式在提供各項服務時,是不是可以不要將交易和查詢的結果立即format成HTML網頁的格式?

因為這樣一來,就等於對資訊的消費端預設了一個立場,變成強迫消費端非得要用瀏覽器來與資訊供應端互動。是不是能有一個更中立的方式,讓消費端自行決定要如何消化、呈現從服務端所提供的資訊?XML正是在這樣的背景下誕生,其目的即在於提供一個對資訊能夠做精準描述的機制,藉以彌補 HTML 太過於表現導向的特質。

在這樣的情況下,消費端的應用彈性便大幅增進。生產端應用伺服器所提供出來的資訊「服務」,除了瀏覽器外,還有包含IM (Instant Messenger) 在內的P2P軟體、Java手機、IA 家電,乃至於其他伺服器上的服務程式。而Office類的文書軟體,也都搖身一變為潛在的資訊消費者。Web 的運行模式,也從之前的 Web 1.0 --「browser to AP」,演化到「AP to AP」的 Web 2.0 時代。而「Web services」這個名詞被選擇用來代表這個新的應用模式。

Web 1.0 時代為因應需求所衍生的應用伺服器,在Web 2.0 時代也逐漸開始演化為服務導向的應用平台。在後續的專欄中,將會進一步的討論到這個主題。

再來看看 Web services 發展至今,已經受到廣泛探討和研發的各個技術層面。我們用真實世界中的服務來對照,會發現Web services和SOA 中所強調的「服務」,在觀念上有許多地方的確有如前兩期中所言,與業務面非常貼近。

就以日常生活中常接觸到的郵局、銀行,監理所等的服務櫃檯來說,我們在臨櫃申辦之前,可以先在服務台查詢服務說明、服務項目,然後得找到正確的申辦窗口。至於申辦前,也必須先按規定先填單子,照欄位格式一項項的填寫,還必須出具印鑑、身分證等驗明正身,然後交給承辦人員辦理。當業務繁忙、排隊的人多的時候,可能會有義工或專人引導我們到比較不忙的窗口去申辦,以加快處理速度。服務的品質;也可能會受到服務主管的監聽和紀錄(像我們打電話到客服中心去,就常常被告知說,為確保服務品質,這通電話可能受到監聽)。

這些和服務相關的各項功能,在Web services和SOA的領域中,也都一一有相對應的機制,包括UDDI和 WSDL(服務查詢和描述)、service endpoint(申辦窗口)、XML Schema/XSD(申請單格式)、WS-Security(驗明正身)、SOAP(申辦動作),此外還有服務繞徑/路由和負載平衡(申辦排隊的引導)、服務監控、管理、稽核,以及品質的確保。

所有這些 Web services 的相關領域,目前都已經有專門的產品提供解決方案。在設計規劃 Web services 和服務導向架構時,負責的建築師也可以利用這些與真實世界業務相仿的特性,來協助鑑定所規劃的 IT 服務,同時應與使用單位進行充分的溝通。而此舉對成功的導入,將有相當的助益。

idea
2006-01-23, 10:07 AM
~happyguy ,

看见大家在讨论技术问题, 参与一下, 我开发了www.lovewall.cn , 这个动态的脚本谁需要大家可以发邮件给我,我寄给大家,这个脚本可以支持文字(就是那些小纸条),图片,flash的的移动,最主要的还是支持在ff中的正常显示。其实这个不能算是很复杂,也没有用ajax等技术。

希望和大家可以经常讨论技术问题。

我的邮件, idea@lovewall.org ,来自北京,爱墙.中国 ,

在中国人的春节,请大家到www.lovewall.cn上发布自己的心愿。谢谢。 ~happyguy

哈啦
2006-01-23, 10:18 AM
~happyguy ,

看见大家在讨论技术问题, 参与一下, 我开发了www.lovewall.cn , 这个动态的脚本谁需要大家可以发邮件给我,我寄给大家,这个脚本可以支持文字(就是那些小纸条),图片,flash的的移动,最主要的还是支持在ff中的正常显示。其实这个不能算是很复杂,也没有用ajax等技术。




確實是很不錯的創意:thumbsup
歡迎常來這裡討論討論:wave

steven
2006-01-23, 01:52 PM
真棒,已寄信,請查收,謝謝.

idea
2006-01-24, 01:44 PM
:songyy ,

http://www.lovewall.cn/opensource/index.htm


希望和大家进一步交流网站技术,谢谢。


:cool: ;)

哈啦
2006-01-24, 01:46 PM
:songyy ,

http://www.lovewall.cn/opensource/index.htm


希望和大家进一步交流网站技术,谢谢。


:cool: ;)


謝謝。

請問一下,我把檔案放上去後,裡面找不到可以讓訪客貼message的功能?而是和 http://www.lovewall.cn/opensource/index.htm 一模一樣的網頁而已?

steven
2006-01-24, 03:29 PM
謝謝!

可下載的應該是只有動態技術的部份,
我看內容是直接寫在index.htm裡面,可能要自己加一支程式讓訪客把message插入index.htm吧.

哈啦
2006-01-24, 05:55 PM
謝謝!

可下載的應該是只有動態技術的部份,
我看內容是直接寫在index.htm裡面,可能要自己加一支程式讓訪客把message插入index.htm吧.

哪位大大能寫一個完整的程式造福一下大家:embarasse

steven
2006-01-24, 09:19 PM
嗯 ...要自己改可能書要看上很久.....