Build Mobile Websites and Apps for Smart Devices PDF
Preview Build Mobile Websites and Apps for Smart Devices
Pantone: CMYK: BUILD MOBILE Grey scale WEBSITES AND APPS PANTONE Orange 021 C PANTONE 2955 C FOR SMART DEVICES CMYK O, 53, 100, 0 CMYK 100, 45, 0, 37 Black 50% Black 100% BY EARLE CASTLEDINE MYLES EFTOS & MAX WHEELER WHIP UP TASTY MORSELS FOR A NEW GENERATION OF MOBILE DEVICES www.it-ebooks.info Untitled-1 1 17/06/11 6:08 PM 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 www.it-ebooks.info BUILD MOBILE WEBSITES AND APPS FOR SMART DEVICES BY EARLE CASTLEDINE MYLES EFTOS MAX WHEELER www.it-ebooks.info iv Build Mobile Websites and Apps for Smart Devices byEarleCastledine,MylesEftos,andMaxWheeler Copyright©2011SitePointPty.Ltd. Program Director:LisaLang Indexer:MicheleCombs Technical Editor:LouisSimoneau Editor:KellySteele Expert Reviewer:Peter-PaulKoch Cover Design:AlexWalker Printing History: FirstEdition:June2011 Notice of Rights Allrightsreserved.Nopartofthisbookmaybereproduced,storedinaretrievalsystem,ortransmittedinanyformorby anymeanswithoutthepriorwrittenpermissionofthepublisher,exceptinthecaseofbriefquotationsincludedincritical articlesorreviews. Notice of Liability Theauthorandpublisherhavemadeeveryefforttoensuretheaccuracyoftheinformationherein.However,theinformation containedinthisbookissoldwithoutwarranty,eitherexpressorimplied.NeithertheauthorsandSitePointPty.Ltd.,nor itsdealersordistributors,willbeheldliableforanydamagescausedeitherdirectlyorindirectlybytheinstructionscontained inthisbook,orbythesoftwareorhardwareproductsdescribedherein. Trademark Notice Ratherthanindicatingeveryoccurrenceofatrademarkednameassuch,thisbookusesthenamesonlyinaneditorial fashionandtothebenefitofthetrademarkownerwithnointentionofinfringementofthetrademark. PublishedbySitePointPty.Ltd. 48CambridgeStreet,Collingwood VIC3066Australia Web:www.sitepoint.com Email:[email protected] ISBN978-0-9870908-4-3 PrintedandboundintheUnitedStatesofAmerica www.it-ebooks.info v About Earle Castledine SportingaMastersinInformationTechnologyandalifetimeofexperienceontheWebofHardKnocks,Earle Castledine(akaMrSpeaker)holdsaninterestineverythingcomputery.Raisedinthewildbyvarious8-bit homecomputers,hesettledintheInternetduringthemid-ninetiesandhasbeenworkingthereeversince. HeiscurrentlycontributingtowardsJavaScript’sworlddominationplans,creatingMobileWebApplications, developingsnazzyframeworks,anddrinkingvinrougewithsomesuper-smartguysatZenexityinParis. Asco-creatoroftheclient-sideopusTurnTubelist(http://www.turntubelist.com/),aswellascountlessweb- basedexperiments,EarlerecognizestheInternetnotasalubricantforsocialchange,butasavehicleforun- leashingfrivolousECMAScriptgadgetsandinterestingtime-wastingtechnologies. About Myles Eftos MylesEftosisaPerth-basedwebdeveloperwhofeelsjustasathomebuildingINNERJOINSascalculating thespecificityofCSSselectors.Hehasworkedinallthemajorweblanguages,hisweaponofchoicebeing RubyonRails—althoughhe’sfoundhimselfdoingmorefront-enddevelopmentinJavaScript,HTML,and CSS. UnderthemonikerofMadPilotProductions(http://www.madpilot.com.au),hehasworkedonanumberof applicationssuchas88Miles(http://www.88miles.net).ThisalsoincludesappsfortheiPhoneandiPadusing PhoneGap,suchasthepopularCounterCulture(http://www.countercultureapp.com). HeisratherexcitedthatJavaScriptisfinallyreceivingthekudositdeservesasaseriouslanguage. About Max Wheeler Aninteractiondesigner,MaxWheelerbelievesinteractivemediashouldfunctionasbeautifullyasitlooks. CurrentlyresidinginCanberra,Australia,heworkswithIcelab(http://icelab.com.au/),amedia-agnosticdesign agencyfilledwithnice,well-caffeinatedpeople.Asidefromclientwork,Icelab’sprojectsincludethecommunity- orientedDecafSucksandrealestatestartupRentMonkey. WhenMaxisnotdesigningorbuildingfortheWeb,hetakesphotographs,travelstheworld,playsUltimate frisbeeforAustralia,anddrinkstwicethedailyrecommendedintakeofespresso.Onoccasion,he’sbeen knowntodropinatWebDirectionsSouthtospeakaboutbuildingmobilewebapplications. About the Expert Reviewer Peter-PaulKochisamobileplatformstrategist,consultant,andtrainerinAmsterdam,theNetherlands.ppk (asheisuniversallyknownontheWeb)specializesinHTML,CSS,JavaScript,andbrowsercompatibility.He hasearnedinternationalrenownwithhisbrowser-compatibilityresearch,andpublicationssuchas http://www.quirksmode.org/blog.Afrequentspeakeratconferences,ppkfoundedFronteers—theDutchasso- ciationoffront-endprofessionals—andadvisesbrowservendorsontheirimplementationofwebstandards. In2009,ppkshiftedfromdesktopbrowsersandsitestothemobileweb,anddiscoveredthatmobiledevices areinmoreneedofdescriptionthantheirdesktopcounterparts.Hehassethimselftothetask. www.it-ebooks.info vi About SitePoint SitePointspecializesinpublishingfun,practical,andeasy-to-understandcontentforwebprofessionals.Visit http://www.sitepoint.com/toaccessourblogs,books,newsletters,articles,andcommunityforums. www.it-ebooks.info ForAmy —Earle ForGiovanna —Myles ForLexiandFrank —Max www.it-ebooks.info www.it-ebooks.info 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 1 Introduction 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 www.it-ebooks.info x Chapter 2 Design 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 www.it-ebooks.info
Description:The list of books you might like
