Build Mobile Websites and Apps for Smart Devices
280 Pages
English

Build Mobile Websites and Apps for Smart Devices

-

Description

Build Mobile Websites and Apps for Smart Devices is a practical guide for front-end web designers and developers. You’ll discover a fun and fresh approach to mobile web design and development, with enormous scope for opportunity.

Mobile web development is changing rapidly, with a greater emphasis on modern touch-screen smartphones. By following the advice in this book, you can be sure you’re learning the skills youneed to make the most of this new technology.

You’ll learn how to:

  • Design effective interfaces for modern devices
  • Use HTML5 and CSS3 to build fast, responsive layouts that look great on every device
  • Use JavaScript to create a native feel with transitions, touch and swipe events, animations, and more
  • Introduces PhoneGap and shows readers how to add native functionally to their web app with ease
  • Leverage APIs to take advantage of built-in device functionality
  • Use PhoneGap to turn your web app into a native app for iOS, Android, BlackBerry, and other platforms—and sell it online

And lots more...


Subjects

Informations

Published by
Published 22 June 2011
Reads 0
EAN13 9781457192111
Language English
Document size 6 MB

Legal information: rental price per page €. This information is given for information only in accordance with current legislation.

Pantone:
CMYK:
Greyscale BUILD MOBILE WEBSITES AND APPSFOR SMART DEVICES BYEARLE CASTLEDINE MYLES EFTOS & MAX WHEELER
WHIP UP TAST Y MORSELS FOR A NEW GENERATION OF MOBILE DEVICES
Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii 1. Introduction to Mobile Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2. Design for Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 3. Markup for Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 4. Mobile Web Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 5. Using Device Features from Web Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 6. Polishing Up Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 7. Introducing PhoneGap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 8. Making Our Application Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 A. Running a Server for Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
BUILD MOBILE WEBSITES AND APPS FOR SMART DEVICES BYEARLE CASTLEDINE MYLES EFTOS MAX WHEELER
iv
Build Mobile Websites and Apps for Smart Devices by Earle Castledine, Myles Eftos, and Max Wheeler
Copyright©2011 SitePoint Pty. Ltd.
Program Director: Lisa Lang Technical Editor: Louis Simoneau Expert Reviewer: PeterPaul Koch Printing History: First Edition: June 2011
Indexer: Michele Combs Editor: Kelly Steele Cover Design: Alex Walker
Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means without the prior written permission of the publisher, except in the case of brief quotations included in critical articles or reviews.
Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors, will be held liable for any damages caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.
Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.
Published by SitePoint Pty. Ltd.
48 Cambridge Street, Collingwood VIC 3066 Australia Web: www.sitepoint.com Email: business@sitepoint.com
ISBN 9780987090843 Printed and bound in the United States of America
About Earle Castledine
v
Sporting a Masters in Information Technology and a lifetime of experience on the Web of Hard Knocks, Earle Castledine (aka Mr Speaker) holds an interest in everything computery. Raised in the wild by various 8bit home computers, he settled in the Internet during the midnineties and has been working there ever since.
He is currently contributing towards JavaScript’s world domination plans, creating Mobile Web Applications, developing snazzy frameworks, and drinkingvin rougewith some supersmart guys at Zenexity in Paris.
As cocreator of the clientside opus TurnTubelist (http://www.turntubelist.com/), as well as countless web based experiments, Earle recognizes the Internet not as a lubricant for social change, but as a vehicle for un leashing frivolous ECMAScript gadgets and interesting timewasting technologies.
About Myles Eftos
Myles Eftos is a Perthbased web developer who feels just as at home building INNER JOINS as calculating the specificity of CSS selectors. He has worked in all the major web languages, his weapon of choice being Ruby on Rails—although he’s found himself doing more frontend development in JavaScript, HTML, and CSS.
Under the moniker of MadPilot Productions (http://www.madpilot.com.au), he has worked on a number of applications such as 88 Miles (http://www.88miles.net). This also includes apps for the iPhone and iPad using PhoneGap, such as the popular Counter Culture (http://www.countercultureapp.com).
He is rather excited that JavaScript is finally receiving the kudos it deserves as a serious language.
About Max Wheeler
An interaction designer, Max Wheeler believes interactive media should function as beautifully as it looks. Currently residing in Canberra, Australia, he works with Icelab (http://icelab.com.au/), a mediaagnostic design agency filled with nice, wellcaffeinated people. Aside from client work, Icelab’s projects include the community oriented Decaf Sucks and real estate startup RentMonkey.
When Max is not designing or building for the Web, he takes photographs, travels the world, plays Ultimate frisbee for Australia, and drinks twice the daily recommended intake of espresso. On occasion, he’s been known to drop in at Web Directions South to speak about building mobile web applications.
About the Expert Reviewer
PeterPaul Koch is a mobile platform strategist, consultant, and trainer in Amsterdam, the Netherlands. ppk (as he is universally known on the Web) specializes in HTML, CSS, JavaScript, and browser compatibility. He has earned international renown with his browsercompatibility research, and publications such as http://www.quirksmode.org/blog. A frequent speaker at conferences, ppk founded Fronteers—the Dutch asso ciation of frontend professionals—and advises browser vendors on their implementation of web standards. In 2009, ppk shifted from desktop browsers and sites to the mobile web, and discovered that mobile devices are in more need of description than their desktop counterparts. He has set himself to the task.
vi
About SitePoint
SitePoint specializes in publishing fun, practical, and easytounderstand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums.
For Amy
For Giovanna
For Lexi and Frank
—Earle
—Myles
Max
Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii What’s in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii Where to Find Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix The SitePoint Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix The Book’s Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix The SitePoint Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx The SitePoint Podcast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx Your Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi Earle Castledine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi Myles Eftos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi Max Wheeler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
Chapter 1Introduction to Mobile Web Design. . . . . . . . . . . . . . 1 What does it mean? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Why does it matter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 The Natives Are Restless . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 The Problem with Going Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Start at the Beginning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 An App is not Enough . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Option One: Nada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Option Two: Transform and Move Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Option Three: Forever Alone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 A Note on Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Rolling Up Our Sleeves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
x
Chapter 2Design for Mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Build a Better Mouse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Hover Me . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Small Screens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Cognitive Load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Standing on the Shoulders of Giants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 The Carousel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Tab Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Putting It Into Practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Thinking Big . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Putting Together a User Profile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Deciding on a Core Feature Set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Sketches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Finding Sightings By Location . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Overview and Detail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Finding Sightings by Celebrity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Adding a Sighting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Tying It All Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 The Fix Is Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Home Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Establish a Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Touchable Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Interface Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Performance Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Testing Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Reviewing Our Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Application Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Ready to Shine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50