Programming the Mobile Web. Reaching Users on iPhone, Android, BlackBerry, Windows Phone, and more. 2nd Edition (e-book) Gliwice

With the second edition of this popular book, youll learn how to build HTML5 and CSS3-based apps that access geolocation, accelerometer, multi-touch screens, offline storage, and other features in todays smartphones, tablets, and feature phones. The market for mobile apps continues to evolve at a breakneck pace, and this book is the most complete reference available for the mobile web. Author and mobile development expert Maximiliano Firtman shows you how to develop a standard app core that you can extend to work with specific devices. This updated edition covers many recent advances in mobile development, including responsive web design techniques, offline storage, mobile design patterns, and new mobile browsers, platforms, and hardware APIs. Learn the particulars and pitfalls of building mobile websites and apps with HTML5, CSS, JavaScript and responsive techniques Create effective user interfaces for touch devices and different resolution displays Understand variations among iOS, Android, Windows Phone, BlackBerry, Firefox OS, and other mobile platforms Bypass the browser to create native web apps, ebooks, and PhoneGap applications Build apps for browsers and online retailers such as the App Store, Google Play Store, Windows Store, and App World Spis treści: Programming the Mobile Web Dedication Preface Who This Book Is For Who This Book Is Not For What Youll Learn Other Options If You Like (or Dont Like) This Book Conventions Used in This Book Using Code Examples Safari Books Online How to Contact Us Acknowledgments 1. The Mobile Jungle The Mobile Ecosystem What Is a Mobile Device? Portable Personal Companion Easy to use Connected Mobile Device Categories Mobile phones Feature phones Social phones Smartphones Tablets Nonphone mobile devices Netbooks Brands, Models, and Platforms Apple iOS Android Versions Googles Nexus devices Fragmentation Windows Windows Phone Windows 8 Windows Mobile and Embedded Compact Nokia Windows Phone Tablets Series 40 Symbian MeeGo BlackBerry The PlayBook tablet BlackBerry 10 Samsung Sony Mobile Motorola Mobililty Amazon LG Mobile HTC HP and Palm Firefox OS Ubuntu for Phones Chinese Platforms Other Platforms Smart TV Platforms Technical Information 2. Understanding the Mobile Web Myths of the Mobile Web Its Not the Mobile Web; Its Just the Web! You Dont Need to Do Anything Special About Your Desktop Website One Website Should Work for All Devices (Desktop, Mobile, TV) Just Create an HTML File with a Width of 320 Pixels, and You Have a Mobile Website Native Mobile Applications Will Kill the Mobile Web People Are Not Using Their Mobile Browsers What Is the Mobile Web? Differences Mobile Web Eras WAP 1 WAP 2.0 The dotMobi era The iPhone era The mobile HTML5 era The Mobile Browsing Experience Navigation Methods Zoom Experience Reflow Layout Engines Direct Versus Cloud-Based Browsers Multipage Experience Web Engines Rendering engines JavaScript engines Fragmentation Display Resolution Physical dimensions Pixel density ratio Aspect ratio Input Methods Other Features Market Statistics 3. Browsers and Web Platforms Web Platforms That Are Not Browsers HTML5 Web Apps iOS web apps Chrome apps Firefox open web apps Symbian standalone web apps S40 web apps Samsung web API Web Views Pseudo-Browsers Native Web Apps, Packaged Apps, and Hybrids Platform-specific solutions Apache Cordova and Adobe PhoneGap Sencha Touch Appcelerator Titanium Ebooks Mobile Browsers Preinstalled Browsers Safari on iOS Android browser Google Chrome Amazon Silk Internet Explorer Nokia Browser Nokia Browser for Series 40 Nokia Browser for Symbian Nokia Browser for MeeGo webOS browser BlackBerry browser UC Browser Samsung Dolfin & Jasmine LG Phantom NetFront Myriad browser Obigo browser Legacy mobile browsers MicroB for Maemo Sony Mobile (formerly Sony Ericsson) browsers Motorola Mobile Internet Browser (MIB) User-Installable Browsers Opera Mobile Opera Mini Firefox Dolphin Baidu Browser SkyFire Browser Overview 4. Tools for Mobile Web Development Working with Code Adobe Dreamweaver Adobe Edge Tools Microsoft Visual Studio and WebMatrix Eclipse Native Web IDEs Testing Emulators and Simulators Android emulator iOS Simulator Nokia emulators BlackBerry simulators Ripple BlackBerry smartphones PlayBook and BB10 webOS emulator Windows emulators Opera Mobile Emulator Opera Mini Simulator Other official emulation platforms Adobe Device Central Keynote MITE Comparison Remote emulation services BrowserStack Browshot Real Device Testing Adobe Edge Inspect Remote Labs Nokia Remote Device Access Samsung Remote Test Lab Keynote DeviceAnywhere Usage for mobile web testing Testing automation Perfecto Mobile Pricing structure Main features Production Environment Web Hosting Domain Error Management Statistics 5. Architecture and Design Mobile Strategy When to Get Out of the Browser Context Server-Side Adaptation Progressive Enhancement Responsive Web Design Responsive layouts Responsive images RESS Navigation Design and User Experience Touch Design Patterns Tablet Patterns Official UI Guidelines What Not to Do 6. Markups and Standards First, the Very Old Ones WML Current Standards Politics of the Mobile Web Managing multiple standards Delivering Markup Charset encoding Conclusion about MIME types and DOCTYPEs XHTML Mobile Profile and Basic Available Tags Official Noncompatible Features Creating Our First Compatible Template Markup Additions Mobile HTML5 Creating Our First HTML5 Template Syntax Rules New Elements CSS for Mobile WCSS Extensions Access keys Marquees CSS form extensions CSS3 HTML5 Compatibility Levels Testing Your Browser HTML5 Test Ringmark 7. Basics of Mobile HTML5 The Document Head Title Website Icons Home Screen Icons Apple Touch Icons Icon titles Other platforms using Apples link Nokia Browser for Symbian Nokia Browser for MeeGo BlackBerry browser Android browser Windows Start tiles Live badge notifications Summary of Home screen icon compatibility Native and installed web app icons The Viewport The problem Viewport declaration What is device width? Give me back the pixels Landscape behavior Viewports in CSS Viewport compatibility Viewports for older devices Changing the Navigation Method Removing Automatic Links Metadata for Sharing Hiding the URL Address Bar Native App Integration iOS Smart App Banners Windows Store app connections The Document Body Main Structure Go to top HTML5 Mobile Boilerplate The Content Block Elements Lists Tables Frames Links New windows Navigation lists Accessibility WAI-ARIA Accessibility testing 8. HTML5 Forms Form Design Form Elements Select Lists Option groups Radio Buttons and Checkboxes Buttons Hidden Fields Text Input Fields Data lists for suggestions Multiline text controls Rich text controls contenteditable WYSIHTML5 Pop-up controls Range Slider Fields Date Input Fields File Selection Fields Actions with files The HTML Media Capture extension Mobile browser compatibility Noninteractive Form Elements Form Control Attributes Placeholder autofocus autocomplete readonly Input Validation Attributes Safari Extensions Firefox Extensions XHTML Mobile inputmode Additional Form Attributes Form Validation HTML5 Validation CSS validation pseudoclasses Constraints validation API WAP CSS Validation 9. Feature and Device Detection Possible Problems Possible Solutions About polyfills Informational Websites Can I Use MobileHTML5.org WebPlatform.org Client-Side Detection HTML Fallbacks CSS Fallbacks CSS conditionals Vendor Prefixes CSS preprocessors SASS LESS -prefix-free Static tools for prefixes JavaScript Fallbacks Are you there? Vendor prefixes Modernizr Conditional loading All the properties HTML5 main features CSS main mobile features Other features Polyfills Platform Detection Detect Mobile Browsers Server-Side Detection HTTP The request The request header The user agent What we can identify The User Agent Profile User agent tricks Detecting the Context How to read a header How to read the IP address Cloud-Based Browsers Opera Mini Xpress browser Amazon Silk Mobile Detection Transcoders Device Libraries WURFL Architecture Capabilities WURFL Standalone API (OnSite) PHP API installation Using the PHP API The WURFL Cloud API DeviceAtlas Properties Cloud API DetectRight Movila DetectFree 51Degrees.mobi OpenDDR 10. Images and Media Images Image Formats Animation formats 3D formats Inline images Format compatibility Using the img Element Responsive Images Sencha.io Src Local Pictograms ISO pictograms OMA pictograms Dealing with Multiple Screen Densities Using Vector-Based Solutions Providing One Single Image Using img elements Using background images Providing Image Alternatives Using devicePixelRatio Using media queries Using image sets The picture element SVG Tools for SVG SVG for beginners Embedding the SVG in XHTML Embedding the SVG using img Inline SVG Raphaël Canvas The context Lines and strokes Drawing methods Advanced features Canvas as native code Canvas as a background Exporting canvas drawings Canvas and pixel density WebGL Canvas compatibility Adobe Flash Video Containers and Codecs Reference movies for iOS Delivering Video Linking to video files The HTML5 video Element Advanced declarations Providing fallbacks Video player API Streaming to Apple TV Streaming HTTP Live Streaming Embedding with object Video Compatibility Audio Invisible Audio Player Web Audio API Audio Compatibility 11. CSS for Mobile Browsers Where to Insert the CSS Media Queries CSS3 Media Queries Media features all versus only screen Useful queries CSS4 media queries Internet Explorer 10 snap state Selectors CSS Techniques Reset CSS Files Text Formatting Font family CSS3 font-face Font size Text shadows Text overflow Text adjustment for small screens Text stroke and fill Multicolumn layout Common Patterns Display Properties Absolute and floating positions Fixed position Modern layout techniques Rounded Corners Border Image Pseudoclasses Backgrounds Scrollable Areas Content Opacity Cursor Management Selection Management Selection styles Touch Callout Highlight Color Appearance Override CSS Sprites Samples and Compatibility CSS Sprites Alternatives Inline images Join images CSS3 Modules Gradients Reflection Masks Transforms Perspective Transform style Backface visibility The CardFlip pattern Transitions Animation properties Transition ending Animations @keyframes Animation events CSS Filter Effects CSS Regions and Exclusions New CSS Values and Units 12. JavaScript Mobile Coding for Mobile Browsers HTML5 Script Extensions Code Execution Cloud-Based Browsers Nokia Mobile Web Library JavaScript Debugging and Profiling Battery Consumption Background Execution Status Detection The Page Visibility API Wakeup detection using timers Background Tab Notification Trick Background Execution Compatibility Push Notifications Supported Technologies The Document Object Model The Selectors API JSON Binary Data Web Workers HTML5 APIs Native Web App APIs Standard JavaScript Behavior Standard Dialogs History and URL Management History API extensions The hashchange event Manipulating Windows Focus and Scroll Management Timers Animation timing Changing the Title Cookie Management Event Handling Managing events Load and unload events Click events Double tap Focusable and form events Over events Resizing, scrolling, and orientation change events Key events Useful keys for some devices Preventing default behavior JavaScript Libraries Mobile Libraries Zepto.js baseJS jQMobi QuoJS XUI UI Frameworks Sencha Touch jQuery Mobile Enyo Montage iUI jQTouch JavaScript Mobile UI Patterns Clear text box buttons Autogrowing textareas Floating bars Cascading menus Autocompletion 13. Offline Apps, Storage, and Networks Offline Web Apps The Manifest File Reusing the manifest Accessing Online Resources Fallbacks Updating the Package Deleting the Package The JavaScript API Cache events Compatibility and Limits Client-Side Storage Web Storage Limits The Web SQL Database API Limits The IndexedDB API The FileSystem API User Intervention Debugging Storage Network Communication Ajax Cross-domain requests JSONP Ajax with offline resources Server Sent Events The server component WebSockets Socket.IO 14. Geolocation and Maps Location Techniques Accuracy Indoor Location Client Techniques GPS A-GPS Cell information WiFi Positioning System Server Techniques IP address Carrier connection Language Indoor location Asking the User Detecting the Location The W3C Geolocation API Getting the position Handling error messages Tracking the location Defining optional attributes Geolocation API 2.0 Carrier Network Location APIs GSMA OneAPI Specific carriers APIs IP Geolocation Reading the IP address Googles ClientLocation object Maps/Navigation App Integration Google Maps for Android Directions and navigation Street View iOS Maps Directions and navigation Bing Maps Showing a Map Google Maps API v3 Google Maps Static API Nokia Here 15. Device Interaction Mobile-Specific URIs Making a Call Sending Email Sending an SMS Other Communication Apps Adding a Contact to the Phonebook Integrating with Other Applications iOS URL schemes X-Callback-URL Android intents Symbian local applications Windows apps JavaScript APIs Touch Apple Touch Events API Disabling scrolling BlackBerry touch behavior W3C Touch Event API Compatibility Microsoft pointer events Pointer detection Touch action style Working with the touches and clicks Simulating touch on desktops Gestures Swipe gesture Frameworks Apple Gesture API Microsoft Gesture API Starting a gesture detection Gesture change values Sensors DeviceOrientation Event Moving a ball Compass information Apache Cordova API Network Information Old specification New specification File Management Full FileSystem API Full Screen Web Notifications Camera getUserMedia Apache Cordova APIs Battery Vibration Other APIs W3C Apache Cordova Mozilla For the future 16. Native and Installed Web Apps Web App Pros and Cons Architecture of a Web App Meta Configuration Platform Access Data Storage Network Access Logic User Interface Packaging Distribution Standards Packaging and Configuration Standards Official Platforms iOS Web Apps iOS web app pros and cons Full-screen meta tag Changing status bar appearance Defining startup images How it looks APIs Links Distribution Cubiq Add to Home Screen Symbian Standalone Web Apps Windows 8 Store Apps Windows Runtime WinJS JavaScript UI controls Application UI state Navigation Advanced topics Mozilla Open Web Apps App origin App manifest Distribution Checking if the app is already installed Chrome Apps Samsung Web Apps BlackBerry WebWorks Apps Configuration file WebWorks APIs bbUI.js Packaging and signing Ripple Distribution Nokia S40 Web Apps Configuration Mobile Web Library Gesture and keypad events Storage API Tools Distribution Nokia Symbian Web Apps Package Features JavaScript API MiniView Tools and libraries Distribution Apache Cordova/PhoneGap Apps Template Creation Cordova Web View CordovaJS DeviceReady event Other events APIs Notification API Plug-ins Distribution iOS App Store Android Stores BlackBerry AppWorld Microsoft Windows Store Microsoft Windows Phone Store Full-Screen App Patterns Multiple Views Layout Input Method One-View Widget Dynamic Application Engine Reload My Web App Live Reload 17. Content Delivery MIME Types Static Definition Apache Internet Information Server Dynamic Definition File Delivery Direct Linking Delayed Linking OMA Download Download descriptor Post-download status report Application and Games Delivery iOS Applications Ad hoc OTA installation Android Applications Bypassing the store Windows Applications Java ME Serving JAD files Java ME for BlackBerry 18. Debugging and Performance Debugging Server-Side Debugging User agent spoofing HTTP sniffing Bandwidth simulators Markup Debugging HTML5 validators W3C mobileOK Checker ready.mobi Client-Side Debugging iOS Remote Web Inspector Connecting the session Working with the session Older iOS debugging tools Chrome for Android debugger Firefox remote debugging BlackBerry remote Web Inspector Opera Dragonfly Android Debug Bridge Weinre JSConsole Bookmarklet solutions Other web-based solutions Performance Optimization Measurement Remote profilers HTTP proxies Akamai Mobitest Performance APIs Best Practices Reducing requests Compressing HTTP compression Other tips JavaScript performance 19. Distribution and Social Web 2.0 Mobile SEO Spiders and Discoverability Mobile Sitemaps How Users Find You SMS Invitation Email Invitation Mobile Tiny URL QR Codes NFC Tags User Fidelizing Web Shortcuts RSS Open Search Apple Passbook Mobile Web Statistics Google Analytics for Mobile Yahoo! Web Analytics Mobilytics Monetizing Your Website Mobile Advertisements Google AdSense for mobile content Mobile Web Social Features Authentication and Sharing APIs Facebook Connect Twitter for Websites Google APIs Sharing Content A. MIME Types for Mobile Content Markup and Script MIME Types Image MIME Types Mobile Content MIME Types Audio and Video MIME Types Webapp MIME Types Index About the Author Colophon Copyright