Google 採用 HTML5 製作手機應用程式(老新聞)

此篇文章最近更新時間為2009-08-25 03:36:09 目前共有6篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

Google 在手機上除了有以 Java 開發的應用程式(例如 Gmail)、服務大多也有針對手機開發 Web 介面,只是過去的印象有點糟... 光是找資料都覺得有點不堪用、何況是在上面打字... 以致 iPhone 買來後、從未試著用 Safari 去存取我常用的 Gmail 或 Calendar。

在 iPhone 上看到令人驚艷的頁面

P8250032直到前天存取 Google Calendar 才發現在 iPhone 上的 Web 介面完全顛覆了我以往的印象、Gmail 也套用了相同的 UI:介面與 iPhone App 相似且漂亮、有 AJAX 不換頁更新、有動畫、還可以離線瀏覽!

因為上禮拜才知道 Yahoo! 的 BluePrint 改版後可以不透過 Yahoo!Go、以 Web 方式直接 Rendering 豐富的使用者介面,但是功能跟 Google 的這兩套比起來還是差很多,所以很好奇 Google 是不是有提供什麼 Mobile Framework 給開發者產出類似的介面(例如 Google Web Toolkit)



HTML5 就是解決方案!

相關討論似乎不多,好不容易才找到了這篇文章:HTML5 and WebKit pave the way for mobile web applications。Google 一開始是把開發手機應用程式的重心擺在 Java 上,但是 Client 端應用程式的缺點便是需要下載、需要安裝時間、要求使用者設定權限、升級時該如何通知,這些問題一直困擾著他們的 Mobile Team。Web 似乎是個解決方案,但要做到一個良好的手機介面似乎還有一段距離... 直到看到了 Android 的新瀏覽器:只需要使用 XHTML、images、JavaScript、CSS 就可以產生很好的應用程式介面。雖然 Android 瀏覽器只是眾多手機平台之一,他們就開始思考,未來總有一天,所有手機瀏覽器都會達到相同的標準:支援 HTML5

HTML5 有哪些特點呢?可以達成跟 Gears 一樣的離線瀏覽模式、支援 Canvas 複雜的圖形效果(Yahoo! Pipes 可以在 iPhone 上跑 @@)、進階的 CSS 語法做更多類型的排版、地理位置的相關 API,這些都是製作一個網路應用程式所需的基本條件

所以 Google 就在 iPhone 與 Android 兩款有最先進瀏覽器(Safari & WebKit)的手機上利用 HTML5 的功能做出了 Gmail 與 Calendar 兩個網頁版的應用程式,這是我第一次看到專門為手機設計的網頁有這麼多 fancy 的功能,有一個浮動式的選單會隨著捲軸的位置跑(動畫)、所有的動作採用 AJAX、支援離線... 簡直比慣用的 Mail 應用程式還好用許多。

結語

其實這篇文章式在 2009 年 4 月就推出了,我真的很後知後覺,過了將近半年才了解到 HTML5 已經被許多人使用,我還傻傻地覺得是一個沒有成熟的技術,真是慚愧啊... 是時候花時間好好投資這個劃時代的新技術 !

另外比較可惜的是似乎 Google 沒有將這樣 UI 製作 Open Source 出來,大多在講如何克服技術上的問題(一連串的文章:Gmail for Mobile HTML5 Series),如果有人有找到相關資訊的話也請跟我分享。

回頭來看 Yahoo! BluePrint(範例請用 iPhone 的 Safari 開 m.yahoo.com)的作法是採用一堆自訂的 XHTML Tag、依照不同的手機瀏覽器做不同 UI 的產生,好處是兼顧了不同裝置的瀏覽器、而壞處是在開發技術上沒有較大的突破,開發者又得學習一堆不熟悉、只能用在 BluePrint 的標籤。投資報酬率相對來說是低的。



前一篇:@coscup2009 後一篇:D-Link 登板日:Glamour!

Comments

  1. rafe 2009-09-04 09:57:17
    我也是看到Chrome Experience才發現到HTML5的強大的...
    看來HTML5會比預計還早普及一點

    ttp://www.chromeexperiments.com/
    上面有許多很炫的experiments
  2. heeroy 2009-08-26 10:36:27
    我看了這篇才用iPhone看google的頁面...跟以前真的差好多喔~
  3. 虎哥 2009-08-26 10:12:33
    不能再同意樓下講的了!+1 門檻決定普及度,普及度也似乎決定了標準!
  4. 貝姬 2009-08-26 01:04:56
    門檻低真的是很重要啊 要讓developer 容易上手人家才會肯用啊~
  5. Awoo 2009-08-26 00:26:09
    Squall,

    我是看到這一篇文章
    http://googlecode.blogspot.com/2009/05/yahoo-pipes-and.html
    不過找不到相關的影片說... 真可惜
    找到要跟我說喔!
  6. squall 2009-08-26 00:12:39
    我可以問Yahoo Pipes的那水管到底是怎麼做出來的嗎?
    好想做出那種效果..
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment