HTML5 Mobile Development Cookbook

HTML5 Mobile Development Cookbook

Shi Chuan

Language: English

Pages: 153

ISBN: 1849691967

Format: PDF / Kindle (mobi) / ePub


Recipes for building fast, responsive HTML5 mobile websites for iPhone 5, Android, Windows Phone and Blackberry
* Solve your cross platform development issues by implementing device and content adaptation recipes.
* Maximum action, minimum theory allowing you to dive straight into HTML5 mobile web development.
* Incorporate HTML5-rich media and geo-location into your mobile websites.

In Detail

How do I create fast and responsive mobile websites that work across a range of platforms? For developers dealing with the proliferation of mobile devices each with unique screen sizes and performance limitations, it is an important question. This cookbook provides the answer. You will learn how to apply the latest HTML5 mobile web features effectively across a range of mobile devices.

HTML5 Mobile Development Cookbook will show you how to plan, build, debug and optimize mobile websites. Apply the latest HTML5 features that are best for mobile, while discovering emerging mobile web features to integrate in your mobile sites.

Build a rock-solid default mobile HTML template and understand mobile user interaction. Make your site fast and responsive, leveraging the uniqueness of location-based mobile features and mobile rich media. Make your mobile website perfect using debugging, performance optimization and server-side tuning. The book finishes with a sneak preview of future mobile web technologies.

What you will learn from this book
* Master the art of mobile web design for multiple platforms.
* Execute best practice guidelines for cross platform development.
* Create fast and responsive mobile websites.
* Debug mobile websites efficiently and effectively.
* Leverage HTML5 multimedia features such as Canvas and SVG for the mobile web.
* Build HTML5 geo-location based applications.
* Take a sneak peek into the exciting world of emerging mobile web technologies such as AJAX 2.
* Integrate your mobile websites with Facebook and Twitter.

Approach

The book is written in a cookbook style, presenting examples in the style of recipes, allowing you to go directly to your topic of interest, or follow topics throughout a chapter to gain in-depth knowledge.

Who this book is written for

Developers keen to create HTML5 mobile websites that are fast and responsive across a whole range of mobile devices.

The Bottom Billion: Why the Poorest Countries are Failing and What Can Be Done About It

Idea to iPhone: The essential guide to creating your first app for the iPhone and iPad

Git Magic

jQuery Mobile Cookbook

Free Trade: Myth, Reality and Alternatives

MacRuby: The Definitive Guide: Ruby and Cocoa on OS X

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

widthoptimizing Now the content width uses the screen width and the text becomes readable: How it works... When we set viewport width to device-width, it will tell the browser not to scale the page to fix the device area. So for iPhone, the device-width is 320 px in portrait mode and 480 px in landscape mode. There's more... For some really old relic mobile browsers, the meta attribute isn't recognized. To deal with these browsers, you need to use:

with media query Using dynamic loading Applying user agent detection Adding mobile bookmark bubble to the home page Building Contact page with textarea and autogrow forms Making buttons with instant response Hiding WebKit chrome Building a mobile sitemap Introduction On mobile devices, bandwidth is not always as good as on a desktop computer. If you are on a slow 3G network, things can get loaded much slower than on a Wi-Fi hotspot. Even for Wi-Fi connections, many mobile

How it works... At the top of the HTML document, we link to gears_init.js. If the browser doesn't have a geolocation API supported by default, but has Gears installed, the Gears API may return the geolocation data. For browsers that have the geolocation API, but just in a different method, the second script geo.js will be used to normalize the API. If geo_position_js.init() returns true, it means in one way or anther we are able to get the geolocation data. In this case we will proceed

body { height: auto; margin: 0; padding: 0; } #map_canvas { height: auto; position: absolute; bottom:0; left:0; right:0; top:0; }