開發 iPhone Mobile Web App 一些小技巧 Jul 17th, 2012 by appleboy 推薦本文到Facebook去！ 推薦本文到Twitter推特去！ 推薦本文到Plurk噗浪去！ 開發 Mobile Web App 有好一陣子，底下來紀錄過去開發的一些經驗以及 iPhone 上面一些 meta 的設定小技巧，適用於 Mobile Web 開發，如果有任何錯誤，請大家可以留言給我，也或者有不錯的建議都可以一起討論。 良好的設計模式 底下是 Web 程式設計師應該注意的事項 html 檔案必須宣告 DOCTYPE 型態以目前 HTML5 就必須寫成 <! 優化 Web Content 為了區分手機跟桌面版本不同的 content，我們可以使用 Media Queries 來區分，在加上 max-device-width 和 min-device-width 去偵測整個頁面大小 (screen size)。 另外如果是 Desktop 版本可以加入底下 另外或者是直接在 CSS 裡面判斷: 另外針對 screen 或 print 可以直接在 head 裡面寫入 或者在 CSS 裡面寫入 Viewport Meta Tag 設定 開發 iPhone 手機版 Web，為了符合 device 真正寬度，必須設定 viewport 的 width 等於 device-width。 另外可以針對使用者可否放大或縮小螢幕，以及是否可以縮放 initial-scale: 畫面初始化倍率 maximum-scale: 畫面最大倍率 minimum-scale: 畫面最小倍率 user-scalable: 用戶是否可以縮放畫面 設定 Web Applications 設定將網頁儲存為 home screen icon 的圖片路徑，預設值為 57×57 定義其他裝置 size 圖片 設定載入頁面時 loading 圖片 隱藏底部 iPhone button bar，看起來更像 iPhone App 更改 status bar 樣式 另外一個重點，當網頁載入完成後，可以隱藏 URL bar 如果旋轉裝置，則必須在加上 resize event 如果不想讓使用者滑動網頁，可以加入底下 Reference: Configuring an iPhone Web App With Meta TagsiOS Developer Library
HOW TO: Convert Videos for Your iPhone (or Any Mobile Device) Video on devices like the iPod, iTouch and iPhone look great because of their MPEG-4 H.264 format. The good news is that there are tons of videos that you can purchase from the iTunes store, but the bad news is that you'll go broke in a hurry downloading everything you want. Sure, some of the videos aren't much ($1.99 each), but the numbers add up really quickly. Thankfully, there are a slew of sites and software packages that will allow you to convert just about any video format to the H.264 mp4 format that Apple devices require. Sites & Software ConvertTube is a free service that converts online videos to several formats including the MP4 format that you need for Apple devices. While the service is extremely simple to use, it must be mentioned that it can take an eternity sometimes for this service to convert even the smallest video. VideoDownloader is similar to ConvertTube except it doesn't provide you with any output options. Video for Other Platforms Must-Have Video Player Conclusion
XHTML™ Basic 1.1 - Second Edition W3C Recommendation 23 November 2010 This version: Latest version: Previous version: Diff-marked from previous version: xhtml-basic-diff.html Previous recommendation: xhtml-basic-rec-diff.html Editor: Shane McCarron, Applied Testing and Technology, Inc. email@example.com Version 1.1 Editors: Shane McCarron, Applied Testing and Technology, Inc.Masayasu Ishikawa, (until March 2007 while at W3C) Version 1.0 Editors: Mark Baker, Sun Microsystems Masayasu Ishikawa, (until March 2007 while at W3C) Shinichi Matsui, Panasonic Peter Stark, Ericsson Ted Wugofski, Openwave Systems Toshihiko Yamakami, ACCESS Co., Ltd. Please refer to the errata for this document, which may include some normative corrections. This document is also available in these non-normative formats: PostScript version, PDF version, ZIP archive, and Gzip'd TAR archive.
Mobile Web The mobile web refers to access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone or a feature phone, connected to a mobile network or other wireless network. Traditionally, access to the Web has been via fixed-line services on laptops and desktop computers. However, the Web is becoming more accessible by portable and wireless devices. An early 2010 ITU (International Telecommunication Union) report said that with the current growth rates, web access by people on the go — via laptops and smart mobile devices – is likely to exceed web access from desktop computers within the next five years. The shift to mobile Web access has been accelerating with the rise since 2007 of larger multitouch smartphones, and of multitouch tablet computers since 2010. The Mobile Web has also been called Web 3.0, drawing parallels to the changes users were experiencing as Web 2.0 websites proliferated. Mobile access
CSS tutorial - Media types CSS provides an easy way to target browsers on different types of devices, or different uses. For example, the design you produce for a normal desktop browser may not be suitable for a handheld device, or a printer. These are known as media types. There are several media types, and most browsers will generally concentrate on just one or two, depending on what they are designed to be used for. All major browsers use screen media as their default, and will apply screen media when viewing a Web page normally. In theory, a browser should only apply one media type at any time. Most of the normal styles are available to all media types, but there are some styles that only make sense in some media types. If your design does not work well in other modes, you should consider adding different styles for different media types. By default, stylesheets apply to all media types. You can also use the media type to signify that the stylesheet is for all media types. Special notes for handhelds OpenWave
Widgets Current Status This page summarizes the relationships among specifications, whether they are finished standards or drafts. Below, each title links to the most recent version of a document. Completed Work W3C Recommendations have been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and are endorsed by the Director as Web Standards. Group Notes are not standards and do not have the same level of W3C endorsement. Standards Group Notes Drafts Below are draft documents: other Working Drafts . Other Working Drafts
Bring Basecamp with you Highly recommended. Primarily through word-of-mouth alone, Basecamp has become the world’s #1 project management tool. For the last 10 years, companies have been switching to Basecamp because it’s famously easy-to-use, reliable, and It Just Works™. Combine that with our best-in-the-biz customer service, and you’ve got a unique and delightful package. A track record you can trust. We’ve been in business for 15 years, so you can depend on us to be here when you need us. On the Mac, PC, iPhone/iPad, Android and via email. Basecamp’s at home on Safari (Mac, iPhone/iPad), Chrome (Mac, PC, iPhone/iPad, Android), Firefox (Mac, PC), and IE 9+ (PC, Surface). No “IT Guy” required. Basecamp runs in the cloud on our secure servers, so you don’t have to mess with anything technical. Can I see how other people use Basecamp? Absolutely. Free weekly classes + live Q&A. We also offer weekly “Be a Basecamp Pro in 30 minutes” online classes with live Q&A. Who else uses Basecamp? A few quick reads and links.
7 usability guidelines for websites on mobile devices Mobile Internet is continuing to grow very quickly. These guidelines will help you create or improve your mobile user experience. 1. Reduce the amount of content Not everything shown on a PC site can fit reasonably onto a mobile web page, where space is short and every pixel counts. It's important to reduce the amount of content shown on the mobile-optimised version. Only include the most important content or features. Mobile websites should be very focused. 2. Wide web pages are difficult to view on small mobile phone screens. Remove low priority content and present content using a single column layout Instead, create single column pages that use up the whole width of the screen. 3. It's difficult to fit the navigation across the top of the screen on a mobile web page. On the homepage place the navigation and site search at the top of the page, and leave content for later pages. 4. Ways to reduce the amount of text entry required include: 5. One of Facebook's 3 main mobile versions. 6. 7.
Mobile Web Best Practices 1.0 [THEMATIC_CONSISTENCY] Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices. [CAPABILITIES] Exploit device capabilities to provide an enhanced user experience. [DEFICIENCIES] Take reasonable steps to work around deficient implementations. [TESTING] Carry out testing on actual devices as well as emulators. [URIS] Keep the URIs of site entry points short.
設計行動裝置網頁(Mobile-Web)的10個要素 ［image credit:Basecamp mobile］ Mashable的Brian Casel(@CasJam)是一個網頁設計師， 他觀察到網路行動化的趨勢越來越值得被重視，因為使用手機上網的人比以前多了很多，這對網頁設計者以及網頁擁有人來說意味著甚麼呢？ Casel告訴我們以後除了電腦版的網頁，也要做出一個對應手機或行動裝置的網頁。 我們整理編譯了Casel給網頁設計者的十個重要提醒，包括了設計過程，設計策略及實際操作，希望大家在設計及推出網頁的時候先認真地研究一番手機網頁及電腦網頁的不同。 1 確立網頁設計的內容，方向及類型 執行一個網頁設計的計劃前先要確定的一些方向： 全新網頁設計－是為某產品/品牌做一個新的網頁，包括電腦頁面及行動裝置頁面嗎？ 以上3個不同的情況都有不同的設計策略，是網頁設計者開始做網頁設計前必須要釐清的。 2 確定公司/品牌所要表達的形象 很多時候，網頁設計者/開發者需要為公司設計一個網頁，因此首要注意的是公司的形象及產品的特色，Casel舉了hyundai汽車網頁來做例子： 當我們進入hyundai(hyundai.com)汽車的網站，立刻看到的是他們汽車的大圖，目的就是要給消費者一個鮮明的汽車形象，讓大家知道他們的汽車外型有多吸引人: 接著我們看到行動版本的網頁，表達的內容跟電腦版網頁一樣，汽車的形象依然清楚的呈現在消費者面前，沒有太多複雜的界面，因為Hyundai公司對網頁的訴求就是要用鮮明的汽車圖片抓住消費者的目光。 以上是Hyundai.com的網頁，如果我們用手機及電腦上Hyundai.com，會出現的畫面不會是上面的示範，而會Hyundai.com/TW/en， 而台灣版的網頁在我們實際研究下，似乎就跟上面Hyundai.com的版本有點落差。 3 在設計行動裝置版網頁前務必預測網站流量 如果是要用舊有的電腦版網站為藍本，重新設計行動裝置版的網頁（目前這種案例居多），建議先用Google Analytics或其他測量網頁流量的工具來作一些訪客背景調查，能夠掌握越多關於網站訪客的資料越好， 例如：大部分訪客是用甚麼樣的裝置或瀏覽器來看網站的？ 4 學習如何設計可自動調整版面的網頁設計（Responsive Web Design） 5 簡單，但不能簡陋 6 網頁模板建議採用單欄式設計（Single－Column Layouts） 7 善用摺疊式目錄
State of the Mobile Web December 2009: Opera Mini is now 4 years old, has 46.3 million users In November 2005 Opera Mini went public in a limited trial offered to only Sweden and Norway. A few months later, January 2006, it would be released globally, and this month Opera is celebrating 4 years of having their wickedly awesome Opera Mini browser available around the world. As per every month in recent history, Opera has released their “State of the Mobile Web” report that analyzes what Opera Mini users are doing. The fact that every single web site you visit using Opera Mini has to go through one of their servers to be compressed offers an amazing amount of insight into user behavior. During December 2009 there were a total of 46.3 million people using Opera Mini, and this is the first time in history that number is equal to the amount of people using the desktop version of Opera. That’s 11.0% more than November 2009 and 159% more than December 2008. This “State of the Mobile Web” focuses on South East Asia and social networking. About The Author Stefan Constantinescu