Creating Mobile Apps with jQuery Mobile Second Edition- Sample-Chapter

Published on January 2017 | Categories: Documents | Downloads: 33 | Comments: 0 | Views: 294
of 17
Download PDF   Embed   Report

Comments

Content

Fr
Second Edition
jQuery Mobile is a mobile-centric web framework
developed by the jQuery team. The project focuses on
building a framework compatible with the ever-increasing
variety of smartphones and tablet computers on the
market. The jQuery Mobile framework plays well with
other frameworks and platforms, such as PhoneGap
and Backbone.
Automate repetitive tasks easily and painlessly with
the Grunt task runner, build a fully responsive, gorgeous
photography website, and learn how to mix and match
jQuery Mobile 1.4.5 into existing websites and how to
deploy those changes to content management systems
such as WordPress, Drupal, and HarpJS. jQuery Mobile
aims to reach everyone, and so does this book. It will
enhance your mobile knowledge and help you to create
versatile, unique sites quickly and easily.

Who this book is written for
This book assumes a basic level of experience with
standard web development. If you've used jQuery Mobile
before, you're good to go. Otherwise, you can pick it up
along the way.

What you will learn from this book
 Check and monitor the user's position with
the Geolocation API
 Automate repetitive tasks with Grunt
 Integrate your jQuery Mobile app into popular
content management systems such as
WordPress, Drupal, and HarpJS
 Incorporate third-party APIs such as Google's
Analytics, Maps, and Feeds
 Leverage HTML5 video and audio,
including a jQuery Mobile player interface

Visit www.PacktPub.com for books, eBooks,
code, downloads, and PacktLib.

Andy Matthews
Shane Gliser

P U B L I S H I N G

e

E x p e r i e n c e

D i s t i l l e d

Creating Mobile Apps
with jQuery Mobile

 Use jQuery Mobile to create a fully responsive
web design for photographers using the
lightGallery plugin

Prices do not include
local sales tax or VAT
where applicable

Sa
m

pl

C o m m u n i t y

 Auto validate your mobile forms with
jQuery Validate on both page-by-page
and multi-page views

$ 44.99 US
£ 27.99 UK

community experience distilled

Creating Mobile Apps with jQuery Mobile

Second Edition

Creating Mobile Apps
with jQuery Mobile

ee

Second Edition
Create fully responsive and versatile real-world apps for
smartphones with jQuery Mobile 1.4.5

Andy Matthews
Shane Gliser

In this package, you will find:





The author biography
A preview chapter from the book, Chapter 1 "Prototyping jQuery Mobile"
A synopsis of the book’s content
More information on Creating Mobile Apps with jQuery Mobile
Second Edition

About the Author
Andy Matthews has been working as a web application developer for over 17 years,
with experience in a wide range of industries and a skillset which includes UI/UX,
graphic design, and programming. Andy is currently a senior software engineer at
the online ticketing service, Eventbrite. He is the coauthor of the book, jQuery Mobile
Web Development Essentials, Packt Publishing and has written for Adobe, NetTuts,
and .NET Magazine. He is a frequent speaker at conferences around the country, and he
has developed a number of projects for the open source community. He lives in
Nashville, TN, with his wife and four children. You can contact him at
,
, or
.
I'd like to thank my wife for putting up with me through all my conferences
and travel, and the time spent typing into this magic box we call the Internet.
Thanks to my kids for premature gray. Thanks to all the people I've learned
from over the years. It's because of you that I do this.
Find out about my exciting new card game, Startup, coming to Kickstarter in
2015

Shane Gliser graduated from Washburn University in 2001, specializing in Java
development. Over the next few years, he developed a love of web development and
taught himself HTML, CSS, and JavaScript. Having shifted his focus again, Shane's
primary passions are user experience and the mobile web. Shane began working with
jQuery Mobile while it was still in the Alpha 2 phase, and deployed American Century
Investments' mobile site while the framework was still in Beta 2. Since then, he has
rebranded and relaunched his own personal business, Roughly Brilliant Digital Studios
(
), as a place where he could start blogging tips
about using jQuery Mobile.
Major thanks goes to Todd Parker, Scott Jehl, and the rest of the crew at
Filament Group, and the many other volunteers who have given their time
and talent to creating jQuery Mobile. Jim Tharp, thank you for being my
mobile partner in crime, and for your continuous, epic sense of humor.
To the leadership team at American Century Investments, thank you for
believing in my little two-week demo and trusting us to march down this
unknown path.

Creating Mobile Apps with jQuery
Mobile Second Edition
Can we build it? Yes, we can!
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!"

What This Book Covers
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, Making a Mom-and-Pop Mobile Website, implements the prototypes from
Chapter 1, Prototyping jQuery Mobile . The design is unique and begins to establish a
base server-side template.
Chapter 3, Analytics, Long Forms, and Frontend Validation, takes the casual
implementation of Chapter 2, A Mom-and-Pop Mobile Website 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, Automating Your Workflow with Grunt, introduces you to the Grunt
automation framework, and will show you how to automate repetitive tasks such as
concatenation, minification, and CSS builds.
Chapter 7, Working with HTML5 Audio, takes HTML5 Audio and progressive
enhancement to turn a very basic web audio player page into a musical artist's showcase.

Chapter 8, Fully Responsive Photography, explores the use 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 9, 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 10, Content Management Systems, Static Site Generators, and jQM, teaches us
how to integrate jQM into WordPress and Drupal. It also introduces the notion of
developing a dynamic site locally but outputting, and hosting, plain HTML.
Chapter 11, Putting It All Together – Community Radio, builds on the knowledge of the
previous chapters and creates, adds a little more, and considers compilation using
PhoneGap Build.

Prototyping jQuery Mobile
On November 22, 2011, I (Shane) started my blog at roughlybrilliant.com as
a way to share everything I was learning about jQuery Mobile and Mobile UX
(User Experience). I had no idea what it would turn into and what would strike a
chord. Since it's a developer-centric blog, it came as a bit of a surprise to me that the
remarks I made about stepping away from the keyboard and sketching our designs
first would spark the most positive comments. It is my firm belief that the best way
to start your jQuery Mobile projects, is on a pad of Post-it notes.
There is a good chance that this chapter will feel like the most work and feel the most
foreign. But ultimately, I believe it will probably be the chapter that gives you the
most growth. It's normal for developers to sit down and start coding, but it's time to
grow past that.
In this chapter, we will cover the following topics:


The changing mobile playing field



The mobile usage pattern



Paper prototyping



Key components for a small business mobile site



Drawing the jQuery Mobile UI



Other prototyping methods

The game has changed
There was a time, not so long ago, when developers could make a product and
people would use it no matter how bad it was. It would generally garner some level
of success simply by virtue of its existence. We now live in an age where there is a
lot more competition. Now, with tools like jQuery Mobile, anyone can quickly craft
impressive looking mobile sites in a matter of hours.

Prototyping jQuery Mobile

So, how do we differentiate ourselves from the competition? We could certainly
compete on price. People love good value. But there is something that has always
seemed to trump price, and that is the user's experience. User Experience (UX) is
what differentiates most of the world's most successful brands.
Which computer company is not only staying afloat but is absolutely swimming in
success? Apple. Sure their products are expensive, but ultimately they are successful
because they've always been at the forefront of designing around the user.
Amazon provides a great experience by helping you find what you're looking for
quickly. They give great reviews and recommendations for your purchasing decisions.
Google could promote whatever they want on their homepage, but instead, they have
kept their homepage almost as clean as it was on the day they started.
It's hard! We like to think that how we make a program or web page is crucial. We like
to think that, by shaving off 10 percent of our code, we're making a big difference. But
have you ever tried to explain the details of your current project to a friend and just
watched their eyes glaze over? Nobody cares but us. All they hear is faster, smaller,
easier, simpler, and so on. They only care about things that have a direct bearing on
their life: their user experience.
The most important lesson we can learn as developers is that we can write the most
elegant code, create the most efficient systems, accomplish small miracles in less than
1K of JavaScript, but if we fail in the area of usability, we will fail completely.

The mobile usage pattern
jQuery Mobile is not a magic bullet. It will not create instant magnetism for our
products. Technologies and libraries will not save us if we fail to realize the
environment and usage patterns of our users.
Think about this: when was the last time you spent more than three continuous
minutes on any one site or app on your phone that wasn't a game? We all know
how addictive Flappy Bird can be but, aside from that, we tend to be in and out in a
hurry. The nature of mobile usage is short bursts of efficient activity. This is because
our smartphones are the perfect time reclamation devices. We whip them out
wherever we have a spare minute including:


Around the house (recipes, texting, boredom)



While waiting in lines or waiting rooms (boredom)



Shopping (deal hunting, boredom)

[ 12 ]

Chapter 1



During work (meetings, bathroom-we've all done it)



Watching TV (every commercial break)



Commuting (riding mass transit or stuck in traffic jams)

We can easily see the microburst activity through our own daily lives. This is the
environment that we have to tailor our products to if we hope to succeed. Above all
else, this will require us to focus. What did the user come to us to do while they are
waiting in line? What can they accomplish in a single commercial break? What task
would they consider number one during their number two?

HTML prototyping versus drawing
Do not start with the code. Being a developer, this is really hard to say. jQuery
Mobile is very fast and easy. Refactoring is also very fast. However, there is
something that happens when you jump right into HTML prototyping.
People who don't know code will assume that we're much closer to a complete product
than we actually are. This is especially true with jQuery Mobile because even the most
rudimentary stab at a project comes out looking polished and complete.
People fixate on minutiae like spacing, margins, colors, logo size, and so on. Due to
the sunk cost of our time in the current design, we are less likely to make significant
changes from whatever we initially coded, because refactoring is easier than a
make-over.
Instead, get a pen and paper. Wait, what? Isn't this a web developer book? Relax;
you don't have to be an artist. Trust the process. There will be plenty of opportunities
to code later. For now, we are going to draw our first jQuery Mobile wireframe.
The following are a few great things about starting with paper-based ideation:


We are more willing to simply throw out a drawing that took less than
30 seconds to create



Actually sketching by hand uses a different part of the brain and unlocks our
creative centers



We can come up with three completely different designs in the time it takes
to create one HTML page



Everyone can contribute their best ideas even if they're not skilled in graphic
design or coding



We will naturally begin by drawing the most important things first

[ 13 ]

Prototyping jQuery Mobile



More attention is paid to the ideas and flows that actually make our site work
instead of the myriad details, which few would even notice



We will probably end up with a more User-Centered Design (UCD) since
we're drawing what we would actually want

Ideally, 3x5 Post-it notes are perfect because we can easily lay them out on walls or
tables to simulate site structure or process flows. We could even use them to conduct
usability testing. A little later, we'll lay out our drawing for the owner to see how the
whole thing could work before we get buy off.

Getting our hands dirty with small
businesses
The significance of small businesses is defined as follows in Katherine Kobe
http://archive.sba.gov/advo/research/rs299tot.pdf:
"Small businesses continue to play a vital role in the economy of the United States.
During the 1998-2004 time period, small businesses produced half of private
nonfarm GDP."
An article at http://www.msnbc.msn.com/id/16872553/ talks of the
following statistics:
"While some two-thirds of small firms make it past the two-year mark, just 44
percent can hack it for four years, according to the latest data from the Bureau of
Labor Statistics."
Even in the land of big business, it bodes well for our craft; there is such a
volume and churn of small businesses. That means an almost endless supply
of mom-and-pop shops that are trying to compete. That's where we come in.
Take Nicky's Pizza for example. Like so many other businesses, the owner realized
that he should have a website before he opened his doors for business. His friend
built the website and it's actually pretty good; it's just not mobile optimized yet.
The pizza is great and while we sit there enjoying a slice, we bust out a pen and grab
a napkin. We're going to sketch out a mobile website right here, right now, and win
some business. Let's get started.

[ 14 ]

Chapter 1

For any small, local business, there are certain staples that should probably be first
and foremost on their mobile site:


Location



Contact information



Services/goods provided

Since this is a restaurant, services will be the menu. They also were smart enough to
create a Facebook page. So, we'll link to that and bring in some testimonials.
Since we're drawing and not using a tool, you can choose to be as detailed as you
like. Either works to communicate the core ideas.
When working with our own team, the first is probably just enough since we
all know what jQuery Mobile can do. We know what details the framework
will fill in and we can draw just enough to tell each other what we're thinking.
However, when drawing for customers (or people who you know are more visual
and detail-oriented), we would do well to take the few extra seconds to add the finer
details like shadows, gradient shading, and, especially, the logo. Business owners
are very proud of their babies, and your effort to include it will instantly grant your
drawing that little bit of extra gravity.
The following figures are two examples of drawing the same page:

The first is certainly good enough to pick up, hold in the hand, and pretend it's a
smartphone screen. In the second figure, we can see how much difference actually
drawing out the logo can make and how adding harder edges and shadows give a
sense of depth. A little polish goes a long way.
[ 15 ]

Prototyping jQuery Mobile

There are several ways to go about adding drop shadows to your drawings. The
most artistic way is to use a pencil but the problem with drawing in pencil is that
it leads to smudging, and paying too much attention to fine detail. These drawings
are supposed to be rough. If you screw up slightly, no big deal. After all, you've
probably spent less than a minute on each drawing and that's the idea. The goal is to
get to a shared, visual understanding, quickly.
Here are four different ways to draw the same button. From left to right: pencil, pen,
Sharpie, and markers. My personal preference is to use a fine point Sharpie.

Here are some other jQuery Mobile elements and ways to draw them:
jQuery Mobile elements with examples

jQuery Mobile elements with examples

Listviews

Dialog

Navbars

Buttons

Collapsible

Grouped Buttons

[ 16 ]

Chapter 1

jQuery Mobile elements with examples

jQuery Mobile elements with examples

Input

Search

Flip switch

Slider

Checkbox set

Radio set

Select menu

Multi-select

Split listviews

Bubble count list views

Designing the remaining components
The Map It button will lead the user to this page where we will list the address and
have a static Google map. Clicking on either the address or the map will link to the
full Google Maps location.
As an added bonus, in case users don't want to go to the physical location, let's throw
a telephone link on the button labeled Call for delivery.

[ 17 ]

Prototyping jQuery Mobile

You can see the different thicknesses of lines. Also, a touch of color and our typical
drop shadows. Adding these little details is not particularly hard and can make a
big difference:

All of the Call buttons throughout the site will launch the native call interface.
The next drawing is of the iOS view of a call dialog. Android is pretty similar.
Notice the little shiny lines on the button in the background indicating that it
was clicked. Also, we've shaded out the background (pencil work) to indicate its
modal status:

[ 18 ]

Chapter 1

Now, let's consider the menu and what will serve as a global header. The first two
links that you put into the global header will be turned into buttons. Let's make our
first link Home and the second link Call.

Here we see the detailed view for salads. It's pretty much the same as before but
we've done some formatting within the list views. We'll see the actual code for that
in the next chapter.

[ 19 ]

Prototyping jQuery Mobile

Naturally, we could use a whiteboard and markers to do all this work. We can
collaboratively draw our ideas on the board and take snapshots with the very
smartphones we intend to target. My recommendation is to use our faithful Post-it
notes and simply stick them to the whiteboard and use the markers to indicate
screen flows. The following figure shows how my board looked after mapping out
the project:

If we need to remap our application flows, all we have to do is shuffle the notes and
redraw our lines. It's a lot less work than redrawing everything a few feet farther
down the whiteboard.

Design requirements
Consider what we've laid out so far. Considering the screens we've drawn and the
fact that the owner was able to view and sign-off that this is what he wants, how
many more questions are there to ask? Do we really need some excel document
listing out requirements or a 30-page Functional Design Specification (FDS)
document to tell you exactly what everything is supposed to be and do? Wouldn't
this be enough? Does it have to really be done in Photoshop and produced as a
slide deck?
Consider also that what we have done so far has cost us a grand total of five
Post-it notes, one Sharpie, one pencil, and 20 minutes. I believe the case here has
been abundantly made that for most sites, this is all you need and you can do
it yourself.
[ 20 ]

Chapter 1

Alternates to paper prototyping
If the speed and simplicity of paper prototyping are not enough to convince you to
step away from the keyboard, then consider two other options for rapid prototyping:


Balsamiq Mockups (http://www.balsamiq.com/)



Axure RP (http://www.axure.com/)

I personally recommend Balsamiq Mockups. The prototypes it produces have
a uniform but hand-drawn look. This will accomplish the same thing as paper
prototyping but with more consistent output and easier collaboration across
distributed teams. Both of these tools can produce fully interactive mockups, as
well as allow the user to actually click through the prototype. Ultimately, paper
prototyping is still faster and anyone can contribute.

Summary
For those of us who have never encountered paper prototyping as a serious
discipline, this can feel very weird at first. With any luck, the lessons learned here
have expanded your mind and given you a new zeal for crafting a good user
experience. If you would like to delve deeper into ideation techniques, the best book
I can recommend on the topic is Gamestorming, Dave Gary. This book is available on
the following link:
https://www.goodreads.com/book/show/9364936-gamestorming.

You should now be able to effectively sketch a jQuery Mobile interface for both,
your colleagues and customers. In the next chapter, we'll translate what was drawn
here into a real jQuery Mobile implementation that goes beyond the normal jQuery
Mobile look and feel. Just remember, the user experience and usability come first. Go
for quick, focused bursts of intuitive productivity.

[ 21 ]

Get more information Creating Mobile Apps with jQuery Mobile Second
Edition

Where to buy this book
You can buy Creating Mobile Apps with jQuery Mobile Second Edition from the
Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.

www.PacktPub.com

Stay Connected:

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close