Working with jqTouch to Build Websites on Top of jQuery [NOOK Book]

Overview

Using jqTouch, an open source solution, is a fast way for you to convert a static Web page into looking like a native iPhone or Android app. In this short ebook find out how you can use the Open Source jqTouch Library to extend the functionality built into jQuery to build Web sites that run on your iOS and Android phones but look and interact as if they are native apps. You will also discover how to create custom interfaces, screen flipping, and set themes with jqTouch.

...
See more details below
Working with jqTouch to Build Websites on Top of jQuery

Available on NOOK devices and apps  
  • NOOK Devices
  • Samsung Galaxy Tab 4 NOOK
  • NOOK HD/HD+ Tablet
  • NOOK
  • NOOK Color
  • NOOK Tablet
  • Tablet/Phone
  • NOOK for Windows 8 Tablet
  • NOOK for iOS
  • NOOK for Android
  • NOOK Kids for iPad
  • PC/Mac
  • NOOK for Windows 8
  • NOOK for PC
  • NOOK for Mac
  • NOOK for Web

Want a NOOK? Explore Now

NOOK Book (eBook)
$5.95
BN.com price

Overview

Using jqTouch, an open source solution, is a fast way for you to convert a static Web page into looking like a native iPhone or Android app. In this short ebook find out how you can use the Open Source jqTouch Library to extend the functionality built into jQuery to build Web sites that run on your iOS and Android phones but look and interact as if they are native apps. You will also discover how to create custom interfaces, screen flipping, and set themes with jqTouch.

Read More Show Less

Product Details

  • ISBN-13: 9780240819082
  • Publisher: Elsevier Science
  • Publication date: 7/1/2011
  • Sold by: Barnes & Noble
  • Format: eBook
  • Pages: 20
  • File size: 628 KB

Read an Excerpt

WORKING WITH jQTOUCH TO BUILD WEBSITES ON TOP OF jQUERY


By MATTHEW DAVID

Focal Press

Copyright © 2011 Elsevier Inc.
All right reserved.

ISBN: 978-0-240-81908-2


Chapter One

WORKING WITH jQTOUCH TO BUILD WEBSITES ON TOP OF jQUERY

Browser technologies are allowing you to bring rich applications into your web browser. In this chapter you will see how you can use the Open Source jQTouch Library to extend the functionality built into jQuery to build websites that run on your iOS and Android phones but look and interact as if they are native apps. You will learn how to create custom interfaces, screen flipping, and set themes using jQTouch.

Rapidly Building iPhone Apps without Learning Objective-C

Objective-C, the programming language used to create native apps for the iPhone, is not an easy language to learn. Although Steve Jobs espouses how easy it is to build an iPhone app (there are, after all, over 350,000), it is still not as easy as developing a website (there are billions of websites, in comparison). But this is all changing with tools such as jQTouch.

jQTouch is an open source plug-in for the jQuery library that allows you to very easily extend your website building skills to create solutions for the iPhone and Google's Android. You can get started using jQTouch by downloading it at jqtouch.com/ as shown in Figure 3.1.

Something to note is that although jQTouch is built using HTML5 standards on top of the jQuery framework, it has not been optimized to run on all devices. For instance, response time on Windows Phone 7 has not been tested. jQTouch is optimized for Apple's iPhone (not the iPad) and will work well on Android phones (but not tablets).

Though it may seem highly selective, you do get some advantages that general-purpose platforms do not allow you to leverage. For instance, you can create a web app using jQTouch with a custom launch screen. This cannot be done with jQuery Mobile.

Take the time to review the features you will get in jQTouch before you download the jQTouch framework. In particular, notice how the extensions for jQTouch work. Leveraging just HTML5 skills you can add geolocation, automatic titles, and floating toolbars. No Objective-C is needed here.

Converting htML into an iPhone App

The web browser built into the iPhone is one of the most advanced browsers on the market. Features such as CSS transitions and animation were part of the iPhone Mobile Safari web browser years before they reached the desktop. You can leverage advanced animation and JavaScript functions to create native, app-like solutions.

You will need to test the rest of the code we develop in this chapter either in Safari on your Mac or directly on an iOS device (iPhone, iPod Touch, or iPad). The code will run on all versions of iOS 3+ (I have not tested the code on iOS 2). Let me know if you have an iPhone OS 2 device and send me a tweet (@matthewadavid) or e-mail (matthewadavid@gmail. com). My gut is telling me that there are not too many of these devices out in the wild anymore.

To get you started you need to download the latest release of jQTouch. Point your web browser to www.jqtouch.com/ and press the big, green Download button in the center of the screen. The code is stored in a Google Code Open Source project (http://code. google.com/p/jqtouch/), shown in Figure 3.2.

The jQTouch site has additional videos and tutorials you can check out. Also, check out Jonathan Stark's videos on YouTube (www.youtube.com/user/jonathanstark). These are great resources.

The jQTouch project comes packaged in a ZIP file you can expand. Pay attention to two main sections: the JavaScript files and the CSS/image files.

jQTouch is a jQuery plug-in. Much of the heavy lifting, when it comes to interactivity, is done for you.

Styling, animation, and formatting is accomplished with CSS and image files. You can update these files if you want, but in this chapter we are going to stick with the defaults.

Building a Basic jQtouch site

The goal of jQTouch is to allow you to create an iPhone-specific website very easily. To this end, all you really need is a little HTML, CSS, and some JavaScript knowledge to create your solutions. Let's start with a basic web page that is just using DIV and UL/LI elements.

Using your favorite text editor, such as Notepad++ (my favorite on the PC) or TextWrangler (my favorite on the Mac), create a new blank HTML page. Name the page template.html.

The first step is to declare that the document is HTML5 compliant. This is done by adding the DOCTYPE of HTML, as seen here:

<!doctype html>

The next step is to add some standard opening HTML tags and HEAD element content:

<html> <head> <meta charset="UTF-8" /> <title>Getting Started</title>

After the title, you will want to link to the CSS and JavaScript files used to design the document. You will see that the following CSS reference is pointing to a subfolder below the folder of the template. html document. Keeping your document references correct is very important. A mess-up here can lead to hours of bug hunting later.

You are linking to two CSS documents. The first is a generic document that contains information on page transitions, list presentation, and other visual elements. The second document points to a specific theme for the site. Here you are using the jqt theme. You can also use the "apple" folder for a theme (swap the jqt reference with apple) to give your web page an apple-esque look and feel.

<style type="text/css" media="screen"< @import "jqtouch/jqtouch.min.css"; </style> <style type="text/css" media="screen"> @import "themes/jqt/theme.min.css"; </style>

Following the CSS reference, you will need to reference two JavaScript documents: the jQuery framework and jQTouch framework. Both are included with the downloaded files (as of writing this book, jQTouch has not been tested with jQuery 1.5.x but it should work).

<script src="jqtouch/jquery.1.3.2.min.js" type="text/ javascript" charset="utf-8"></script> <script src="jqtouch/jqtouch.min.js" type="application/ x-javascript" charset="utf-8"></script>

Following the reference to the JavaScript files, you need to initialize the JavaScript onto the page. This is done by adding the following JavaScript:

<script type="text/javascript" charset="utf-8"> var jQT = new $.jQTouch({ }); </script>

After the references to the JavaScript frameworks you can close the HEAD and start the BODY elements.

</head> <body>

Content presented as "page" on a screen is actually controlled by DIV elements in jQTouch. This is similar to jQuery Mobile. There are some syntactic differences between jQuery Mobile and jQTouch. For instance, jQuery Mobile uses custom attributes in the DIV elements for formatting whereas jQTouch uses class attributes as reference points for CSS.

Within the following DIV is a basic page structure:

<div id="home" class="current"> <div class="toolbar">

Template

Welcome Screen

The final step is to close the final HTML tags.

Continues...


Excerpted from WORKING WITH jQTOUCH TO BUILD WEBSITES ON TOP OF jQUERY by MATTHEW DAVID Copyright © 2011 by Elsevier Inc.. Excerpted by permission of Focal Press. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Read More Show Less

Table of Contents

Contents

Working with jQTouch to Build Websites on Top of jQuery....................1
Rapidly Building iPhone Apps without Learning Objective-C....................1
Converting HTML into an iPhone App....................2
Building a Basic jQTouch Site....................4
Adding Two or More Pages....................6
Adding Lists....................8
Adding Buttons....................10
Richer Form Elements....................11
Adding a Floating Toolbar....................13
Using Autotitles....................15
Location Aware Solutions....................16
Creating Your Own Extensions....................17
Adding Animation....................18
Some Little Extras....................19
Summary....................20


Excerpted from WORKING WITH jQTOUCH TO BUILD WEBSITES ON TOP OF jQUERY by MATTHEW DAVID Copyright © 2011 by Elsevier Inc.. Excerpted by permission of Focal Press. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Read More Show Less

Customer Reviews

Be the first to write a review
( 0 )
Rating Distribution

5 Star

(0)

4 Star

(0)

3 Star

(0)

2 Star

(0)

1 Star

(0)

Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & Noble.com that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & Noble.com does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at BN.com or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation

Reminder:

  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on BN.com. It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

 
Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously

    If you find inappropriate content, please report it to Barnes & Noble
    Why is this product inappropriate?
    Comments (optional)