Table Of Content

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:
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
ebook img

Build Mobile Websites and Apps for Smart Devices PDF

280 Pages·2016·9.4 MB·English
by  Earle Castledine
Save to my drive
Quick download
Download

Download Build Mobile Websites and Apps for Smart Devices PDF Free - Full Version

by Earle Castledine| 2016| 280 pages| 9.4| English

Download Build Mobile Websites and Apps for Smart Devices by Earle Castledine in PDF format completely FREE. No registration required, no payment needed. Get instant access to this valuable resource on PDFdrive.to!

Free Download PDF

About Build Mobile Websites and Apps for Smart Devices

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

Detailed Information

Author:Earle Castledine
Publication Year:2016
Pages:280
Language:English
File Size:9.4
Format:PDF
Price:FREE
Download Free PDF

Safe & Secure Download - No registration required

Why Choose PDFdrive for Your Free Build Mobile Websites and Apps for Smart Devices Download?

  • 100% Free: No hidden fees or subscriptions required for one book every day.
  • No Registration: Immediate access is available without creating accounts for one book every day.
  • Safe and Secure: Clean downloads without malware or viruses
  • Multiple Formats: PDF, MOBI, Mpub,... optimized for all devices
  • Educational Resource: Supporting knowledge sharing and learning

Free Books Similar to Build Mobile Websites and Apps for Smart Devices

Frequently Asked Questions

Is it really free to download Build Mobile Websites and Apps for Smart Devices PDF?

Yes, on https://PDFdrive.to you can download Build Mobile Websites and Apps for Smart Devices by Earle Castledine completely free. We don't require any payment, subscription, or registration to access this PDF file. For 3 books every day.

How can I read Build Mobile Websites and Apps for Smart Devices on my mobile device?

After downloading Build Mobile Websites and Apps for Smart Devices PDF, you can open it with any PDF reader app on your phone or tablet. We recommend using Adobe Acrobat Reader, Apple Books, or Google Play Books for the best reading experience.

Is this the full version of Build Mobile Websites and Apps for Smart Devices?

Yes, this is the complete PDF version of Build Mobile Websites and Apps for Smart Devices by Earle Castledine. You will be able to read the entire content as in the printed version without missing any pages.

Is it legal to download Build Mobile Websites and Apps for Smart Devices PDF for free?

https://PDFdrive.to provides links to free educational resources available online. We do not store any files on our servers. Please be aware of copyright laws in your country before downloading.

The materials shared are intended for research, educational, and personal use in accordance with fair use principles.

We use cookies

We use cookies to ensure you get the best browsing experience on our website. By clicking "Accept Cookies", you agree that we can store cookies on your device in accordance with our Terms and Privacy.