2012年10月7日星期日


iOS6對網頁設計界最重要的一項更新 Safari圖片及影象上載

iOS系統一直以來都有一個封閉的功能困擾著網頁設計界,特別是對筆者這類網頁程式開發者來說,實在對Apple封殺Safari Mobile的上載功能。Apple最初的考量相信是出於推廣app的考慮,不能直接在iPhone拍照上傳曾經是一個逼大家去學寫app的原因,但事移勢易,app市場已經大得不怕沒人開發,Apple也終於在iOS6解開此功能了。

iOS 6

雖然功能是被解封了,但暫時來說,有關的文件還是十分難找,筆者明查暗訪下終於找到了使用方法,而且是非常簡單﹗

若果要給用戶上載圖片,加入以下的html代碼就可以︰


若果要上載影象,就使用以下的html代碼︰


其實根據W3C的HTML5協定,以下的代碼應該可以啟動語音錄取,可惜暫時Mobile Safari還未支援︰


除了以上的功能外,Mobile Safari還增強了對Web Audio API的支援﹑增大了每個web app的暫存(Cache)到25mb﹑加速了的Javascript引擎及一堆CSS的特效。筆者暫時未試驗CSS的新功能,但以Javascript來說,速度就明顯地提升了,特別是一些大量查找id的jQuery程序尤其明顯。

原文網址: 
http://www.aveego.com/html/o_60277_/ios6對網頁設計界最重要的一項更新-safari圖片及影象上載.html
原文作者︰ 
 
更多網頁設計新聞 

想知道 iOS 平台上 Google Chrome 瀏覽器的市場佔有率嗎?

作為網頁設計師,一向都很關心瀏覽器的佔有率,由於成本效益,太少人用的瀏覽器就乾脆不支援算了。自從Google Chrome在iOS登陸,都想知道 iOS 平台上 Google Chrome 瀏覽器的市場佔有率。 Chitika Insights 剛推出了 Chrome iOS 版的使用追蹤器 (Chrome iOS Adoption Tracker),而且是實時數據。6月28日,Google 宣布在 iOS 平台上推出她的網上瀏覽器 Chrome ,但Chrome 會替流動裝置的瀏覽器市場帶來多大沖擊還是未知數。直至目前為止,Safari 在 iOS 的主流瀏覽器中,可謂未逢敵手,縱使 iOS 用戶還有其他方法上網,然而 Safari 在iOS 的瀏覽器市場,仍然保持壟斷地位。

Chrome iOS 版加入成為 Safari 在手機瀏覽器市場上的正式對手,這對用戶來說當然是個好消息。Chrome iOS 版一推出便高踞 iTune 市場上免費應用程式各個排行榜位置,並且保持穩定增長。

Chitika Insights 一向有追蹤 Chrome iOS 版瀏覽器的推出和使用率,以計算它從 Safari iOS 版搶到多少市場佔有率,以及有多快。Chitika Insights 最新的即時追蹤器就是為了即時量度 Chrome iOS 版的使用率而推出。

Chitika Insights 的 Chrome iOS 版追蹤器所繪製的圓餅圖會顯示現時在 iOS 5 上的瀏覽器使用率,追縱器顯示了一些有趣的數據。
Chrome 在 iOS 的流量佔全部 iOS 網絡流量的比例稍稍超過 1.5%,這個數字再加上每星期都見到的持續增長,表示它的市場佔有率正在攀升。iOS 的用戶中,有 14.5% 選擇 Safari 以外的平台上網。這個統計數字有助於揭示消費者如何使用智能手機以及增長中的應用程式在網上互動、分享和瀏覽。

Chitika Insights 的 Chrome iOS 版追蹤器的第二個重要功能就是分析以往 iOS 上瀏覽器的使用記錄。我們可以透過動態圖表,推斷出 Chrome 在網上的採用率,而且是即時的(為了保證數據的準確和完整,數據會滯後六小時)。

此外,追蹤器可以把個別瀏覽器篩選出來,讓用戶可以集中觀察某瀏覽器的最新情況。從追蹤器的的數據記錄中,可以觀察到Chrome 的每天流量比例都傾向波動。現時最多人使用 Chrome 的時間是上午 7 時至 10 時,最高峰時約佔總流量的 2%,但在同一天的稍後時間,流量比例會滑落。這裏所顯示的早上高使用量,可能跟消費者使用手機的行為模式有關。
 
如果 Google Chrome 在 iOS 的網上流量比例持續增長,有朝一日,如果它吃掉其他瀏覽器的市場佔有率,又或者挑戰 Safari 的領導地位,那就有好戲看了。蘋果會不會為了回應 Chrome 這個新競爭對手,在 Safari 手機瀏覽器加入新賣點,以及作出用戶們期待已久的改良?有了這個新追蹤器,我們可以看到 Chrome iOS 版到底是真材實料,還是「雷聲大雨點小」,並且,我們可以看到它對整體市場的影響,而且是即時看到!

Chitika Insights 的 Chrome iOS 版採用追蹤器的連結如下:
http://labs.chitika.com/chrome_ios/

追蹤器的完整教學可以在這裏找到:
http://insights.chitika.com/2012/chrome-for-ios-adoption-tracker-methodology

原文網址: 
http://www.aveego.com/html/o_59882_/想知道-ios-平台上-google-chrome-瀏覽器的市場佔有率嗎.html
原文作者︰ 
 
更多網頁設計新聞 

Google 的網站管理員工具推出了一項新功能 - 索引狀態

Google 的網站管理員工具推出了一項新功能:索引狀態 (Index Status),這個新功能可以在「健康狀態」下找到。新功能可以把過去一年之內,網站中的已建立索引的網頁數字繪成圖表。這個功能應該是筆者有印象中Google首次對其索引資料提供一丁點資訊,不竟這個索引是Google最重要的資產,亦是SEO界一直最希望知道的秘密。

Google webmaster tools index status standard screenshot

Total Indexed(已經建立索引的網頁總數) 

Google 表示數字相比起 site: search operator準確,兼且是規範後的結果。換言之,如果您的網站有大量重覆的 URLs(例如由於追蹤參數)和具有規範屬性的網頁,Google 會識別出重覆的 URLs,而這裡顯示的總數只計算規範網頁,重覆網頁被排除在外。您也可以透過提交 XML 網站地圖 (XML Sitemap) 取得這些數據,但如果您的網站地圖是綜合式的,您得到的數字便只會是全索引數字。另外,Google 也會把過去一年的數據以圖表顯示出來。不過,Google 指這些數據可能會滯後兩三個星期。因此,與其依據這些數據作出即時行動,不如從它們看出網站的發展走向,還比較有用。

此外,如果您查 domain.com,您會查到所有子網域的統計數字,但如果您查 www.domain.com,您查到的只有 www 子網域的統計數字。這表示,如果你的網站沒有加上 www,你要很不容易才能查到排除了子網域資料的數據。

進階狀態

「進階」選項會提供更多詳情:

google webmaster tools index status advance screenshot

要理解這些數據,最好先不理會 檢索過的網頁數 (Ever Crawled) 的數字(這個稍後再看),現在,剩下的有:
- 已建立索引的網頁數 (total indexed)
- 未選取 (not selected)
- 遭 robots.txt 封鎖 (blocked by robots)

這三個數字的總和,就是 Google 現正考量的 URLs 數目。Google 表明所有數字只包括 HTML 檔案,其他檔案類型如圖片、CSS 檔案或 JavaScript 檔案不會列入計算之內。在上面的例子,Google 現正查看的有 482,241 個 URLs,其中有 330 個被 robots.txt 封鎖。然而,要列出這些 URLs 有甚麼網頁,就變得困難了。在這個用戶介面上,再沒有列出封鎖了的 URLs 的報告功能,但你仍然可以透過 API 取得這些資料。只看這些數字而沒有背景資料,很難決定這些數字是否表示網站出現問題。假設這個例子中的網站有 2000 個可供建立索引的網頁,Google 是否只爬找了 957 個獨特網頁,並且都替它們建立了索引?(在這個情況,所有不獲選取的會是那些沒有規範化的 URLs ,例如在追蹤代碼之類上出現差異)或者,會不會是Google 雖然爬找了全部 2000 個網頁(包括非規範網頁),但卻認為只有其中的 957 值得建立索引? 又或者,可能只有 500 個建立了索引的 URLs 是獨特網頁,但由於規範化出了問題,很多重覆了的網頁也建立了索引。

如果沒有大量的其他資料點作背景資料,這個問題很難解答。Google 表示一個 URL 之所以在建立索引時不獲選取,有很多原因,包括:
- 它重新導向至另一網頁
- 它有 rel="canonical",去了另一網頁
- 我們的演算法偵測到它的內容跟另一個 URL 非常相似,而我們選擇了另一個 URL 來顯示這個內容。

如果要了解為何 Google 不建立索引的網頁,情況便比較複雜。但無論如何,今次的資料大概可以讓我們網頁設計公司或者SEO公司知道大概的成績表,在制造內容的時候定期留意一下這個數字,相信大概也知道 Google 的口味,到時再進一步對症下藥。




原文網址: 
http://www.aveego.com/html/o_57927_/google-的網站管理員工具推出了一項新功能-索引狀態.html
原文作者︰ 
 
更多網頁設計新聞 

Facebook宣佈有超過8300萬非法帳號的同時 股價亦繼續下滑

 社交網絡之王 Facebook 表示,在其接近10億個使用中的帳號中,相信有超過8300萬非法帳號。 Facebook在發表的公司資料中表示,有大約 8.7% 違規用戶。 其中已註冊會員的分身檔案,佔會員數目的4.8%。 而用戶錯誤分類的帳號(例如替公司或寵物開了個人檔案)有 2.4%,其中有 1.5% 被指是「不良」用戶。 

相信除了我們這些直接以網絡為生的網頁設計公司或者seo公司外,還有大量的投資界在關注Facebook的一舉一動。Facebook 正好在市場對其推廣成效日益懷疑的情況下發表這次估算。Facebook 的商業模式是倚賴針對性廣告,開創了累積用戶的「Like」的廣告模式,然而,這種廣告模式的價值所受到的監察也越來越多。 Facebook極大部分的收入來自廣告,廣告客戶的流失,或廣告客戶在 Facebook 上的花費減少,都會嚴重損害生意,影響生意當然也會影響其股價。

Facebook Logo

以Facebook 對分身的定義,是指「用戶除了他 / 她的主要帳號以外所持有的帳號」。 而如果「用戶替公司、組織或非人類的實體(例如寵物)建立個人檔案」,這些檔案便是「把用戶錯誤分類」。 「不良」帳號則包括使用假名及違反服務條款的帳號,例如發出垃圾訊息。

上星期,數碼發行公司 Limited Press 指稱,根據他們的分析軟件,公司在 Facebook 上的廣告點擊有 80% 來自假用戶。Limited Press 在 Facebook 上的貼文表示機器人(bots)不停點擊廣告,從而推高了廣告開支。不過 Facebook 仍未就此類事件作出回應。沒有人知道這些機器人屬於誰,當然 Facebook 使用機器人來推高廣告收入的機會不大,但這種莫名其妙的損人不利己只利Facebook的機器人究竟有什麼目的,筆者暫時也摸不著頭腦,跟SEO有關嗎?看似又不是。暫時只能想到的可能性就是特別用來增加競爭對手的宣傳成本,大概就像一些公司無聊地去點擊一下競爭對手的付費廣告吧。實際目的仍然是一個謎﹗ 
原文網址: 
http://www.aveego.com/html/o_56743_/facebook宣佈有超過8300萬非法帳號的同時-股價亦繼續下滑.html
原文作者︰ 
 

2011年12月13日星期二

CSS3網頁設計轉場效果示範

CSS3的轉場效果(transition)雖然未普及,但隨著IE的佔有率持續下滑和Chrome的持續上升,加上全面支援CSS3的IE10會在下年面世,距離大規模應用的日子相信愈來愈近。一些前衛的網頁設計師亦已經開始進行實驗性工作,今次介紹的網頁就是簡單在同一個屬性(property)套用兩組數值來測試效果,估不到的是原來只要簡單更改一些如letter-spacing和text-indent就可以產生有趣的效果。







筆者也因此改動了公司的頭版網頁設計,利用line-height為Firefox加入了少許CSS3的動態效果,製作十分簡單,而且運作起來的確比jQuery暢順,不過現段階最麻煩的是要為不同的瀏覽器加上不同的prefix,這方面還是要利用jQuery來幫忙一下。



aveego frontpage css3 effect screenshot



有興趣的朋友可以到以下連結一看︰

CSS3網頁設計轉場效果示範



原文網址:

http://www.aveego.com/html/o_38771_/css3網頁設計轉場效果示範.html


jQuery網頁設計插件: 超小巧的幻燈片播放器Rhinofader

自從jQuery及mootools等Javascript程式庫的興起,幻燈片播放器(Slideshow)便在網頁設計界大行其道,亦是市場上最多插件的一類。今次介紹的Rhinofader犀牛播放器不但沒有特別新穎的功能,而且支援的過場效果亦只得一種,就是淡出淡入(Fade In Fade Out)的效果,不過就是因為功能簡單,使用起來非常容易,最重要是十分小巧,瘦身後(Minified)只有1kb,特別適合在流動網頁上使用。


rihnofader screenshot





首先在頁頭(Header)載入rhinofader.min.js,然後再簡單的呼叫rhinofader()就可以,支援的選項包括︰



showControl - 什麼時候顯示向前向後等控制按鈕

controlsPrevNext - 是否顯示向前向後按鈕

controlsPlayPause - 是否顯示暫定按鈕

autoPlay - 是否自動播放

pauseOnHover - 滑鼠覆蓋時是否暫定

showTime - 每張相片的顯示時間

effectTime - 過場效果的時間



順帶一提,除了圖片外,Rhinofader也支援普通的HTML元素,有興趣的朋友可以到Rhinofader一看。



原文網址:

http://www.aveego.com/html/o_38516_/jquery網頁設計插件-超小巧的幻燈片播放器rhinofader.html



2011年11月15日星期二

iOS5的Safari速度測試

Apple的iOS5推出了一段日子,當大家都在討論電池損耗的問題外,其中一個比較少人關心的更新就是Safari了。其實Safari已經由iOS4的5.0版本更新到iOS5的5.1版本,作為網頁設計師, 筆者比較關心其處理網頁的速度,特別是處理HTML5的速度。New Relic公司在其BLOG上公布了測試報告,在隨機的3000個網頁程式中,新版Safari比舊版快一倍有多﹗而New Relic公司的特別程式測試(應該是專門測試大量Javascript的程式)中,更加快了近4倍﹗



有關的詳細數字可以到以下網誌查看︰
Is mobile browsing faster on iOS 5? Yes- it’s significantly better in our snapshot comparison

原文網址:
http://www.aveego.com/html/o_37498_/ios5的safari速度測試.html