2011年9月28日星期三

網頁設計筆記(十七) CSS3的擬元素

以特別的語法指向HTML元素裡沒有實際元素名稱的內容視為新元素,即擬元素pseudo-elements。

例如 :before, :after

擬元素會繼承母元素的特性,並視為行內層級元素 inline elements

新內容可用以下方法增加:

:before{content:"abcabcd";}





網頁設計筆記(十六) IE 9以前的HTML5

令IE9以前的IE支援HTML5
可在<head>加上
<!--[ if lt IE9]>
<script src="http://html5shiv.googlecde.com/svn/trunk/html5.js"></script>
<![endif]-->

2011年9月20日星期二

VirtualBox 畫面解析度之增加法

Host是一部Windows 7 64 bit
Guest是Cent OS 5.x

安裝後預設是800x600(己經是最大)
增大方法如下:

















  1. 點選裝置→安裝Guest Additions。
  2. 在Host下移動到/media/VBOXADDITIONS_X.X.X_XXXX/下
  3. 安裝一個Addition
    例如 sh VBoxLinuxAdditions.run
  4. 移動到/etc/X11/xorg.conf
    在差不多最尾的 Depth 24和End SubSection中,加入這句
    Modes "1280x1024" "1024x768" "800x600"
  5. 登出登入,修改解析度就會多了選項。

2011年9月16日星期五

譯文:可信的跨瀏覽器測試 第一部份 IE

原文
↓ 我的譯文 ↓


理論上,跨瀏覽器測試好簡單。下載一堆不同版本的瀏覽器,開啓要測試的網頁。但實際上,那有這麼簡單。不同版本的瀏覽器經常發生衝突,而坊間的測試工具往往不太準確。

是AOL的用戶介面開發者(對,這間公司還在世),在這篇文章我將帶領看倌眾建立一個可信,(可能)經數百萬用戶使用過的測試方案。這個方案也是各方好友也採用的方案(Opera, Mozilla, Google)。

事先聲明,為IE 進行跨版本測試要花費一番功夫,如果你的網頁沒有大量不同版本IE的用戶,你要考慮一下是否值得看下去。

Internet Explorer 6 到 10
首先處理老朋友── Internet Explorer (IE)。如我等所知,在同一個系統上安裝/執行不同版本的IE,彼此並不相容。老實說,我認為微軟開發IE 6, 7, 8時,壓根沒有考慮到開發者會拿?一堆不同版本的IE安裝在同一主機上。

這令網頁編程人員(Web Developer)極之為難,他們被迫使用try and error的方式去進行測試,測試這個世上最多人使用的瀏覽器。

在這部份,我將帶你一看一些你曾經聽過或甚至用過[的測試方法。我將會解釋為何這些方法不可信,與及我會提供AOL也在使用的解決方法。

順帶一提,我等基本上採用IE 7作為測試的基準,我們也會測試 穩定(Stable)、測試(Beta)和開發(Dev-channel) 版本的Chrome, Firefox, Opera, Safari 和 IE 8- IE 10。

我們用IE 7作為基準去測試。眾所周知IE 6, 7, 8是最普遍的瀏覽器。但是,我們已經在數月前停止了為IE 6進行測試。這是因為IE 6與其他主流瀏覽器有較大的相容性問題,而停止IE 6的支援將令開發計劃提速20%。

第三方測試工具
在Google 搜尋第三方IE測試工具,至少會有10多種選擇,其中九種是不可信的。我們將稍為講評一下它們。這些講評是有點嚴苛,但目的也是為確保這些方法能經得起時間的考慮,提昇重複使用的可能。

IE Tester
不幸地,IE Tester應是最多網頁設計師和網頁編程人員採用的第三方IE測試工具。當我首次嘗試使用它,我被它的承諾(一夫當關,搞掂所有IE)所吸引,然而,不經一番寒徹骨,焉得梅花撲鼻香,世上怎會有如此優秀而又免費的軟件。

當測試IE 6, 7, 8時,連同一個非 1:1顯示既瀏覽器,這個工具會出現一連串不一致。我們與及眾多團隊都確認不旦渲染錯誤、還會有執行失敗、Flash,CSS 過濾失效等問題...

總而言之,這個工具不可盡信,但可作後備之用。

Multiple IE
TredoSoft 公司的 Multiple IE是另一個高名次的搜尋結果。同樣不幸地,它本身有很多問題,例如渲染錯誤。一個常見的投訴是測試IE 6時竟跑出IE 5的錯誤,這亦是一眾測試人員不想見到的畫面。

Multiple IE是一個不定期更新的軟件,它沒有考慮到用戶們所承受的痛苦。

根據我有限的知識,以上兩個工具都是利用DLL重定向去避免DLL名字衝突,這樣就可運行多個版本的IE。我個人建議避免使用這些軟件,因為在同一個系統內為各個版本的IE建做一個完整沙箱是極之困難。

Expression Web SuperPreview
接著是微軟的 Expression Web SuperPreview,微軟聲稱它是一個簡潔的測試及除錯工具。

不幸地,你不能測試互動功能、JavaScript、DOM、動畫...當今的網頁都是包含各種動態功能,而這工具只可進行一些極基本的測試,不適合要求準確的跨瀏覽器測試。

BrowserLabs, Browsershots, BrowserCam
測試一些靜態版面設計時,我個人會使用 Adobe公司的 BrowserLabs 或  Browsershots,但它們都不支援進行任何互動(包括點擊),BrowserCam亦是如此。這類服務明顯不是針對功能上的跨瀏覽器測試,雖然我們仍可見到一大票人在使用它。

我不是在說服你不要使用它們,只是它們不足夠完成一個完整的跨瀏覽器測試。網頁設計師和網頁編程員需要知道用戶使用不同的瀏覽器時到底有什麼效果,一堆靜態的頁面測試是沒有什麼作用的。

Windows Virtual PC
另一個方法是使用微軟的Virtual PC (加上IE6到IE8備份映像檔)

某段時期來說,這是最佳的解決方案。不幸地,過去幾年我少有進行這個方案。這些影像檔需要12GB的硬碟空間,而且這些影像檔常常過期。

一個跨瀏覽器測試需要有合理的系統作為測試環境,而 Virtual PC無法達成各種要求且要經常進行手動更新,所以我不推薦它。

Browser And Document Modes
我們看過很多第三方的工具,微軟自家提供的解決方案又如何?

由IE 9開始,IE就支援開發者工具(按F12),透過選擇不同的版本,IE會進行模擬。

"文件模式"決定了頁面能接達的功能,調控頁面的doc type和meta tag。舉個例,標準文件模式容許網頁按受IE執行ECMAScript 5(ES5),而IE7和IE8的文件模式則提供另類選擇。

"瀏覽器模式"決定用什麼版本的瀏覽器進行測試,這是個簡單而直接的功能。

值得注意的是IE 9包含了新的JavaScript引擎,叫作 Chakra。而透過"瀏覽器模式"使用的IE67,8 也使用這個的引擎的話,會和實際獨立的IE6、7、8有差異。

另外"文件模式"和"瀏覽器模式"有一些怪異的地方:我們的團隊運行一個情境,IE 會回應錯誤的 user-agent 到伺服器,而這不只發生一次。

最後,這些"模式"有一些獨立版本IE 6、7、8本身不會出現的問題,這令到測試的準確性更受影響。

綜合以上原因,我促請開發人員不要依賴這個內建工具。

準繩的IE測試方案
選擇一:虛擬機器 + IE Collection

我們先前已檢查過一堆不太準確的方案,那應如何是好?答案是使用虛擬機器(VM)加上 IECollection。

IECollection提供以下功能:
  • 由IE1到IE9的獨立版本
  • 因為是獨立版本IE,所以能準確渲染(演示各種的實際情況)
  • 因為是獨立版本IE,所以 JavaScript引擎也是獨立的。
  • 因為是獨立版本IE,所以能準確回應 User-Agent
  • 支援32-bit和64bit的Windows XP、2003、Vista、7
  • 能開啓各個版本的IE 開發者工具列,當然,如果你想,你也可以安裝Firebug Lite。

雖然它支援各主流版本的IE,但對Vista和win 7底下的IE 7卻有些問題,我將會稍後講解,現在先處理虛擬機器。

簡單來說虛擬機器是在一個操作系統(主)內運行一個操作系統(客)。基本上虛擬機器可以安裝、執行任何的操作系統。舉個例,你可以在Mac OS X安裝Windows 7,也可以在Windows上裝一個Ubuntu。

要使用虛擬機器,你需要兩樣東西:一個虛擬軟件,一個操作系統(客)的映像檔。你的公司應該能夠透過 MSDN Academic Alliance給你一些正確的Windows使用權包括XP SP3、Vista、7 。

其實你應該建立一定數目的系統(主)去進行測試 Windows和 IE,但如果你沒有這樣的資源而迫於使用IE Collection,我會建議你作以下的設定。
  • Windows 7安裝 IE 6、8、9、10
  • Windows XP(SP3)安裝 IE 7
你不需要考慮任何早過 IE 6的瀏覽器,話需如此,XP(SP3)還是容得下 IE 4到 IE 5.5。

在AOL公司,我們會使用 VirtualBox、 Parallels和 VMware來作虛擬機器。我個人喜歡Sun公司的VirtualBox,原因如下:
  • 免費。Parallels和VMware都要收費。
  • 以我的經驗,VirtualBox運行起來比其餘兩款更優秀。
  • 更優的用戶介面
其實,VMware是更適合獨立的伺服器,世界末日起上來,三個軟件都是一樣的。當然Parallels和VMware有提供試用版,好讓你選擇哪個較適合你的需要。

專業提示:記住將虛擬機器的記憶體盡可能調低,除非你正在用一個專業測試。我們要假設你家中的舊電腦也能順暢地運行這個測試的結果。

以下是設定的三個步驟:


  1. 如果你是 Mac用戶(主),我建議你使用 32-bit的Windows 7 Pro或 Ultimate(客) 的映像檔(或安裝光碟),保留最少17GB的空間、512MB記憶體給虛擬機器用。安裝後將螢幕大小設定為1024*768。Windows用戶(主)有兩個選擇。如果你正在用 Windows 7,你可以跳過步驟二;如果你是其它版本的 Windows,也請你像上述 Mac用戶般安裝一個 Windows 7。
  2. 接著,下載 IE Collection並安裝到你的 Windows 7(主/客)中,請選擇安裝 IE 6、8、9。我通常也會安裝 另外安裝IE 10,切記現階段微軟只提供測試版本,你只需安裝核心的部份,其它東西,可免則免,以免影響虛擬機器的啓動時間。
  3. 因應 Windows 7無法安裝 IE 7,你需要創做另一個虛擬機器,並安裝 Windows XP SP3。Windows XP SP3應能順利安裝和運行 IE 7(IE Collection 或原裝 IE 7)。
有些人認為 IE 6、IE 7應安裝在 XP,而不是 Windows 7,因為 XP用大多未更新瀏覽器到 IE 8、IE 9。這也是對的,設定視個別情況而可作更改。



選擇二:每個版本IE也設一個虛擬機器
務實的開發人員可能希望 IE之間不會有影響,以確保測試準確。如果用"每個版本IE也設一個虛擬機器"這方法,最好採用原裝 IE 而不是IE Collection內的版本。這背後的理由是它可能減少個別瀏覽器的設置被覆蓋或互相干擾的風險,並確保你用到的是確切版本的IE。


如果你用這方法,可參考以下配置:

  • Windows XP (SP3) + IE 6
  • Windows Vista (SP2) + IE 7
  • Windows Vista (SP2) + IE 8
  • Windows 7 + IE 9 + IE 10

你或許會疑慮我知道這設置,為何不在公司實行?我只能為我的團隊答你在同一個系統內運行三、四個虛擬機器十分難管理。


一個虛擬機器佔去512MB記憶體,四個就用了2GB,而這只為了測試。如果你的主機沒有8GB的記憶體,很難運行得順暢。


有需要時,我也會同時運行兩個虛擬機器。大限到時,選擇一和選擇二也可以取信。

選擇三:遠端桌面連線(VNC)或遠端桌面協定(RDP) + 獨立測試機器
少數公司(如 ZURB)會採用遠端登入,准許網頁設計師和開發者進入獨立測試機器進行跨瀏覽器測試。這個方法的好處是減低對用戶記憶體的需求。這個方案可透過 VNC或RDP 進行。

遠端桌面連線 Virtual network computing (VNC) 是一台獨立的電腦遙控另一台電腦。鍵盤、滑鼠的訊號都會透過網絡傳到另一台電腦。同樣地,遠端桌面協定 RDP也可以做到,不過它是微軟的產物。如果你使用 Mac OS X,VNC是內建的,你也可以使用其它 VNC工具 如RealVNC


如果你要用RDP,Mac用戶可以用 Apple自家的 Remote DesktopRemote Desktop Connection

VNC和 RDP的分別在於 VNC容許會議分享,能進行多月戶的展示,RDP則不能;RDP則有較強的操控,字型、圖形,VNC在這方面則較弱。


你也許會好奇為何AOL公司不使用 VNC/ RDP等方式,這是因為我們擔心這個過程會中會有封包在網絡中丟失, 尤其一些高互動性的網絡應用程式,而canvas、SVG等方式的媒體也不適合這測試。但千萬別一概而論,據我所知有一些公司也採用這方法而沒有錯誤產生,所以遠端桌面連線測試也許適合你。


對了,如果你的團隊沒有能力購買或租一台測試用的電腦,世上是有一些公司提供這類服務的,它們提供所有版本的 Windows、 IE 和其它瀏覽器。 CrossBrowserTesting.com就是當中的翹楚。


總結
我希望這份指引能派上用場。
第二部份將為其它當代的瀏覽器進行跨瀏覽器測試,再見!



第一次譯這麼長的東西...(@.@)

2011年9月5日星期一

IE無法正常顯示 jpg jpeg

IE 真的特別麻煩...

看到叉圖,應該是圖片存檔時,圖片格式是CYMB。

IE只支援 RGB...人家Firefox, Chrome, Opera 都支援...
IE就是不會進步...誰叫IE是大宗