Mobile is the fastest growing technology sector in existence. It is a wave of change that has shattered all analysts' expectations. You have the choice to harness that wave or to be swept under. In Creating Mobile Apps with jQuery Mobile, we'll take you through several projects of increasing complexity across a variety of industries. At the same time, we'll tackle several mobile usability and experience issues that are common to all mobile implementations, not just jQuery Mobile.
By the end you will have all the skills necessary to take jQuery Mobile and a host of other technologies and techniques to create truly unique offerings. This will be fun. It will be challenging, and by the end, you will be quoting Bob the Builder, "Can we build it? Yes we can!"
Chapter 1, Prototyping jQuery Mobile, harnesses the power of rapid prototyping before you start coding. Come to a quicker, better, and shared understanding with your clients.
Chapter 2, A Mom-and-Pop Mobile Website, implements the prototypes from Chapter 1. The design is unique and begins to establish a base server-side template.
Chapter 3, Analytics, Long Forms, and Front-end Validation, takes the casual implementation of Chapter 2 and adds in Google Analytics, the jQuery Validate framework, and a technique for dealing with long forms.
Chapter 4, QR Codes, Geolocation, Google Maps API, and HTML5 Video, will have you implement a site for a movie theater chain.
Chapter 5, Client-side Templating, JSON APIs, and HTML5 Web Storage, creates a social news nexus, tapping into the API powers of Twitter, Flickr, and the Google Feeds API.
Chapter 6, HTML5 Audio, takes HTML5 audio and progressive enhancement to turn a very basic web audio player page into a musical artist's showcase.
Chapter 7, Fully Responsive Photography, explores the user of jQuery Mobile as a mobile-first, responsive web design (RWD) platform. We also take a very quick look at typography as it applies to RWD.
Chapter 8, Integrating jQuery Mobile into Existing Sites, explores the methods of building jQuery Mobile sites for clients who want their pages mobilized but don't have a content management system (CMS). We also dig deep into mobile detection methods including client-side, server-side, and a combination of the two.
Chapter 9, Content Management Systems and jQM, teaches us how to integrate jQM into WordPress and Drupal.
Chapter 10, Putting it all together – Flood.FM, builds on the knowledge of the previous chapters and creates, adds a little more, and considers compilation using PhoneGap Build.
You really only need a few things for this book.
A text editor
All you need is a basic text editor for your code; Notepad++ is great on Windows. I really like Sublime Text 2. Eclipse will work though it's a bit heavy-handed. Dreamweaver is pretty good but pricey. It really doesn't matter much; you can pick whatever text editor makes you happy.
A web server
You could use a hosted solution such as HostGator, Godaddy, 1&1, and many more, or keep all your testing local using something like XAMPP, WAMP, MAMP, or LAMP on your development box.
JavaScript libraries
Here and there in the chapters we'll introduce a few JS libraries. In each case, I'll tell you what they are and where to find them.
A developer's sense of humor
We all think of it, we all say it. You'll find a rant or two in here. Take them for what they're worth and never too seriously.
If you are already fairly good with web development (HTML, CSS, JavaScript, and jQuery), that's good enough for me. You can pick up jQM along the way in this book and I think you'll be fine.
Ideation and prototyping techniques
Integrating custom fonts and icon sets
Integrating client-side form validation using jQuery Validate
Google Analytics, Maps, and Feeds APIs
Geo location
Embedding HTML5 Video and Audio
Using client-side templates and JSON
Digesting RSS feeds
Integrating PhotoSwipe
Media queries
Mobile detection techniques
Integrating with Wordpress and Drupal
Integrating with pre-existing sites
Kings rise and fall so fast in the mobile sector that it's almost impossible to predict who and what will win. Just ask RIM (makers of BlackBerry devices) who went from total domination down to 6 percent of the world's market share. With this level and speed of change, how can you know that you are choosing the right platform for your projects?
A safe bet
The core jQuery library is used on over 57 percent of all websites in existence and the growth rate shows no signs of slowing. (http://trends.builtwith.com/javascript/jQuery). It is, by far, the most trusted name in open source JavaScript libraries. Now that they have tossed their hat into the mobile ring, you can bet that jQuery Mobile is a pretty safe choice for reaching the most people with the smallest effort.
It is also worth noting that you will probably move on from most of your projects after a time. Using jQM will increase the likelihood that whoever comes after you will already have the skill set to pick up where you left off.
Broadest device support
jQuery Mobile has the broadest range of device support. This has always been part of their mission through their exceptional adherence to progressive enhancement (PE). When an escalator breaks, it does not become completely useless. It becomes simply stairs. In the same way, jQuery Mobile does some really awesome things for those who have smartphones. But what about the rest? They will see a standard web page without all the bells and whistles. At the end of the day, a well-crafted jQM page can work for everyone.
Mobile-first but not mobile-only
jQM was designed from the ground up with mobile in mind but with some judicious use of responsive web design (RWD), a single jQM project can service mobile, tablet, and even desktop.
Declarative, not programmatic
Most of what you want to do in jQM can be done without writing a single line of code. This makes it an ideal tool for even the newest of newbs to jump in and get their feet wet in the mobile space. Designers with no real programming experience can easily turn their visions into skinned, working prototypes. For those of us who can program, it means that there is much less coding we need to do and that is always a good thing. jQM perfectly fits the jQuery core motto of "write less, do more."
jQM versus other frameworks
There are many choices for your consideration if you want to use a mobile framework. Check out http://www.markus-falk.com/mobile-frameworks-comparison-chart/ for a breakdown tool comparing all the options. The bottom line is this: if you want to support everybody and do it easily, jQuery Mobile is the right choice of framework.
jQM versus responsive web design
Much is being said these days about RWD. I'm all for it. A single unified site is every developer's dream. However, this usually requires that the website be built from the ground up with RWD in mind. This also presumes that every page of the site is worth serving to a mobile audience. If you ever have such a growth opportunity, enjoy it.
The sad truth is, most of the rest of us don't get the luxury of starting a whole new site from scratch, nor the time and tripled budget to do the job right. And, if we're being quite honest… many sites have a lot of useless pages that have no business being in the ultra-focused, task-oriented, get-in-get-out-world that is the mobile web. You know it. I know it. A custom crafted solution that perfectly fits the users' needs and context is usually a better way to go.
jQM versus rolling your own
You certainly could choose to roll out your own mobile sites from scratch but that would be tantamount to felling a forest with an axe so you could make the boards to build your own house. You are no less of a craftsman for using premade components to make your masterpiece. Mobile frameworks exist for a reason, the amount of development time and cross-device testing that goes into them will save you more time and headaches than you can fathom.
It is worth noting that two out of the three top industry leaders highlighted in Kasina's report, Mobile Leadership for Asset Managers and Insurers (http://www.kasina.com/Page.asp?ID=1415), were crafted using jQuery Mobile. Franklin Templeton, American Century Investments, and Vanguard were highlighted. The first two were implemented using jQM.
Full disclosure: I was part of the team that created the referenced version of the mobile site for American Century Investment so I'm rather proud of this report.
Resistance is futile. It is going to happen to you. Every year there are new exploits announced at the Black Hat conferences (http://www.blackhat.com/). Just like clockwork, companies neuter their smartphone users by turning off JavaScript until a patch can be provided. One or more people within your mobile audience will be affected.
While this situation can be almost as annoying as early editions of Internet Explorer, jQuery Mobile can help, thanks to its masterful use of progressive enhancement. If you have coded your pages in accordance with the framework's design then you will have nothing to fear by the loss of JavaScript. The site will still work. It may not be as pretty, but it will function for everyone from the smartest of smartphones to the dumbest of "dumbphones".
It is our responsibility (as distasteful as it may be) to test our offerings with JavaScript turned off to ensure that people can always access our product. It is not hard to flip the settings on our phones and just take a look at what happens. Frequently, it's trivial to fix whatever is wrong.
All that being said, we are going to mercilessly break that rule in this book because we are going beyond the basics of the framework. When possible, we will try to keep this principle in mind and provide fallback alternatives but some of what we are going to try just can't be done without JavaScript. Welcome to the twenty-first century!
Smartphones are excellent tools for those with accessibility needs. The jQuery Mobile team has made every effort to support the W3C's WAI-ARIA standards for accessibility. At the very least, you should test your finished product with your phone's voice assist technologies. You will be shocked at just how well your site can perform. Your customers who need the help with be thrilled.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "To use the manifest file, your web server or .htaccess will have to be configured to return the type of text/cache-manifest."
A block of code is set as follows:
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/album144.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/album114.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/album72.png"> <link rel="apple-touch-icon-precomposed" href="images/album57.png">
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "From there you can download the latest copy of WURFL API package and unzip it."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title through the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Tip
Downloading the color images of this book
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the chapters.You can download this file from http://www.packtpub.com/sites/default/files/downloads/0069_images.pdf.
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, or added to any list of existing errata, under the Errata section of that title.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.