HTML5 之於行動裝置上應用的開發(上)－原也網頁設計、網站規劃、網站行銷.

 
隨著手持裝置越來越先進，對HTML5的支持度越來越高，最近當我們在替客戶建置網站的時候，都會遇到一個問題，選擇HTML5和還是 Native (HTML4.01/ XHTML 1.0)?
？HTML5的前景無疑是誘人的，一句“Write once， run anywhere”就可以秒殺一切。最近兩年我們開始對HTML5與 Native 有較為深入的研究，覺得兩者之間不能僅僅是二分法來選擇，還要根據企業自身 的情況、團隊的構成、公司的戰略以及產品的特點來綜合選擇

HTML5 Buzz

HTML5的發展前景無疑是非常看好的，不知不覺已經成為業界的一個 Buzz Word, 所有客戶的網站建置需求都把 HTML5 掛在嘴邊
沒錯, 目前主流的三大智能機操作系統iOS、Android和WIndows Phone都已經支持大部分的HTML5特色。而手持裝置硬體軍備競賽也為HTML5掃清硬體障礙。按照現在的發展速度，我們判斷是在兩年以內甚至更快，移 動設備運行HTML5將會完全沒有壓力 (抑或是已經發生了? lol), 以目前 Smart Phone 的規格來看, 不管是軟體/ 硬體都已經到位. HTML5 用於開發手機上的運用老早已經開始發酵了.

談談 HTML5 吧

1.HTML5可以讓你擺脫對平台(App Store…)的依賴，用戶打開瀏覽器，直接就可以訪問你的應用，而不需要經過各種Store的審核。

2.實時更新，通常平台的審核都需要七個工作日左右的時間，如果你發布之後發現問題怎麼辦？Web方式就不存在這種問題。

3.Write once，run anywhere？
這是多少程式員的夢想，也曾經是Java讓人心動的地方，但真正做過跨平台解決方案的人都知道，這只是一句口號而已，跨平台沒那麼容易玩轉的。沒 錯，HTML5可以實現Write once， run anywhere，但我們總不能寫一個Hello World來run anywhere吧。不同平台有自己的特色，不同平台用戶也有自己的操作習慣，如果你想討好所有人，也就意味著你無法討好任何人。

4.減少開發工作量或者讓開發變得更簡單？
對老板來說，這是一個非常誘人話題，因為工作量的減少就意味著節省更多的錢，沒有老板不喜歡用更少的錢辦更多的事。而且目前一個非常大的問題是，移 動設備開發人員特別是iOS開發人員非常不好找，因為技術好的都自己做應用了，人家自己也能賺個月薪上萬甚至更多，為什麼要進你的公司？怎麼說也是自己的 事業，擁有無限可能，還可以充分享受自由。但如果可以充分利用HTML5，那麼我們就可以招聘Web前端的開發人員來構建移動應用，這樣就不愁招人的有問 題。因為在許多人的眼裡，HTML5/CSS/Javascript都是沒多大技術含量的東西，實在找不到人，找些實習生學學也就會了。

但問題是，工作量真的會減少嗎？技術門檻真的那麼低麼？答案是NO！

我曾經花了半年的時間去開發一個基於HTML5的移動框架，用來模擬 Native 應用，讓HTML5應用看起來盡可能看起來像本地應用，注意：是 像。這有點像jTouch，但不一樣的是，它能和 Native 程式很好地交互，並且能調用本地資源等等特色。但最後結果確不是那麼令人滿意，比如 HTML5在動畫切換的時候，有時候候會有一些莫名其妙的問題，當然你可以告訴我把動畫效果關了，但這看起來很死板，最後我不得不關閉某些動畫。而用 Objective-c編寫程式就沒這麼多事了，幾句簡單的程式可以實現很酷的動畫，用HTML5需要更多的程式，甚至根本無法實現。

而且手持裝置上的HTML5開發對開發人員的技術有非常高的要求，不是一般的Web前端人員能解決的，通常擁有這樣技術的人才，工資水平也不會比 Native 開發人員低多少。如果你僅僅是要開發一個手持裝置上的網站，這會簡單很多，但如果你希望模擬 Native 應用，並且擁有較高的效率和優雅的用 戶體驗，這就很有技術含量了。不要小看Javascript這類Web開發語言，通常我的看法是越簡單的語言越會體現出技術人員的水平，特別是規劃設計能 力。

5.其它問題，資源調用的限制，比如說在iOS中有Javascript運行不能超過15秒的限制，不能調用本地硬體設備（如相機等），無法使用推送服務等。

如何選擇？

是否這樣，我們就不要選擇HTML5了呢？我在前面說過：“要根據企業自身的情況、團隊的構成、公司的戰略以及產品的特點來綜合選擇”，我最近在關 於HTML5討論的微博上也有談到：“HTML5是戰略性方向，Facebook和Google已經布局，Google Mobile在iPhone上的體驗可以媲美 Native 。基本上 Native +Web App可以秒殺多數應用，如果不願意受制於各種Store，單獨的Web App也是一個不錯的方向。對於游戲類和對硬體環境依賴嚴重的應用，只能是是 Native ”。僅管有這樣那樣的問題，但HTML5是一種趨勢，在未來三至五年，HTML5將會取代很多本地應用，但就像多年前我們一直在談B/S架構取代C/S架構一樣，這需要一個過程。

通常在HTML與 Native 之間，我們有三種選擇——HTML5、 Native App以及HTML5+ Native ，HTML5就是指純Web的移動應用，用戶需要打開瀏覽器，然後輸入應用的網址訪問。 Native 指的是基於特定平 台開發的應用。 Native +HTML5實際上是一種加殼的方式，將HTML5用和瀏覽器封裝起來，但這對用戶是不可見的，用戶沒有任何異物感，和 Store上下載的App沒有什麼兩樣。

就我個人而言，我是比較推崇HTML5+ Native 的，這種加殼的方式，可以讓你享受 Native 與HTML5的雙重好處，但缺點是對技術含量要 求較高。當然我這裡指的不是簡單地把HTML5封裝到一個瀏覽器裡面， Native 與HTML5會有許多的交互，實際上這有點像混合硬盤，我們即便享受 SSD的快速，但我們又想獲得機械硬盤的高性價比。我認為在5-10年內，這都會是一種不錯的解決方案，當HTML5和硬體發展到一定水平之後，我們再完全轉向HTML5成本也會非常低的。  

引用自http://ten2.tw/blog/html5%E8%A1%8C%E5%8B%95%E8%A3%9D%E7%BD%AE%E6%87%89%E7%94%A8%E9%96%8B%E7%99%BC/
原也網頁設計、網站規劃、網站行銷。

遭駭事件頻傳，網友卻不加強資訊安全的原因(上)－原也網頁設計、網站規劃、網站行銷

 

每次大型線上資訊安全洩密事件一發生，人們好像覺得只要辦一場大型演講，告知使用者改用強度高的密碼、每次登入網站之後都要清空相關紀錄、備份資料，還有加密所有資訊，就可以解決所有的問題。

企業電子郵件行銷：鼓勵自動取消訂閱，而非垃圾郵件投訴－原也網頁設計、網站規劃、網站行銷

 和某些收件人合作愉快，你會盡力維持你們的合作關係；其他的則不盡然，並不是每一個商家都有應付難纏客戶的技能，對那些沒有能力應付的人來說，擺脫這些客戶會是最好的選擇。你有不受控制的收件人嗎？
讓電子郵件行銷公司教你如何應付他們，並避免累積垃圾郵件投訴： 

響應電子郵件通訊設計：增加移動的讀者－原也網頁設計、網站規劃、網站行銷

 (GOOGLE翻譯)

響應性的Web設計（RWD）的概念，我們一直在談論了很多最近，我們把它響應圖像和其他工具，甚至漸行漸遠。不久之後，我們將提供一個覆蓋響應印刷術的主題的文章，但在那之前，讓我們專注於電子訊息，以及如何響應佈局，我們可以把它們變成，使他們能夠適應屏幕的設備上查看。

為什麼響應的設計呢？

我們中的許多人閱讀電子郵件，從我們的智能手機 -汽車，火車，甚至飛機。我們嘗試做盡可能多的事情盡量在旅途中，所以我們可以享受更多的閒暇時間和家人一起，在健身房鍛煉或在自己的愛好。

如果您閱讀您的電子郵件，從智能手機一次，你已經知道了，雖然這可能是一個積極的經驗，但也可以變成一負一。我們已經經歷了小字體，窄欄和破碎的佈局方式太多次。但我們是在為現在的變化，響應性的Web設計是在網頁設計中歷史最重要的概念之一的邊緣。 如果您發送電子郵件訊息的，如果你不知道，我告訴你，20％左右的全球發送的電子郵件被讀取在智能手機或平板（從2011年的一項調查顯示-近16％比2009年多）。令人驚訝的與否，大約90％的這些設備的運行iOS。

所以你的潛在讀者每五時使用便攜式設備訪問他們的收件箱。幾年前人們關注的這些電子郵件在Gmail或Outlook好看。現在，這是梳理，使它們看起來不錯的便攜設備上是一樣重要的，需要立即引起注意。

這些便攜設備迅速接管，很顯然，在小屏幕上提供了一個負的閱讀體驗，可能會導致你失去一些追隨者，甚至大多數人。  

設備的目標

您可能會問自己，這是設計的設備，您可以 - 我可以告訴你的是，或多或少，你可以設計為所有的人。運行iOS的設備應該沒有問題，因為它們是很好的優化，HTML和CSS。雖然你可能會遇到一些問題，與Android設備，這也是理順從谷歌通過定期更新。基本上，有沒有限制你。

設計元素

跳進位編碼之前，我們要來看看適合手機以及一些設計元素，並應避免那些。響應性的Web設計相同的概念將被用於建立響應的電子訊息。在你不知道的情況下，對響應性的Web設計，這篇文章可能不會為你做太多的感覺，所以你應該回去讀一些有關的基本的概念。

其基本思路是，像往常一樣，我們將建立兩個CSS佈局相同的內容 - 一個適合台式機和郵件客戶端和其他較小的屏幕上會很好看。

為了使佈局看起來不錯的移動，也有一些CSS的細節，你需要考慮：

• 列 -應該永遠不會有多於一個列，而不是大於500至600像素。
• 鏈接和按鈕 -這些都應該有一個最低的目標區域為44×44像素，根據蘋果公司提供的一些準則。這將確保你能夠真正點擊鏈接，瀏覽。
• 字體大小 -你顯然有話要說，所以你會使用單詞和字母。請確保您使用的最小字體大小為13像素。據美國相同的巨頭，將擴大範圍和更小的東西可以打破佈局。
• 長度 -便攜設備上顯示的信息通常應該是非常簡明扼要。的重要元素應該是在上側和滾動應盡可能地減少。
• 隱藏元素 -在桌面上，你能負擔得起使用了更多的空間，而不是在移動平台上。因此，這是一個聰明的主意，用一個簡單的CSS屬性來隱藏不同的要素：顯示：沒有，如果你想要的東西，應該被隱藏的一個例子，那麼，社會媒體按鈕是那些東西。雖然他們可能是巨大的，有用的桌面上，他們是凌亂的佈局上移動。

為了開發用於便攜式設備的一個很好的解決方案，這是一個好主意，開始嘲諷了兩個佈局，一個從一開始就面向台式機和一個用於移動。請記住，在手機上，你有倍以上的空間要少得多-這是所有重要元素的地方，應該放在包括CTA按鈕（也稱為呼叫操作按鈕）。收件人應不滾動才能看到它。

讓我們來看看一些編碼！

為了幫助你關閉一個良好的開端，我會告訴你一些關於如何開始編碼了一個負責任的通訊設計。當我們前面所說的，我們將有兩個樣式表，我不是故意的兩個不同的人。你只會有一個樣式，但在某些設備上顯示不同的元素，你會使用媒體查詢。