行動版網站的重要性

在WebMobi這家製作手機網頁的公司網站上，提出下列幾個觀點，確實要設計WebAPP就該先知道這些囉～

• 傳統網站在手機上的樣子
• 行動版網站在不同行動裝置上呈現的樣子
• 手機版網站重要性分析與比較
• WebAPP 與傳統APP又差別在哪？

簡單來說，就是以HTML5開發出來的行動版網頁，國內的一些大型網站已經換裝囉(約有17%的企業擁有手機優化的網站，而比例還在逐漸增加中。)～

• Yahoo!奇摩的多項服務都已經有行動版網頁了，行動版Yahoo!奇摩首頁在2012年8月初進行改版後，光是在台灣地區，每個月約700萬的使用人口中，每日平均不重複瀏覽人次就達250萬人。
• 樂天推出行動首頁後，行動購物業績年成長已達三倍以上。在日本，消費者透過行動通訊購物佔三成以上，相信台灣還有很大的成長空間。台灣樂天市場強調Shopping is entertainment，此次領先台灣所有B2B2C平台，將樂天全店家及商品網頁全面升級行動版，預估年底前行動購物營業額將可成長至15%以上。
• 無名小站行動版於2011年推出，除了會員們主要會使用的功能都需要兼備之外，每天由小編們編輯的無名首頁各種精彩內容自然也需要好好的被呈現，提供給無名小站的會員們不亞於電腦上的使用經驗。

[入口網站]

• MSN
• 台灣大哥大match生活網
• 遠傳電信FETnet

[新聞媒體]

• 台視
• 台灣蘋果日報
• 台灣蘋果動新聞
• 爽報
• 中央社新聞網
• 聯合新聞網
• 中時電子報
• Nownews
• 鉅亨網
• 天下雜誌
• Vogue台灣
• Wikipedia

[社群網路]

• Facebook
• Plurk
• 無名小站
• 隨意窩Xuite
• 痞客邦Pixnet
• 伊莉討論區
• MyChat數位男女
• VeryWed非常婚禮

[影音娛樂]

• Flickr
• YouTube
• 优酷YOUKU
• 歌詞帝國
• 魔鏡歌詞網
• 兩廳院售票網

[購物消費]

• 7-ELEVEn
• 7-nET
• 麥當勞
• 摩斯漢堡
• 博客來網路書店
• 原價屋查價系統
• Gomaji
• 奇集集Kijiji
• 淘寶網

[科技資訊]

• ePrice比價王
• 巴哈姆特電玩資訊站

[生活資訊]

• 中央氣象局
• 台灣高鐵
• 省道即時交通資訊網
• 愛料理
• CityTalk

[人力銀行]

• 台北人力銀行
• 104人力銀行

[房仲業者]

• 信義房屋
• 永慶房屋
• 21世紀不動產

如果有個網站要做行動版網頁也要做 App ，建議採 HTML5 技術，因為只要把行動版網頁再用PhoneGap打包成 App 就可以，並且可以同時在各行動裝置平台推出。你可以把 HTML5 寫成的 App 看成是模擬器中的程式，這個程式的一舉一動必須透過模擬器(瀏覽器)翻譯成作業系統的功能，才能呈現結果，多了一層指令轉換，因此在資料讀取或顯示圖片等方面的速度比較慢，但原生軟體可以直接使用作業系統的資源，執行效能通常較佳。Web App頂多是跟Native App一樣好用(技術上)，但是開放標準帶來的自由度遠遠勝過Native App，所以Amazon等的選擇是「能走Web App就別走Native吧」。而且，隨時用HTML5 技術對網站進行改版加入新功能，其實也就讓行動版網頁不必像App等待重新發佈時間差。

你要效能還是自由？

設計行動裝置網頁(Mobile-Web)的10個要素

在INSIDE網站的「設計行動裝置網頁(Mobile-Web)的10個要素」文章談到：

1. 確立網頁設計的內容，方向及類型
2. 確定公司/品牌所要表達的形象
3. 在設計行動裝置版網頁前務必預測網站流量
4. 學習如何設計可自動調整版面的網頁設計(Responsive Web Design)
5. 簡單，但不能簡陋
6. 網頁模板建議採用單欄式設計(Single－Column Layouts)
7. 善用摺疊式目錄
8. 行動裝置網頁的按鍵要明顯易按
9. 記得提供視覺反饋按鍵(Interaction Feedback)
10. 測試，測試，再測試網頁性能

在iWare數位行銷網站的「設計手機版網頁的10個注意事項」文章談到：

1. 手機版網站的需求是什麼
2. 商業的目的為何
3. 製作前先閱讀網站的訪客情報
4. 回饋式的網頁設計
5. 簡單是好事，但視覺表現不打折
6. 單行式的手機網站是當今最好的設計
7. 垂直堆疊的選單設計
8. 從「可點選」到「可觸碰」
9. 加入互動效果
10. 測試你的手機網站

用HTML5技術製作App或取代App

Gmail App

YouTube App

爭鮮迴轉壽司在2011年推出的公仔活動

原本是希望開發APP來做互動功能，最後用HTML5做為替代方案，開發HTML5的時程大概是2-3天，不但節省了成本，更大幅提升了活動整體效益。在活動期間，因為搭配發票登錄及實體店面手機打卡活動，吸引了不少網友到店消費，在將近2個月期間，總計共有1,664筆打卡記錄，平均每日約29次的消費者打卡次數。整體的活動網站則有40萬人以上造訪，成功地達成宣傳公仔上市活動訊息。由此可知，在技術方面，HTML5可以是個很好的選擇，接觸的客戶單位成本降低了，但卻吸引了廣大消費者的注意。

要認識HTML5就來看看吧...

HTML5: WEB DEVELOPMENT TO THE NEXT LEVEL

HTML5 SHOWCASE FOR WEB DEVELOPERS: THE WOW AND THE HOW

(HTML5 網路的大未來，各家瀏覽器的實際應用與未來發展)

HTML5ROCKS - HTML5 Features

離線與儲存

HTML5為開發者提供了儲存程式快取和簡易的資料庫功能，並可以指定線上和離線狀態時，要進行何種工作。這個功能讓網路程式在離線時也能夠正常運作，有了Local/Session Storage, Web SQL, IndexedDB, Application Cache，讓HTML5程式可以將資料儲存在本機端。

連結性

HTML5的Web Workers讓JavaScript可以在後台執行，達成多工效果。HTML5支援WebSocket協定，讓本地端和伺服器之間能夠保持通訊連線，降低資料傳遞的反應時間。另外HTML5也加入了Notification可將伺服器將訊息推送到客戶端的功能。

檔案/硬體存取 (HTML5 Storage) (A TOUCH OF HTML5)

另一個HTML5的有趣功能就是它可以存取本地端的檔案系統，聽起來沒什麼好玩的。不過如果你想把桌面的檔案直接拖入網路程式中，就用Drag & Drop、Desktop DropIn / DropOut功能。FileSystem API可以讓瀏覽器讀取檔案內容，例如你要上傳圖片，瀏覽器就可以在上傳的同時顯示縮圖等，再結合其他功能就能在瀏覽器對圖片進行處理。開發者還能利用HTML5擷取本地端裝置的功能，像是地理位置、加速規、照相鏡頭、語音輸入等。

語意

HTML5加入了過去沒有的語意標籤，並修改了自上一代HTML和XHTML流傳下來的缺點，讓HTML的語意更為完善，也支援更多功能，讓HTML5能夠自給自足，成為一個完整的程式平台，而不需依靠第三方提供的外掛，例如影音播放、遊戲製作、版面安排等功能，都是HTML5新加入的重點功能。

圖像 (BASICS OF THREE.JS)

瀏覽器的硬體加速想必大家都聽過，這是HTML5提供的圖像功能，讓瀏覽器能夠使用GPU的功能處理2D canvas、WebGL、SVG、CSS 3D變形等功能，讓網頁能夠在使用更先進的圖像時，保持網頁的反應速度。

多媒體

HTML5的多媒體支援使用者已經聽到不要聽了吧，從YouTube支援HTML5影片播放，到Steve Jobs撰文批評Flash，並支持HTML5，都是媒體爭相報導的大事。HTML5支援直接插入影片、音訊等多媒體資源，不再需要第三方外掛

風格呈現

HTML5的另一個亮點就是搭配CSS3所能呈現出的網頁版面，CSS3提供了圓角、網路字型、轉場、2D和3D變型等功能，讓網頁的排版方式更為多樣，也讓網際網路可以變成最佳的電子書平台。

效能

HTML5有多種增加執行效能的功能，讓網路程式的反應速度更加貼進原生程式，例如使用程式快取、CSS3的轉場和動畫功能、背景執行JavaScript等，都可以提升網路程式的反應速度，讓使用者有更加愉快的使用體驗。

從jQuery Mobile開始練習做App與HTML行動網頁吧

找個模仿的對象吧，我們做個類似GOMAJI的行動網頁，如何？

• 先從jQuery Mobile Quick Start Guide認識最基本的語法框架(Mobile page structure)，把"Create a basic page template"與"Make a listview"兩個範本的HTML碼複製起來，用個自己習慣的編輯器來寫第一個jQuery Mobile頁面吧(來看看用線上JSFIDDLE編輯內容與結果)。

• 要變成有縮圖的ViewList，簡單的很，就是像這樣的例子，然後把原始碼裡面的相關的部分改變一下如這個編輯內容與結果。

• 想要加上NavBar，試試看這個編輯內容與結果。

• 來做第二、三...頁的內容吧，然後讓ViewList與NavBar超連結到這些內容頁面。

• 更進一步，試著將ViewList以陣列方式產生，呈現出一樣的內容頁面，但這下一步要利用資料庫產生內容的概念喔。

接下來就靠你們自己去學囉，提供下列教學影片參考，大概只要認真投入學習一個月吧，相信大家就能做個有規模的行動網頁或App了。

• jQuery Mobile邊做邊學系列影片 (另一網址)
  初探jQueryMobile
  jQueryMobile開發須知
  認識jQueryMobile網頁
  jQueryMobile網頁導向
  設計jQueryMobile視覺化元件
  設計jQueryMobile List View
  設計jQueryMobile表單成員
  設計jQueryMobile事件
  使用jQueryMobile呼叫Web Service並動態產生List View
  使用ASP.NET Web Form與jQueryMobile設計驗證網頁
  使用ASP.NET MVC 4開發jQueryMobile行動式裝置網頁

• jQuery Mobile videos at Pinehead.tv
  jQuery Mobile Theme Roller
  changePage, pageInit, and Swipe API
  jQuery Mobile Forms Part 1 The Basics
  jQuery Mobile Forms Part 2

• jQuery邊做邊學系列影片

Salesforce.com支援HTML5將推出Web APP

Salesforce公布touch.Salesforce.com數項核心應用，以及Force.com開發平台上的應用擴充函式庫，將能支援HTML5。HTML5技術可讓網站Web應用開發人員撰寫一次後，就能在多種行動平台和裝置上執行，而不用再原生開發。

Opera TV Store新增HTML5 APP

瀏覽器領導開發商Opera Software在2012年9月歐洲國際電視廣播展(International Broadcast Cooperation Show, IBC)推出最新版的Opera TV Store與Opera Devices軟體開發套件，提供新的使用者操作介面、提升網路影音播放品質、以及專為內容開發者所設計的各種盈利模式，可望帶動整體電視上網產業鏈生態系統發展。Opera TV Store新版介面亮相新增多款HTML5 APP，最新版的Opera HTML5應用程式架構，可以在各款電視機種上使用。