Building for the Mobile Web - HTML5 and JavaScript Web Apps

HTML and CSS Reference

In-Depth Information

Single Page

As previously mentioned, the single-page approach forces you to put as much markup

and resources as possible into a single HTML file. In the end, this limits HTTP requests

for a better performing app. The leaders here are jQuery Mobile and jQTouch.

jQuery Mobile

jQuery Mobile ( http://jquerymobile.com ; demo at http://jquerymobile.com/test ) is strict‐

ly tied to the release schedule of the core jQuery library. Known for its AJAX-based

navigation system and themeable ThemeRoller designs, the framework is produced by

the core jQuery project. It also has an attractive set of widgets, but unfortunately, they're

all decorated with CSS background gradients, text shadows, rounded corners, and drop

shadows. As you'll see in the coming chapters, heavy use of CSS decorations in mobile

web apps can slow the browser to a crawl.

jQuery Mobile is the most popular mobile web framework out there today. Taking into

account its over 10,000 followers on Twitter and more than 6,000 watchers on github

( Figure 3-14 ), you can easily see the power piggy-backing on an existing project's success

(in this case, core jQuery) to catapult a project into the mainstream. The real power and

strength of this project comes from its community. Table 3-1 gives a high-level snapshot

of the jQuery Mobile project.

Figure 3-14. jQuery Mobile github stats, June 2012

Table 3-1. jQuery Mobile

Platform support

Android, bada, BlackBerry, iOS, MeeGo, Symbian, webOS, and Windows Phone (others are

graded at different levels of 49 support)

License

Dual license MIT or GPL 2

Programming model

CSS and JavaScript: declarative on the DOM itself; markup with CSS and data-* attributes

Wrapped or polyfilled HTML5

APIs

None

To set up the page, use the code:

<!DOCTYPE html>

<html>

<head>

Search WWH ::

Custom Search

Home