anfa 的部落格

Soapbox - Microsoft 對 Youtube 的反擊?

"正當 Youtube 打得火熱之際, 微軟其實也在默默的備戰中.
Soapbox, 像 Youtube 那樣給用戶分配短片的網站.
早在 9~10月 時開放申請測試, 我也有申請到, 只是一直沒空寫文 :P

http://soapbox.msn.com/

以下用截圖的方式讓大家看看他大概是怎樣的.

進入網站首頁會看到要求登入的畫面:
http://static.flickr.com/155/352053288_a8353fe4ea_o.jpg

登入後的畫面如下:
http://static.flickr.com/163/352053341_6ae441800b_o.jpg

左邊的選單是以 Flash 呈現出來:
http://static.flickr.com/128/352053719_9c354e3751_o.jpg

整個網站是 "One page, One Application" 的型式進行.

browse videos

在短片圖示上 mouseover 的話會有該短片的文字簡介,
http://static.flickr.com/159/352053376_d7c0e8c36c_o.jpg

點進去的話, 短片就會在右手邊的地方播放.
http://static.flickr.com/147/352053428_57a716348c_o.jpg

其中下面的 tab 選單也是以 AJAX 進行傳輸的.
http://static.flickr.com/147/352053428_57a716348c_o.jpg

categories

http://static.flickr.com/144/352053507_605fdb42cd_o.jpg
接下來點選分類的話, 在中間的地方就會換成下圖的樣子.
正常點選相應的選單或圖示都可以進入該分類中, 但我點圖示下的文字卻無效...

點選後就能進入該分類了.
http://static.flickr.com/152/352053608_3c20519cac_o.jpg

其中可以點選 "sort by:" 來選擇排序方式.
http://static.flickr.com/154/352053627_3d6e6f0b6c_o.jpg

my soapbox

http://static.flickr.com/137/352053784_54887f24f9_o.jpg
可看到一些自己上傳的短片資料
其他的 upload, videos, tags, favorites, comments
由於沒什麼特別我就不一一說明了.

upload videos

http://static.flickr.com/142/352053821_45b02d1efb_o.jpg
有列出支援的檔案格式及大小限制.
upload 也是 ajax 的, 上傳中可以作其他事情.

help

help 是採用彈出視窗的形式, 連到這裡:
http://help.live.com/help.aspx?project=soapbox&market=en-us&querytype=&query=&tmt=&domain=soapbox.msn.com&format=b1

Search 是在網頁的頂部, 也是 AJAX 的, 搜索結果會在中間位置顯示.
http://static.flickr.com/131/352053875_eb69a6e1f3_o.jpg
http://static.flickr.com/157/352053558_6dae36b14d_o.jpg

結語
沒有非常特別, 也由於現在並沒有完全開放測試的關係,
用戶好像不多, 如果要選 Youtube 爭一席位的話, 我想還有難度.

"

談談 AJAX

"

來談談 AJAX  的一些八掛事吧 (?)

沒特別意思的. 


 

要談他之前, 當然是要先了解他是什麼, 不然談不下去.

以前, 對於我們想了解的事物, 百科全書都記載得很清楚.
只是翻書很麻煩. 拜網絡發達所賜, 現在我們有 維基百科.

那我們先看看維基百科上怎樣說明 AJAX:
http://zh.wikipedia.org/wiki/AJAX
AJAX全稱為「Asynchronous JavaScript and XML」(非同步JavaScript和XML),是一種創建互動式網頁應用的網頁開發技術。它使用:
使用 XHTML+CSS 來表示信息;
使用 JavaScript 操作DOM(Document Object Model)進行動態顯示及交互;
使用 XML 和 XSLT 進行數據交換及相關操作;
使用 XMLHttpRequest 對象與Web伺服器進行非同步數據交換;
使用 JavaScript 將所有的東西綁定在一起。

這樣對 AJAX 有基本概念後,
然後再看看一些有關 AJAX 的文章.

Six Myths About Ajax ( AJAX 之六謎思 )
http://redmonk.com/anne/2006/12/05/six-myths-about-ajax/
1. AJAX is an acronym. It stands for “Asynchronous JavaScript and XML.” Capitalize all the letters or you’ll look like a dork.
AJAX 是縮寫, 代表 "Asynchronous JavaScript and XML", 一定要大寫.

2. Ajax will make your site more usable. Just look at how user-friendly GMail and Google Maps are.
能令你的網站更方便使用, 就好像 GMail 和 Google Maps 那樣.

3. Ajax is just window dressing–it’s only about superficial cool and special effects.
只是一件櫥窗裝飾, 華而不實.

4. Ajax is too difficult for the average web developer.
對普通的 Web Developer 而言太難了.

5. Ajax breaks the browser model.
破壞了傳統的瀏覽器模式.

6. Ajax is a crucial part of Web 2.0.
其為 Web 2.0 重要的一環.

結論簡說:
1. 作者認為 AJAX 不一定要大寫.也不認為 AJAX 一定要配合 XML, 可以使用其他資料格式, 如 JSON.
2. AJAX 不一定會令到你的網站變得更為方便使用.
3. AJAX 不是單純的裝飾, 我們可以把 暫時/不重複使用 的資料以 Scripting 記錄下來, 重複使用的東西才 Cache 起來.
4. AJAX 並不簡單, 但他正不斷簡單化中. 藉著開源 framework 的流行, 使用同樣 framework 的人可以一起交流, 改進 framework, 解決問題.
5. 不是單純 AJAX 才有的問題, 在 HTML, Flash 也存在著.
6. 這個要看我們對 Web2.0 的定義為何, 作者認為 Web2.0 最重要的概念是社區網絡, 而不是技術.

感想:
1. 個人覺得AJAX 比較正統, 假如看到別人寫 Html, Css,
心理會覺得毛毛的...
也有人把使用 JSON 資料格式的另行命名為 AJAJ.
另外我不認同要把 CSS 和 DOM 硬加到 AJAX 的定義上.
(雖然 JavaScript 可以控制 CSS 及 DOM)
2. 我覺得要用得其所. (以後會談到)
3. 對一些網頁上的"小動作", 不用翻頁就可以解決, 這個是我覺得最吸引的地方.
因為每次的翻頁時, 都有大量頻寬佔用在不主要的地方.
重讀 CSS, JS, HTML 等... 有人說能透過 Cache 解決, 但, Cache 不是必然的.
4. 如果要由零開始自己白手起家, 那絕對是要命的行為.
不過現在 JS framework 多, 已經把繁複的東西簡單化很多的了. (不只AJAX, 其他東西的使用也是)
5. Accessibility 和 Usability 這些和個人使用習慣有很大關係... 不是簡單說得清.
6. 我也這樣認為.

AJAX in Action 作者之一 - Eric Pascarello 的訪談裡提到 4個 AJAX 定義性原則: (也是書的第一章提到的)
http://java.sun.com/javascript/ajaxinaction/PascarelloQA.html?feed=JSC
1. The browser hosts an application, not content
2. The server delivers data, not content
3. User interaction with the application can be fluid and continuous
4. This is real coding and requires discipline
我的理解是 資料 與 外觀架構要分開, 瀏覽器用來接入資料, 伺服器提供資料, 其他外觀的東西讀取一次就夠.
然後就是用戶與網頁之間能作流暢而不間斷的互動, 最後是 Coding 的問題, 不能隨便.

另外他在這也提到 AJAX 的安全問題及6點注意事項:
http://searchwebservices.techtarget.com/qna/0,289202,sid26_gci1164745,00.html
1. If you use user authentication, make sure you check for it on the request page!
2. Check for SQL injections.
3. Check for JavaScript injections.
4. Keep the business logic on the server!
5. Don't assume every request is real!
6. Check the data with validation!
7. Look at the request's header information and make sure it is correct.
簡單說就是, 不能單純依靠 Client 端的安全性, Server 也佔了很大的一環.

接下來,  AJAX 應該在什麼地方使用才好呢?

Places You Must Use Ajax
http://swik.net/Ajax/Places+To+Use+Ajax
1. Form driven interaction.
   i. Form driven interaction- Subset:Linked Select Menus.
   ii. Form driven interaction- Subset: Autosave.
2. Deep hierarchical tree navigation.
3. Rapid user-to-user communication.
4. Voting, Yes/No boxes, Ratings submissions.
5. Filtering and involved data manipulation.
6. Commonly entered text hints/autocompletion.
7. Interactive Errors
8. Long Running Queries/Remote Calls
9. Computationally Expensive Operations
10. Server Savings
11. Interactive Panning And Moving Over Data

1, 3, 4, 6, 7, 8, 9, 10 這幾點我是非常認同的.
但 2, 5, 11 我覺得和 AJAX 沒有直接關係... ( 單純用 JavaScript 就夠的東西 )

One Page, One Application
http://michael.nona.name/archives/117
現在很多 Web 2.0 的網站也是做成 OPOA 的,
在沒有 AJAX 之前 HTML + JS 要這樣做差不多是一種幻想.

不過這也要看個人的設計而定, 不一定是 OPOA 就是好的.


我發現我越寫越懶了 囧
不過希望這些東西能幫助大家對 AJAX 的了解 :P"

跨域名問題 與 AJAX 如何刻服

"

你知道這是什麼回事嗎? 

你曾為這類問題煩惱嗎?

你知道如何在 AJAX 裡刻服嗎?

不知道的話, 點進來就是你的答案 ^-^[@more@]

跨域名 - Cross Domain

我們平時看網頁時, 碰到 JavaScript(以下簡稱為JS) 的機率其高,
而 JS 也為古板的 HTML 添加了很多色彩.

在寫 JS 的過程中, 不知大家有沒有碰到過這樣類似的問題:

為什麼我不可以外連其他網站的 .CSS 啊?
為什麼在 IFrame 裡套入其他網站的話我就拿不到裡面的資料啊?
為什麼我不可以讀取其他網站的 RSS 啊?

其實, 理論上這並不是 JS 不能這樣做, 而是瀏覽器不容許 JS 這樣做.
其實 JavaScript 很強大, 正因為這樣, 很容易被加以利用在邪惡的地方.
因此瀏覽器才對這些有可能引起安全問題的地方加以限制起來.

對於這類跨越自己網域進行 Client 端 Scripting 的行為, 網絡上俗稱 XSS.

XSS (Cross Site Scripting)
http://en.wikipedia.org/wiki/Cross_site_scripting
http://twpug.net/modules/smartsection/item.php?itemid=34

以一個簡單的例子解釋:
不少網站的登入系統都會在登入時把一些資料透過 Cookie 的形式儲存在我們的電腦中,
其中可能包括我們的 Username 及 Password.
在正常的情況下, 這樣的 Cookie 只有生成這筆資料的 domain 才有權去存取的.
但如果我們在另一個 domain 下, 有能力透過 JavaScript 去更改我們所存在的 Domain 位置:

document.domain="example.com";

這下子我們就在能力去存取該 Cookie 了!!
然後再透過一些 Server Side 的語言把該 Cookie 記錄到我們的 Server 中,
那我們就能抓取到別人的資料了.

這個是在 IE, FF 曾經出現過的嚴重安全漏洞, 當然, 也早就修正過來了 :P

關於 Cross Domain 的安全性問題, 多不聲數.
http://www.securityfocus.com/swsearch?sbm=%2F&metaname=alldoc&query=Cross-Domain
JavaScript, CSS, IFrame, ActiveX, XMLHttpRequest, ETC.

當然, 並不是所有 Cross Domain 的行為都是危險的,
但為安全起見, 大部份新版本的瀏覽器都已經禁止類似的行為了.

說到這裡, 和 Web 2.0 有什麼關係呢?
有! 在 AJAX 裡使用到的核心 - XML Http Request(下面簡稱 XHR) - 也有 Cross Domain 的問題,

正常情況下, 我們對自己 Domain 的資料進行 XHR 的話, 並不會發生問題:

但是, 如果我們嘗試抓收其他 Domain 的資料呢? 抱歉, 瀏覽器不讓我們這樣做:

然而, AJAX 會常常碰到需要外連其他網站抓連資料的行為, (如抓取其他網站的RSS)
那麼可以怎麼辦?

對於 Client 端的 Scripting 最大的安全問題就是我們的私隱可能會暴露.
但是對於 Server 端的 Scripting, 只能抓取我們很少部份的資料(除非我們主動給他),
所以沒有對外抓取資料的限制.

因此, 我們可以透過 Server 端作我們與外部的媒介,
在自己的 Domain 下建立一個代理 (Proxy) 幫我們把外界的資料抓回來,
這樣子我們就可以在 Client 端使用了.

當然, Proxy 這個並不是唯一的解決方案, 只是他最為簡單而實際而已.

Dojo 這裡有一個使用 IFrame 來解決的方案, 有興趣可以去看一下:

http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book75 

參考資料整理:
http://en.wikipedia.org/wiki/Cross_site_scripting
http://twpug.net/modules/smartsection/item.php?itemid=34
http://developer.yahoo.com/javascript/howto-proxy.html#phpproxy
http://www.securityfocus.com/swsearch?sbm=%2F&metaname=alldoc&query=Cross-Domain

"

演算法 Lab3: SoDuKu Solver 3

"

資工三甲 岑志豪 493511632

雖然在 Lab2 時已順利把所有題目解出來, 但那時所用的方法不怎和 Backtracking 拉上關係. 因為我只能在剩下2個選擇的時候選擇其中之一. (二選一 Backtracking???) 也沒有用上遞迴.

這次就向這方面作改良, 作得比較有 Backtracking 的味道. ( 只能 二選一 的話... )

針對在使用消去法解決不到的情況下進行的"猜答案"算法進行修改,

改成先以剩餘數少(最少為2)的位置先下手, 如果沒有的話就再找次一個剩數少的位置去猜. (遞迴)

經過初步測試是沒問題的. (但不保證完全沒問題啊...)

餘下的是次要的修改: 把大量 public 的東西改為 private, 增加 測試的最大次數設定. (預設300次)

大概就是這樣吧 (笑)

P.S.: 效率好像下降了... 心理作用?

"

Web2.0 Lab4: Web API

"

資工三甲 岑志豪 493511632 

這次我用了分別 3個 地圖服務的 API ( UrMap, Google Maps, Yahoo Maps ) 及 1個 Youtube 的 API.

地圖服務的介面使用了 基於  Prototype framework 的 script.aculo.us, 其 Sortable 功能可以使 DIV 改變位置. ( 我的設定介面放在 DIV 裡 )

我所使用到的 3個地圖服務 功能基本上是一樣的:

截取 地圖中央位置, 修改 地圖中央位置.

截取 滑鼠所點擊(單點)的坐標位置, 把地圖中央位置改為之前所點擊的.

截取 和 修改 都是在 DIV 裡顯示及完成.

寫作過程中 UrMap 和 Google Maps 的設定非常相近,

所以代碼其實改一下就可以用到另一個地圖服務的了.

但 Yahoo Maps 和上面兩者相似度有點差距,

method 及 object 的使用和命名不太相同, 官網也找不到很詳盡的說明,

只好在網上翻其他資料.

 

而 Youtube 的 API 我是使用了 youtube.videos.get_details 部份,

得到一個 xml 的資料後再由 javascript 處理及顯示我們需要的數據.

(XML 處理技巧在 Lab3 時已經碰過, 所以這次比較容易上手了)

這次沒使用 webproxy 連結 XML, 所以只能在本機執行, 不然會有 Cross Domain 問題.

( 本機也只能使用 IE 瀏覽. )

相關 DEMO:

GMap: http://ifelse.freehostia.com/map/gmap.html

YMap: http://ifelse.freehostia.com/map/ymap.html

UrMap: http://ifelse.freehostia.com/map/urmap.html

Youtube: http://ifelse.freehostia.com/youtube/youtube.html

"

演算法 LAB2: SoDuKu Solver 2

"資工三甲 493511632 岑志豪
進度: 全破

主要情況就如我這裡所說的: 

http://anfa.weco.net/index.php?op=ViewArticle&articleId=2102&blogId=122

之前寫的 Hidden Pairs, Naked Triples, X-Wing 在實測時好像對題目(現有的)沒幫助,

就通通從 Source Code 裡移除掉了. (有備份)

也有可能是寫錯所以沒幫助也說不定 :P

在使用 nishio 時, 我需要設二個數值去決定他什麼時候去猜和什麼時候去檢查.

這個數值的大小會影響到效率.

暫時想不到現在的 code 到 lab3 時可以怎樣 backtracking... ||

大概晚點先把 code 再 module 化吧. 

"

Web2.0 Lab3: Rich Client Development

"資工三甲 岑志豪 493511632

AJAX:

RSS (XML) Reader

使用了 Prototype JavaScript framework + xml2json + PHP Web Proxy

先用 Prototype 作非同步傳輸, 在拿到資料後以 xml2json 把 XMLDOM 轉變成 JSON.

這樣做可以靈活而直觀地使用拿到的資料, 在 XMLDOM 下要把資料作運用比較麻煩.

而 JSON String 能夠迅速化成 JavaScript Object, 方便在 JavaScript 下使用.

再以 HTML 形式排版輸出.

P.S.: 由於安全問題, JS 不能直接 Cross Domain 連結 XML.

( 簡單解決方法是借助 Server Script, 暴力方法是借助 iframe ... )

演示: 這裡 

Widget:

音量控制器.

使用了 <preference> 作 文字 字型, 顏色, 大小 的設定.

使用了 system.mute 和 system.volume 來控制音量大小.

使用了 openURL 來打開預先設定好的連結. (在 <preference> 那設定.)

最初是打算加入 Yahoo! Taiwan Search 的, 但後來發現官方 API 還沒支援 Y!T, 因而沒有使用.

Flash:

XML 檔讀取器

基本上和上面的 RSS Reader 差不多, 只是時間有限, 只作了本機讀取檔案而已.

使用 OpenLaszlo Server, 以 XML 的形式寫 Flash, 好處是能動態的生成 swf 到客戶端, 但速度上由於要即時編譯的關係, 相對比較慢.

寫好了的 LZX 一定要在 OpenLaszlo Server 下執行.

"

演算法 Term Project - Proposal

"

我打算以 基因演算法(Genetic Algorithms) 作為這次報告的題目.

在大自然中的生物, 大多都是在「物競天擇、適者生存」的情況下存活至今不致滅亡.

壞的基因會被淘汰, 由好的基因取而代之.

好的基因自己也會有機會演變, 繼續競爭, 以留下最好的出來.

以大概上基因有著這樣子的性質.

選擇(selection), 複製(reproduction), 交配(crossover), 突變(mutation)

而基因演算法就是以上面的方法為基礎而建立的.

"

SoDuKu *ALL* Clear!!

"經過長期的苦戰, 目睹n次日出後, 終於初步把所有題目都解出來了 :P

在寫的過程中, 很多地方都碰釘, 也不知道主要問題出在哪裡, 直到把大部份解法寫出來後也沒有幫忙, 才開始明白到不是解的方法有多少的問題, 而是在解的過程中出現問題...

總括一下現在使用了的解法

唯一候選數法
Singles Candidature, sole Candidate

隱性唯一候選數法
Hidden Singles Candidature

數對刪減法
Naked Pairs

最後就是用猜的方法. ( 當 候選數 剩 2個時, 2選1  Try-And-Error ) 

只要把這些方法都作出來, 其實已經可以把老師所給的題目都解出來了.

待續.

"

頁面