Web Browser 的大戰 真的慢慢的展開了~
閱讀全文...
Web Browser 的大戰 真的慢慢的展開了~
雖說 Chrome 以 process per tab 的方式,將不同的tab isolate至不同的process
Google 推出了新版工具列的Beta版本,包含:
Google Tool Bar 5 for FireFox 的 Beta版本 &
Google Tool Bar 6 for IE 的 Beta版本
但是還是一樣沒有提供for chrome的版本
用chrome對我個人來講最大的困擾是~ 少了google tool bar 真的讓我使用上較不方便
像是,bookmark就無法像裝了google tool bar一樣容易存取/跨電腦分享
不過 目前這版chrome大概只是為了驗證新的 process per tab 的概念跟rendering&javascript enginge的速度吧...
BTW, 新版的 Google Tool Bar 有些新功能
1. 可以把 google gadgets加到tool bar的按鈕列~ 用起來 有些噁心~ 個人覺的呈現介面太小了 看不慣,不過 把一些小工具做成按鈕 隨時可以叫出來 又不用回到更噁心的iGoogle就能用~ 個人覺的還不賴~ 也很符合google想把browser/Web當作OS的企圖
2. 把chrome那一套搬過來: 新增tab時 會把常上的網站、最近關閉的分頁(tab)、最近新增的書籤 都呈現在新分頁的預設畫面中 --> 個人覺的這功能 還算ok用
3. tool bar 的設定,可以跨電腦 share 囉~ 就好像shared bookmark 一樣
4. Quick Search Box(QSB)功能: 要裝 for IE 的 toolbar 才有
在windows的工具上 出現了Google的按鈕,按個 Ctrl+Space就可以開始進行搜尋
(因為Ctrl+Space被佔用掉了 所以 我是用Alt+Space) 搜尋的東西除了網頁,還包含
本機電腦的應用程式~ 當然 免不了的 也會有搜尋的提示 以及 針對搜尋的結果可執行程式 or 打開網頁的功能。印象中 MAC OS X 的Finder 也有類似的功能,這功能 真的很優~ 透過google toolbar 完全把微軟OS變棒了 :) 哈哈...
Google 的產品品質 一向是讓人非常滿意~
不過 最近 好像頻頻出錯~
包含
2009/1/31 因為惡意網站的設定問題(malware filter, http://stopbadware.org/),讓google search出來的網站 都被標示上「惡意網站的標籤)
2009/2/24 Gmail outage, 聽說是設備當機?! 約二個半小時恢復正常
2009/2/27 上午使用Blogger時,發現 主頁資訊出不來,firebug show 出一些 javascript error
應該也是 google 出了什麼問題才對
其實,資訊系統出錯 在所難免 所以 我也不會像網友嘰嘲Gmail為 GFail.. 哈
反而覺的 google 還是有點人性的 :)
以後 系統出包,我們就可以把google的例子拿出來講 看可不可以擋掉一些炮火攻擊 哈哈..
Same Origin Policy(SOP) 是一般 browser 針對 client-side script(如java script) 在安全性上面的一項處理原則
由於 client-side script 是在使用者的作業環境中進行,而在使用者的環境當中,常有一些穩私性的資料(如 cookie, 瀏覽行為...等),為避免這些 client-side script 去存取client端穩私資訊後 送交給無法限定範圍的遠端伺服器,所以 有了 SOP 這個原則
簡單講,就是client-side script不能存取所在網頁之外的資源
例如: 使用者目前瀏覽網頁為 http://example.com 上面有運行一些 javascript
依 SOP 的原則,browser 只會容許 javascript 存取 http://exmaple.com/* 下的資源
其它domain(e.g., http://malware.com), subdoamin(e.g., http://sex.example.com), domain 同port不同的(e.g., https://example.com),browser都不允許 client-side script來存取
當然~ 目前 Web 2.0, AJAX, Mashup 大量運用到 client-side script的技術,所以 SOP 也變成這些新設計方法的一大限制
不過~ 上有政策 下有對策~ 還是有一些方法可以繞過這個限制,即 work-around solution
目前我知道的方法如下:
1. 透過proxy的方式處理
即在網頁所在的Web server 建立一 proxy功能,所有要繞過SOP檢查的client-side script存取 都透過這個proxy去拿或處理~ 這種做法的先決條件是,開發人員要有辦法在該 Web server 上面開發並佈署上這個proxy的功能
2. 透過 HTTP 內 document.domain 的設定 解決跨sub-domain的限制
透過 設定 HTTP DOM裡面的 document.domain 值
只要 script 所在網頁的 document.domain值 與 資源所在網頁的 document.domain值一樣
Browser即會允許存取
注意: 這只能用來解決 跨 sub-domain (e.g., AAA.example.com 及 BBB.example.com)
而不能跳離跨domain的限制
3. JASONP (JASON with Padding)
基本原理有3個
1. html 裡頭的 script src (即 script 的來源)並不限定只能在 local domain
2. 利用 javascript 可以操作 HTML DOM 的特性讓 javascript 動態的引用外部script
即,增加一 script type=text/javascript src=[...url + parameter + call back function] 的 tag
3. 透過 client-side script與不同domain的service的配合(有點暗通款取的味道)
讓 另一domain有動態吐出script 並配合在script內加入 client-side定義好的
call back function 的能力
所以,只要遠端的server支援JASONP,那麼就可以透過動態插入 script tag及script src,
來取得遠端的 script 資料(裡面可能含有動能改變的data 及client端的call back function),script-client端 在動態取得這些所謂遠端的script資料後 即會在client端運行
這些script,透過callback function的機制 會再與原先設計用來handle JSONP的client端
script 碼有一關連性~ 最後 達到目的 繞過SOP的限制
下面應該是最早提出JSONP的的文章: Remote JSON - JSONP,我認為比較難懂
下面這篇文章,我認為較淺顯易懂: 利用 jsonp 进行 Javascript 的跨域数据访问
--
其它參考: wikipedia: SOP
Google 去年四月推出的 Application Engine 服務
提供免費的運算資源供開發者佈署開發完成的程式供Web User使用
限額是每月不超過 500萬個 page view
今天在 app engine 的blog看到,GAE公佈了收費模式
文中提到~ 雖然目前提供限額的免費資源
不過 使用者的使用狀況可能太好了 使得 目前資源有不夠的狀況
未來,雖仍會提供500萬個page view的免費quota, 不過資源會在90天內做適度的調整
(一定是調小的啊...)
若要取得額外的Quota, 則需另外付費
下列是我目前用的免費帳號的 resource 分配狀況
依照google 的計價方式的話,1個app google 每天免費送你 7.035塊美金耶 :Q
聽起來還滿爽的唷 :) 呵呵...
依這樣的 Service Level, 一年大概二千六百塊美金, 折算台幣約九萬塊~
不用maintain 底層的infrastructure, 機房, 電力, 備援, ... 等有的沒的... 我想 這種價格應該算值得吧 :)
Resource | Budget | Unit Cost | Paid Quota | Free Quota | Total Daily Quota |
---|---|---|---|---|---|
CPU Time | n/a | $0.10/CPU hour | n/a | 46.30 | 46.30 CPU hours |
Bandwidth Out | n/a | $0.12/GByte | n/a | 10.00 | 10.00 GBytes |
Bandwidth In | n/a | $0.10/GByte | n/a | 10.00 | 10.00 GBytes |
Stored Data | n/a | $0.005/GByte-day | n/a | 1.00 | 1.00 GBytes |
Recipients Emailed | n/a | $0.0001/Email | n/a | 2,000.00 | 2,000.00 Emails |
Max Daily Budget: | n/a |
Google 也出漫畫了哦: Google Chrome Comic
Google委託了Scott McCloud這個畫家,透過與20多位google engineers的interview
用漫畫的方式,呈現出 chrome發展的背景以及重要的設計
若即早報名今年的Google I/O活動,主辦單位會送你一本hard copy 哦 :)
以下是我從這本漫畫看到的一些重點:
* 因Web application日漸普及,Browser也變成一執行application的重要平台,有重新發展以因應需求的需要
* 有別已往整個browser在OS看來是single process的設計
chrome 是採 multi-process 的架構,即一個 browser tab 為一單一的process
整個browser不會因為單一tab crash掉,而整個browser都垮掉
* 採用 WEBKIT opensource rendering engine (與 Safari相同)
提升頁面處理效率
* garbage collection 更有效率
過往single-process model, 在關閉單一Tab時仍可能有部分resource沒被釋放掉,
由於 memory fragementation的關係,在另開新tab時 因為剩餘的address space不夠
仍需再allocate新的address space供該process使用,久而久之就算把tab關掉 也無法解決
browser佔用大量resource導致系統變慢的可能
筆者不論在 IE/Firefox 都真的有這樣的經驗,最終 只能把整個 browser關掉、重啟來解決
Chrome 的 multi-process的model 每個 tab 都是獨立 process 在關閉tab時 resource是完全釋放的
* 每個Chrome Tab 所花用的 cpu/memory 都可透過其 chrome task manager來檢視其資源使用狀況,更容易找出來執行效果不佳的web site為何
* 透過大量的設備及page rank資料,進行涵蓋面廣且抓到重點web site的自動測試
以確保chrome的品質
* 採 V8 javascript virtual machine 提升 java script 處理效率
V8為 位於丹麥的google 團隊發展,並有 opensource 供它人使用
* V8對javascript 的處理,採用 dynamic code generation的技術,將java script compile為
machine code執行,更快、更有效率
(有別一般 interpret式的 java script engine, 每次要執行 javascript時 都要重新interpret一次)
另,有別過往javascript virtual machine 對 garbage collection 採的 conservative garbage collection機制,因java script都被v8 轉成machine code了,故可對memory使用有精確的常握,
故可採用 precise & incremental 式的garbage collection, 讓記憶體的回收更有效
* OMNIBox 做為 URL 的輸入列,但又不同於過往的URL Bar
除提供url auto-completion功能外,亦會依user的瀏覽歷史 做出類似搜尋+字詞提示的功能
假設,今日我瀏覽過一個汽車網站,我也許只要在 OMNIBox內打上 C.. 就會出現該網站的URL..
* NEW Tab的處理
不同於browser的home or 空白頁設定
Ghrome依 user 在 OMNIBox的輸入及瀏覽歷史,在 new tab 內會呈現出
最常光顧的站台 & 搜尋供user直接點選
* 提供privacy mode(無痕模式)
即,提供一個readonly 的瀏覽環境,google 會在該chrome tab(process)關閉後清除所有資料
(包含 cookie, brows history....)
* 針對 malware / phishing site 的處理
- SANDBOX設計 讓browser被攻陷的機會降低
- 持續自動更新惡意網列表
* Google Gears (Opensource)
為一Browser extention的API,可擴充 browser能力(含 chrome)
以提供更進階的 web application所需
當然,google 也想讓這個東西 變成一個標準
那麼,未來的 web app 與傳統跑在os上的app 的距離會日漸縮小
* Google Lives on the Internet --- google 也希望透過 OpenSource 的無私精神
釋出上述多項技術的opensource 供研究發展 讓 Web 的應用能快速進步
--
以上~ 儘量寫囉 應該也是有不少寫錯的東西啦 :Q
Google 的街景圖示做的真的太細太屌了啦 :)
這是 Google Map從幾年前開始的計劃
早先的 Google Map 先是有衛星圖、接著 加入國界、地區街道標示、地圖後...
更恐怖的這個街景圖是 google 用車子 沿街拍出來的
最早只有美國部分地區有 現在美國應該已經做全了
日本也有很多地方的街景都拍好了 也在google map 上可以看到
台灣則是預計今年會開放這項服務 (這禮拜一 剛好在看到google street view的工程車在信義路上拍 我還故意在他後頭停留了一下... :) )
anyway, 既然日本拍好了 我也去日本玩過 就去找了一下當時的照片...
我只能說 google 太強了... 看看下面的對照你就知...
1. 小樽運河旁-Google 版
google map link
MinChuan比對版:
2. 小樽運河旁-Google 版
這裡是小樽運河,三點鐘方向那間小木屋是 小樽觀光案內所
MinChuan比對版:
一群高中女生班遊吧~ 在小樽運河旁 被我偷拍 :Q
3. 小樽郵局-Google 版
MinChuan比對版:
4. 六花亭 北果樓 -Google 版
google map link
MinChuan比對版:
這兩家賣的菓子很有名哦~ 我也有買說 ;)
------------------------------------------------------------------------------------------------
Google Car 長這樣 (引用自 http://www.ithome.com.tw/itadm/article.php?c=52744)
Google Gadgets API 目前提供兩個版本
新的版本使用 gatgets.* 這個 namespace,主要看起來 是加入了 OpenSocail 的功能
舊的版本使用 _IG_ 這個namespace
下列是一些開發的小要點:
A. Gadgets 組成
Gadgets的開發之所以很簡單,是因為 Gadgets只需用一XML文件來描述所謂的Gadgets Spec.
即可完成 Gadgets的開發,在Gadgets Spec.中 除了透過XML 宣告一些屬性供Gadgets Container參照以決定Gadgets的重要特性外(如,這個Gadgets的一些user偏好屬性、tabs的支援、標題作者資訊...等等),再來就幾乎是 html + javascript(AJAX) + css 的開發了
下列是一個Gadgets Spec XML 的長像...
* Content type = html 時
- 將 html/javascript/css/...等直接寫在 gadget spec. 內 (該XML檔案)
- 只能包含 body 內的東西 不含 head/title...等外層element
- google 建議使用這種,此種做法 gadget 除在 iGoogle可用外,其它support gadget的container亦可使用(如, Google map, Orkut, YouTube, ...)
-
* Content type = url 時
- gadget 的血肉,是透過 url 去參照另一個網路上的html文件
- 只能在 iGoogle中使用
C. 使用者偏好設定- 透過
E. 測試 & 除錯
只要在 gadget spec 內定義好,屆時佈署於gadgets container時,gadgets container即會render出
這些偏好選項供user設定,並可被 gadgets的主體程式所參照引用。
- user preference可設成share,即 可透過這個特定 在不同user中 share資訊
- 由gadgets container來管理/儲存 針對各別gadgets user的 UserPref設定,開發者無需介入處理
D. 佈署及安裝
- 佈署: 將撰寫好的 gadgets spec (一個XML檔案) upload到internet上的任何一處即可
- 安裝: 使用者在Web Container上,新增一gadgets並給定該gadgets spec的 URL即可完成
- 因為deploy只是一個upload xml 的動作,所以我是隨便找一個web container(即, blogspot)來測試開發出來的gadgets
- 可利用firebug之類的browser addon 來進行 gadgets的除錯 (通常是 javascript 的問題)
F. 範例
寫了一個簡單的 Feed Reader gadgets,可透過 UserPref來設定抓取的 feed lists URL
並將Feed內項目的 title, link, summary 資訊show出
Gadgets Spec(source code)置於: http://minchuan.wang.googlepages.com/MinChuan_RSS.xml
Reference:
專案內的同仁,有使用 VS 2005 or VS 2008 進行 ASP .NET的 Web 開發作業
其中,亦有引用到 Microsoft 提供到的 ASP.NET AJAX Framework 功能
在實際上線的過程中,卻發現 該 AJAX Library異常的肥大(與 jQuery, Prototype, YUI ...等相比)
可能會影響到 client 端針對該 js file之 download time
所以,針對此議題 內部做了一些survey,就 .Net 提供的 javascript file之size縮減方案分別可就 java script file本身size縮減及http transport layer之壓縮技術說明如下:
1. ASP.NET AJAX Framework Java Script file size 縮減
參考 MSDN 文件說明: http://msdn.microsoft.com/en-us/library/bb344940.aspx
可知,透過 Web.config 內的 ScriptMode 及 Compilation Debug 兩個設定值,決定提供予client端下載的script版本
- debug 的版本 可能debug的資訊比較完整,且 js 檔案不會將空白、換行移除 (未壓縮前的size大)
- release的版本比較精簡 但,所提供的 function 應該都是一樣的 (未壓縮前的size小)
參考資訊:
ScriptManager Class: http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx
ScriptMode Enumeration: http://msdn.microsoft.com/en-us/library/bb344940.aspx
2. HTTP Compression
透過HTTP Compression的技術,在傳輸層進行壓縮,以達到傳輸資料量縮減的目的
前提是,client端的browser要支援gzip or dflate的解壓縮功能(此部分,.Net 係透過client端送出的http request header內容來判斷對http compressoin壓縮的支援度)
此部分,看來 MS知道自已的 JS Library真的太肥了,所以預設值即是啟用壓縮
若要將壓縮功能關閉或是想要知道更細部的資訊,可參照下列資訊
ScriptResourceHandler Class: http://msdn.microsoft.com/en-us/library/system.web.handlers.scriptresourcehandler.aspx
ScriptingScriptResourceHandlerSection.EnableCompression Property: http://msdn.microsoft.com/en-us/library/system.web.configuration.scriptingscriptresourcehandlersection.enablecompression.aspx
翻譯筆記 - TransNote (http://www.transnote.org/) 是 ITRI(工研院)的一項 project
這個小工具的功能,不像其它網站/工具提供的「全文翻譯服務」,也不項某些 翻譯軟體或browser plug-in提供的「User滑鼠指標指到的文字 進行即時的翻譯」功能
而是提供所謂「翻譯筆記」的功能
所謂的翻譯筆記,使用起來會很像大家在讀原文書時,若有些單字看不懂,會在查完字典後將所查的中文解釋註記在書本上
個人覺的這個功能感覺很不賴,雖然本人非該工具的重度使用者,但是還是分享予讀者
有可能對原文文章的閱讀有一定的幫助,當然不能完全拿來做為學習英文的方法,畢竟一個單字的用法是很多種的...
TransNote 目前使用方法如下:
1. Copy 一段原文文章至 Transnote 網站
2. 點選「開始閱讀」
3. 在欲翻譯的文字上 double-click,則該英文生詞即會注記在文字下方,再double-click一次,即會取消該註記
以下是我拿「歐巴馬就職演說」的英文原文做為範例,所示範的效果:
翻譯筆記做完後,可在線上存檔或儲存到電腦內(目前儘提供 html 格式),算是小貼心的設計。
目前翻譯筆記的功能應該只是在試驗階段,所以原文的內容需由 user copy & paste 上去,並無法引用特定Url的內容,當然 也未保留文章內容原本的html格式。
因為Office為常用的辦公室軟體工具
懶得做重複事情的我 當然會想看看 到底有沒有辦法在 Office 的應用裡面 加上我自已的功能
用來處理一些很Routine、重複操作的事情 ?
其實 以前已經有使用 VBA 來客製化 Excel, Word 的功能
不過,必竟 VBA 的 DEBUG 相當的麻煩,且開發環境較不便利、語言也較不熟悉
所以,找到了另一個方法
透過 VSTO(Visual Studio Tool For Office Development)這工具
即可透過 VS 2005 用自已喜歡的語言 來開發 Office Addin
*** 開發的過程中,只要新增一個 Office Addin 的專案,再依 office object model (寫的很差的一堆文件)來開發即可
*** 安裝的過程,會比較麻煩,先簡單列出我遇到的問題
1. 開發時 用Debug mode執行的話,addin 可順利裝至 outlook
2. 開發完時,用 install 的 .msi 檔案 install 完後啟動outlook,發現 addin 無法順利載入,但又無對應的 Error Message 用來除錯,經過我在網路上尋找一些答案後,就我遇到的問題,分別說明解法如下:
a. DEBUG方法: 在 deploy 到 outlook 測試時,若 addin 有問題 or 無法載入,其實 根本看不到啥錯誤訊息,此時 可在系統環境變數加上,相關的訊息就會 show出、Log起來,這個功能 實在非常有用哦 :)
SET VSTO_LOGALERTS = 1
SET VSTO_SUPPRESSDISPLAYALERTS = 0
b. Client 要安裝 Microsoft Visual Studio 2005 Tools for Office Runtime
否則,outlook 沒有辦法存取要 load addin 用的 proxy 檔案
C:\Program Files\Common Files\Microsoft Shared\VSTO\8.0\AddinLoader.dll
Download Url: http://www.microsoft.com/downloads/details.aspx?familyid=F5539A90-DC41-4792-8EF8-F4DE62FF1E81&displaylang=en
c. Client 端的Office要安裝 .Net 程式設計支援 (安裝 office 時 預設沒裝)
否則,會遇到 遇到下列問題: Could not load file or assembly 'Microsoft.Office.Interop.Outlook, Version=11.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c' or one of its dependencies. 系統找不到指定的檔案。
d. Client 要grant(允許) 該 addin 的執行,以我為例 我是到 .Net Framework 2.0 的目錄下,下這樣的 command
---> cd C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727>
---> caspol -u -ag All_Code -url C:\Program Files\USR\MinChuan_OutlookAddinSetup\* FullTrust -n "MinChuan_OutlookAddin" -d "This is MinChuan_OutlookAddin"
否則 會遇到下列問題:
Could not load file or assembly 'MinChuan_OutlookAddin, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=null' or one of its dependencies. Failed to grant permission to execute. (Exception from
HRESULT: 0x80131418)
e. Client 要安裝 .Net Framework 2.0
*** 參考資料 ***