Ming Apps

Archive for the ‘Browser’ Category

Reference Link: goo.gl/Nfe03

筆者其中一項最煩惱的地方,

莫過於測試介面兼容問題,

經常需要同時間開啟多個瀏覽器測試,

但無奈同一個OS很難測試瀏覽器每一個Version,

那怎麼辦?

Tool Number of browser versions supported IE? Interactive testing? Side-by-side testing? Pricing
Adobe BrowserLab 13 IE6+ No Yes Free
Browsershots 60+ IE6+ No No Free
SuperPreview Varies IE6+ Yes Yes Free
Lunascape 3 IE6+ Yes Yes Free
IETester 6 versions of IE IE5.5+ Yes Yes Free
IE NetRenderer 5 versions of IE IE5.5+ No No Free
Spoon 16+ no IE Yes No Free
Sauce Labs 40+ IE6+ Yes No Free — $499 per month
Browsera 9 IE6+ No Yes Free – $99/month
Browserling 9 IE5.5+ No No Free – $20/month

筆者就為大家介紹一下我曾用過的Adobe BrowserLab 及 BrowserShots吧。

Adobe BrowserLab

Adobe BrowserLab需要成為Adobe的會員才可使用,

當然申請成為新會員是免費的。

齊集多個瀏覽器測試,

包括Firefox3+, IE6+, Chrome and Safari.

adobe browserlab test 2 browsers at the same time

可以並排測試[Chrome 13.0 vs Firefox 5.0]

測試IE6明顯地出現很討厭的Double Margin/Double Padding問題。

BrowserShots

BrowserShots是另一個免費的測試工具,

同一時間抓取多個瀏覽器的測試圖片,

可供測試的瀏覽器比Adobe BrowserLab 更多。

Linux, Windows, BSD的OS都可供測試!

無奈等待時間很長。

以上的測試方式大多以抓圖的方式測試兼容問題,

所以都缺乏一些互動設計的測試,

例如圖片菜單Hover的測試,

Canvas javascript 兼容測試等。

其他的免費軟件,

筆者並沒有測試過,

等待大家發掘吧!

HTML5 canvas提供了一個很好的機會,

讓大家可以在canvas上畫畫(如筆者在右手邊展示的Chinese Calligraphy 毛筆字 )。

但在iPad/iPhone/Android等智能手機上,

在熒幕上用手指點移的時候,

通常只會向上向下移動整個頁面,

結果在mobile畫不了畫。

那怎辦呢?

就是加入以下的source code,

便可以停止手機瀏覽器本身的移動(Elastic scolling),

並進行你想要的動作。

// prevent elastic scrolling
document.body.addEventListener('touchmove',function(event){
event.preventDefault();
},false); // end body:touchmove

http://www.bbc.co.uk/zhongwen/trad/science/2011/08/110803_life_browser_hoax.shtml

假新聞:IE瀏覽器用戶智商低

大家還記得「IE瀏覽器用戶智商低」的新聞嗎?

這個新聞在外國廣泛流傳,

不少新聞機構都報導了。

可笑的是,

這篇新聞終被發現造假!

但無可厚非的是,

IE 6對網頁開發來說,

實在有太多的痛苦了~

Firefox Beta

Link: http://blog.mozilla.com/futurereleases/2011/05/20/firefoxbeta/

上星期收到了Firefox Add-ons Email:

Good news! Our automated tests did not detect any compatibility issues with your add-on Anti-Force Like for Firefox By Ming Apps and Firefox 5. We’ve updated your add-on’s compatibility to work with Firefox 5.* so that our beta users can begin using your add-on. Firefox 5 beta was released earlier today.

才驚覺,

Firefox5已經推出了!

大家可到以下網頁知道Firefox 5 更新作參考:

https://developer.mozilla.org/en/Firefox_5_for_developers

看來Canvas 那裏作了大更新,

增多了不少Javascript function support for html5 canvas.

User interface上亦有改動,

大家可到:

http://areweprettyyet.com/5/

看一看每個位置的改動~

筆者頗喜歡Search Bar的Design~

ming-apps-anti-force-like-logo

等了良久,Anti-force Like 終於通過首輪測試了!

今天收到Email的一刻,

考試要記的都忘記了哈~

Chrome的要求看來真的沒Firefox那麼嚴謹~

原文內容:

Your add-on, Anti-Force Like for Firefox By Ming Apps, 0.1.4.2, has been preliminarily reviewed by an editor and is now available for download in our gallery at https://addons.mozilla.org/en-US/firefox/addon/anti-force-like-for-firefox/

Your add-on will now appear in search results and categories with some limitations. After 10 days you may request full review to remove these limitations and enable additional features.

layout design tools - balsamiq

網址:http://goo.gl/6pDkM

最近無暇更新Blog~!

因為筆者在忙Mobile Comp的Project: M-cinema Apps哈哈~

話說要將Layout Design畫在Report中,

但用小畫家畫上iPhone Apps的設計很煩惱吧~

上年實習的時候正好找來了一個很有趣的Tools用來畫Layout Design!

找來的正是balsamiq.com所設計用來設計的設計工具:P

入面可以Drag and Drop一個iPhone的介面,

再拖拉一些元件到Canvas中便成~

其實不只是iPhone的,

裏面亦有不少Browser常用的Design Pattern噢,

隨意的拖拉便可以畫上你的網頁設計或是Apps設計,

Menu中選擇Export as PNG,

快捷輕鬆~!

上面的Screenshot是筆者的同學設計的介面,

看來能有好成績吧?

重要發現:

我剛看到了某些網站已經將force like轉成了force reply.

從技術層面來說是沒有對應的方法,(你可看成是我的技術有限哈~)

因為Facebook reply需要拿到你的permission(權限)才能於那些網站reply.

reply完當然可以看到facebook了,

但相對的你的個人資料會被拿走了。

如真的想看隱藏內容,哈,GOOGLE IT!

Notice Added in Chrome page:

This plugin doesn’t support “force reply".

Force reply requires your permission and then post on your wall in Facebook.

I already found that some websites changes their force like to force reply.

The only thing you can do without reply is: GOOGLE IT!~ :P


%d 位部落客按了讚: