| |
| |
| |
| Introduction to HTML5/JS/CSS | |
| |
| |
| |
| Introduction to Mobile Web Development | |
| |
| |
| Mobile Web Examples | |
| |
| |
| Understanding Native Versus Web Platforms | |
| |
| |
| Pros and Cons of Native Versus Web Platforms | |
| |
| |
| Web-to-Native Solutions | |
| |
| |
| Devices and Operating Systems | |
| |
| |
| Design Aesthetics | |
| |
| |
| Dialog Boxes | |
| |
| |
| iOS Design Patterns | |
| |
| |
| Android Design Patterns | |
| |
| |
| Viewports | |
| |
| |
| Orientations | |
| |
| |
| Fonts | |
| |
| |
| Summary | |
| |
| |
| |
| Overview of Mobile Technologies | |
| |
| |
| HTML | |
| |
| |
| Key HTML5 Features | |
| |
| |
| CSS3 | |
| |
| |
| Key CSS3 Features | |
| |
| |
| Javascript | |
| |
| |
| jQuery | |
| |
| |
| XUI | |
| |
| |
| Zepto | |
| |
| |
| jQTouch | |
| |
| |
| UI Frameworks/Utilities | |
| |
| |
| Sencha Touch | |
| |
| |
| jQuery Mobile | |
| |
| |
| Modernizr | |
| |
| |
| iScroll | |
| |
| |
| Mustache/JavaScript Templates | |
| |
| |
| Summary | |
| |
| |
| |
| Application Setup and Infrastructure | |
| |
| |
| |
| Development and Production Setup | |
| |
| |
| Development Setup | |
| |
| |
| Implementing Local Hosting | |
| |
| |
| Setting Up MAMP (For Mac OS X) | |
| |
| |
| XAMPP for Windows | |
| |
| |
| Using IDEs to Write Your Web App | |
| |
| |
| Testing Your Code | |
| |
| |
| Setting Up the Production Environment | |
| |
| |
| Hosting | |
| |
| |
| Infrastructure Setup | |
| |
| |
| Managing Bandwidth | |
| |
| |
| Summary | |
| |
| |
| |
| Creating the Prototype | |
| |
| |
| Using HTML5 to Aid in Structure and Design | |
| |
| |
| Using the HTML5 Mobile Boilerplate | |
| |
| |
| Application Design | |
| |
| |
| Mocking Up Your Pages | |
| |
| |
| Settings/About | |
| |
| |
| Defining Hash Navigation | |
| |
| |
| Pushstate Navigation | |
| |
| |
| Summary | |
| |
| |
| |
| Mobile Web Structure | |
| |
| |
| Elements to Build | |
| |
| |
| Centering Your Content with Viewports | |
| |
| |
| Using Full App Mode (iOS Only) | |
| |
| |
| Adding Header and Navigation Elements | |
| |
| |
| Adding Hash Change Events | |
| |
| |
| Transitions | |
| |
| |
| Letting Users Scroll Through App Pages | |
| |
| |
| Allowing Your Application to Adapt to Orientation Changes | |
| |
| |
| Summary | |
| |
| |
| |
| Creating a Mobile Web Database | |
| |
| |
| Elements to Build | |
| |
| |
| Databases in HTML5 | |
| |
| |
| Summary | |
| |
| |
| |
| Development | |
| |
| |
| |
| Interacting with Web SQL | |
| |
| |
| Elements to Build | |
| |
| |
| Creating the Database and Its Tables | |
| |
| |
| Adding Values to the Color Table | |
| |
| |
| Building the Manage Wine Page | |
| |
| |
| Summary | |
| |
| |
| |
| Geolocation and AJAX | |
| |
| |
| Elements to Build | |
| |
| |
| Creating the Find Tab | |
| |
| |
| Creating the Callback | |
| |
| |
| Handling Location with Google Maps | |
| |
| |
| Using the Foursquare API to Find Venues | |
| |
| |
| Creating the Info Window | |
| |
| |
| Building the Refresh Button | |
| |
| |
| Summary | |
| |
| |
| |
| Running Queries and Connecting with Social Media | |
| |
| |
| Elements to Build | |
| |
| |
| Creating the Activity Tab | |
| |
| |
| Writing the Query | |
| |
| |
| Working with Templates | |
| |
| |
| Using Templates to Build the Activity Feed | |
| |
| |
| Running Your Script and Displaying the Results Correctly | |
| |
| |
| Creating the Wine Detail Page | |
| |
| |
| Creating the Wine Detail Page Structure | |
| |
| |
| Building the Wine Detail Page Logic | |
| |
| |
| Showing Detail on the Page | |
| |
| |
| Connecting to External Sites | |
| |
| |
| Building the Template | |
| |
| |
| Creating the List View | |
| |
| |
| Building the Template for Your Tweets | |
| |
| |
| Defining a Custom Function for Relative Timestamps | |
| |
| |
| Tweaking the Timestamp | |
| |
| |
| Changing the Tweet in the List View | |
| |
| |
| Sharing on Twitter and Facebook | |
| |
| |
| Summary | |
| |
| |
| |
| Location Storage and Search | |
| |
| |
| Elements to Build | |
| |
| |
| Creating the Mystorage Function | |
| |
| |
| Caching Geolocation and Venues | |
| |
| |
| Caching Tweets | |
| |
| |
| Saving Details in the Settings Tab | |
| |
| |
| Searching Your History | |
| |
| |
| Summary | |
| |
| |
| |
| Performance and Production | |
| |
| |
| |
| Testing and Organizing Your code | |
| |
| |
| Organizing Your JavaScript Files | |
| |
| |
| Setting Up Global.js | |
| |
| |
| Creating Database.js | |
| |
| |
| Creating Util.js | |
| |
| |
| Creating Social.js | |
| |
| |
| Creating Geo.js | |
| |
| |
| Creating Helper.js | |
| |
| |
| Putting It All Together | |
| |
| |
| Loading Your JavaScript Files | |
| |
| |
| Head.js | |
| |
| |
| Manifest Cache | |
| |
| |
| Decrease Your Javascript Footprint | |
| |
| |
| Mobile Testing Techniques | |
| |
| |
| Testing For Corks | |
| |
| |
| Summary | |
| |
| |
| |
| Preparing for Launch | |
| |
| |
| Debugging Tips | |
| |
| |
| Testing Environments | |
| |
| |
| Development Tools | |
| |
| |
| Touch Vs. Mouse Events | |
| |
| |
| Performance Tips | |
| |
| |
| Mobile Bandwidth | |
| |
| |
| JavaScript Optimizations | |
| |
| |
| CSS Optimizations | |
| |
| |
| Summary | |
| |
| |
| Appendix A: HTML5, CSS3, and JavaScript Concepts | |
| |
| |
| HTML5 | |
| |
| |
| Markup | |
| |
| |
| Geolocation | |
| |
| |
| DOM Storage | |
| |
| |
| Cache Manifest | |
| |
| |
| CSS3 | |
| |
| |
| Box Shadow | |
| |
| |
| Gradients | |
| |
| |
| CSS Animation | |
| |
| |
| JavaScript | |
| |
| |
| Basic Events | |
| |
| |
| Touch Events | |
| |
| |
| jQuery | |
| |
| |
| Summary | |
| |
| |
| Index | |