B.5 Go Mobile

Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

and Karl Swedberg. You may also want to go directly to the oﬃcial jQuery website

jquery.com, with downloads, examples, blo gs, and more.

Unless you like reinventing the wheel, you won’t stop at the basic jQuery library.

There are countless jQuery plug-ins for you to use (check

plugins.jquery.com, for ex-

ample). Plug-ins are modules that add new functionality, and jQuery plug-ins are

just plain ﬁles of JavaScript code. There’s even a whole library of popular jQuery

plug-in s distributed under the name jQuery User Interface ( jQueryUI, available at

jqueryui.com). With the se UI plugins you can make elements on your page dr aggable,

droppable, resizable, selectable, or sortable. You will also ﬁn d practical widgets like

date picker, with a convenient calendar, or progress bar. The jQuery UI library also

comes with bountiful CSS themes, and if you d on’t ﬁnd one to your taste, you can

compose and download your own with their online ThemeRoller.

B.5 Go Mobile

If you haven’t already done so, it is probably time to start thinking about programming

for mobile devices. The good news is that HTML5 allows you to take advantage of

everyth ing you’ve learned abo ut HTML, CSS, and JavaScript. By using the newest

HTML5, CSS3, and JavaScript features, you can build web applications that look and

feel like native applications. With the latest b rowsers on the market, even speed is

no longer a concern—most web applications built upon the newest technologie s are

as fast as native applications. Apart from that, HTML5 allows you to “install” web

application s in your browser’s memory and run them oﬄine, so your users need not

be connected to the Internet to use the m.

One big disadvantage of native applications is that they are programmed for a speciﬁc

target platfor m, ma inly using very diﬀerent technologies. You need to learn the Ob-

jective C and Xcode development environment if y ou want to program Apple’s native

iOS applicatio ns, or you will have to learn Java a long with the Eclipse development

environment if you want to program native Android applications, for example. By

creating web applications, you can mostly forget about the diﬀerences between diﬀer-

ent platforms. With m inimal mod iﬁca tions, your app lication will run on most, if not

all, devices.

Mobile Interaction

It’s tru e that you can also view most web pages and run m ost web applications de-

signed for de sktop com puters on you r mobile device. Ju st because you don’t h ave a

mouse connected to your mobile, that doesn’t m ean you’re handicapped when trying

to follow a hyperlink, for example. In mo bile d evices, mouse events are simulated

when touch events occur. This is essential for keeping the mobile web alive. That

said, when y ou design a page or application with a mobile device already in mind,

you can improve your user’s experience hugely.

There are some considerations that you should give you r design if you really want

to think mobile. First, ther e’s the type of web navigation: instead of the mouse and

keyboard used with desktop browsers, mobile users navigate the Web with the ir ﬁn-

gers, tapping, swiping, and rotating the device. For the programmer, this b asically

302 Appendix B. Ways to Continue

means that he/she needs to handle diﬀeren t events, and handle them diﬀerently. You

cannot hover with your ﬁnger over an element like you can with your mouse pointer,

for example. Even the b oniest of us still have fat ﬁngers compared to the single-pixel

precision of a mouse pointer. To make a user interface comfortable for tapping and

swiping, you should d eal with this fact a s well. Another thing to consider is connected

with the size of a screen, w hich is considerably smaller on a mobile device, and the

user attention span , which is also smaller. This importantly inﬂue nces the type and

quantity of information to include an d a lso aﬀects the user interface design. The last

thing you should be aware of is that mobile devices often access the Web via incon-

sistent and limited public serv ic es, which limits the amount of data they are able to

exchange with servers. So, stay away from gigantic JavaScript libraries and images.

Swiping the 15-Puzzle

In o rder to d emonstrate a mobile-speciﬁc approach to pr ogramming, let’s give our 15-

puzzle a more ap pealing feel. The puz zle as w e programmed it in the previous section

can already be used on a mobile phone since ﬁnger taps are automatically translated

to mouse clicks on a mobile device. It is, however, quite unnatural and uncomfortab le

to tap tiles in orde r to slide them. Rather, we want our user to be able to swipe

with a ﬁnger to slide a tile. There’s a jQuery Mobile library available, which deﬁnes

a user in te rface for to uchscreens. Unfortunately, the library cannot handle vertical

swipes directly—it is designed only to handle horizontal swipes. An easy way to

circumvent this problem is to use an appropr ia te plugin, and so I picked up the jQuery

TouchSwipe plugin by Skinkers Technology Services. Their website doesn’t seem to

work any more, but you can get the TouchSwipe plugin and all the documentation at

labs.rampinteractive.co.uk/touchSwipe

To use the plugin in your code, you ﬁrst include it as yo u wou ld include any other

external JavaScript ﬁle:

/* Important: include after the basic jQuery library */

</script>

Then, you insert the following code just at the end of the start() method of the

SlidingPuzzle ob je ct:

$(document).swipe({

swipe: function(event, direction) {

var dir;

switch (direction) {

case "left": dir = 37; break;

case "up": dir = 38; break;

case "right": dir = 39; break;

case "down": dir = 40;

}

$(this).trigger({type: "keydown", which: dir});

B.5. Go Mobile 30 3

threshold: 30

});

You instantiate the plugin and apply a TouchSwipe behavior to a jQue ry object by call-

ing the swip e() method on that o bject. Notice that I applied the swiping b ehavior to

the document rather than to individual tiles. This way, a user is free to swipe anywhere

over the puzzle in order to slide a tile instead of needing to worry about whether he/she

will hit the right tile. The swipe() method accepts as the ﬁrst argument an object con-

taining the event-handler deﬁnition (s wipe in our case, but there are also other events

deﬁned by the library) and some properties controlling the handler behavior. One of

these properties is th reshold, wh ic h speciﬁes a minimu m distance in pixels that a

user must swipe in any on e of the four directions in order for the event to get ﬁre d. The

swipe event handle r also accep ts, apart from the usual Event ob je ct, some other ar-

guments. I used o nly the second argument, wh ic h holds a string naming the direction

of the swipe ("left", "right", "up", or "down"). Because a swipe over the puzzle

gives exactly the same information as pressing one of the arrow keys, all we have to

do is translate a swipe into a corresponding key press. If you look inside the event-

handler body, you’ll see that the four possible swipe directions are ﬁrst translated into

appropriate key cod es and then the keydown event is triggered.

Table of Contents for B.5 Go Mobile

Create new playlist

Sign In

Sign Up

Table of Contents for
B.5 Go Mobile