| Preface |
|
1 | (6) |
| Chapter 1 Introduction to a Responsive Web Application |
|
7 | (14) |
|
Benefits of a responsive design |
|
|
8 | (1) |
|
Server- versus client-side detection |
|
|
9 | (1) |
|
|
|
9 | (2) |
|
|
|
10 | (1) |
|
|
|
10 | (1) |
|
|
|
11 | (1) |
|
|
|
11 | (1) |
|
|
|
12 | (1) |
|
|
|
12 | (2) |
|
|
|
14 | (1) |
|
|
|
15 | (1) |
|
|
|
15 | (2) |
|
|
|
16 | (1) |
|
|
|
16 | (1) |
|
|
|
16 | (1) |
|
|
|
17 | (1) |
|
|
|
17 | (1) |
|
Bootstrap 3 for a responsive design |
|
|
17 | (1) |
|
|
|
18 | (1) |
|
|
|
19 | (2) |
| Chapter 2 Creating a Responsive Layout for a Web Application |
|
21 | (32) |
|
Required software and tools |
|
|
21 | (1) |
|
Setting up a Java-based web project |
|
|
22 | (3) |
|
|
|
25 | (2) |
|
Creating a wireframe for a web application |
|
|
27 | (1) |
|
|
|
28 | (1) |
|
Creating a layout for large and small devices |
|
|
29 | (1) |
|
|
|
29 | (12) |
|
|
|
29 | (2) |
|
|
|
31 | (2) |
|
Developing the menu section |
|
|
33 | (2) |
|
Developing the hero section |
|
|
35 | (1) |
|
Developing the list of products section |
|
|
36 | (5) |
|
|
|
41 | (4) |
|
|
|
45 | (7) |
|
The Opera Mobile emulator |
|
|
45 | (7) |
|
|
|
52 | (1) |
| Chapter 3 Adding Dynamic Visuals to a Web Application |
|
53 | (28) |
|
|
|
53 | (9) |
|
|
|
53 | (2) |
|
|
|
55 | (3) |
|
Converting from POJO to JSON |
|
|
58 | (1) |
|
|
|
58 | (4) |
|
Building a jQuery AJAX method |
|
|
62 | (12) |
|
|
|
64 | (2) |
|
The jQuery templating mechanism |
|
|
66 | (2) |
|
|
|
68 | (1) |
|
|
|
69 | (2) |
|
Modifying the style of the product |
|
|
71 | (3) |
|
Building an image carousel |
|
|
74 | (5) |
|
|
|
79 | (2) |
| Chapter 4 Twitter Integration |
|
81 | (32) |
|
Introduction to Twitter4J |
|
|
81 | (1) |
|
Configuring Twitter4J in a web application |
|
|
82 | (1) |
|
|
|
83 | (15) |
|
Creating a Twitter button |
|
|
83 | (3) |
|
Setting up a new Twitter application |
|
|
86 | (5) |
|
The Twitter Permissions tab |
|
|
88 | (1) |
|
|
|
89 | (1) |
|
|
|
90 | (1) |
|
|
|
90 | (1) |
|
Developing a Twitter servlet |
|
|
91 | (5) |
|
|
|
93 | (3) |
|
Developing a Twitter callback servlet |
|
|
96 | (6) |
|
|
|
96 | (2) |
|
|
|
98 | (4) |
|
Posting a tweet with an image |
|
|
102 | (9) |
|
Product store with an image |
|
|
103 | (3) |
|
|
|
106 | (1) |
|
|
|
107 | (1) |
|
|
|
108 | (2) |
|
Changes in the Twitter callback servlet |
|
|
110 | (1) |
|
|
|
111 | (1) |
|
|
|
111 | (2) |
| Chapter 5 Facebook Integration |
|
113 | (24) |
|
Introduction to the Facebook SDK for JavaScript |
|
|
113 | (2) |
|
Creating a Facebook application |
|
|
115 | (2) |
|
Configuring the Facebook SDK |
|
|
117 | (3) |
|
|
|
118 | (21) |
|
|
|
118 | (1) |
|
The Advanced configuration |
|
|
119 | (1) |
|
The Migrations configuration |
|
|
120 | (1) |
|
Configuring a Facebook login |
|
|
120 | (2) |
|
Configuring the Facebook Like and Share buttons |
|
|
122 | (5) |
|
Configuring Facebook comments |
|
|
127 | (1) |
|
|
|
128 | (8) |
|
|
|
136 | (1) |
| Chapter 6 Google+ Integration |
|
137 | (14) |
|
Introduction to the Google+ API |
|
|
137 | (2) |
|
|
|
139 | (3) |
|
|
|
139 | (2) |
|
Including the Google script |
|
|
141 | (1) |
|
|
|
142 | (2) |
|
Integrating +1 recommendations |
|
|
144 | (5) |
|
|
|
149 | (2) |
| Chapter 7 Linking Dynamic Content from External Websites |
|
151 | (20) |
|
Introduction to the YouTube API |
|
|
151 | (1) |
|
Configuring a YouTube API |
|
|
151 | (3) |
|
Searching for a YouTube video |
|
|
154 | (11) |
|
|
|
156 | (1) |
|
|
|
156 | (1) |
|
The YouTube button markup |
|
|
156 | (2) |
|
Asynchronous search in YouTube |
|
|
158 | (4) |
|
Rendering the YouTube search results |
|
|
162 | (3) |
|
Embedding a YouTube video |
|
|
165 | (4) |
|
|
|
169 | (2) |
| Chapter 8 Integrating E-Commerce or Shopping Applications with Your Website |
|
171 | (24) |
|
|
|
171 | (7) |
|
Adding a product to the cart |
|
|
171 | (2) |
|
Displaying the minimal view of the cart |
|
|
173 | (1) |
|
Displaying the cart details in a table |
|
|
174 | (4) |
|
Configuring the PayPal Developer API |
|
|
178 | (2) |
|
Integrating the PayPal Developer API |
|
|
180 | (11) |
|
Configuring the Shopify API |
|
|
191 | (1) |
|
Integrating the Shopify API |
|
|
192 | (2) |
|
|
|
194 | (1) |
| Chapter 9 Integrating the Google Currency Converter with Your Web Application |
|
195 | (14) |
|
The Google Currency Converter API |
|
|
195 | (3) |
|
Configuring the Google Currency Converter API |
|
|
198 | (1) |
|
Integrating the Currency Converter API |
|
|
198 | (1) |
|
Developing our currency converter |
|
|
199 | (9) |
|
Building the currency list dropdown |
|
|
199 | (4) |
|
Processing the conversion request |
|
|
203 | (5) |
|
|
|
208 | (1) |
|
|
|
208 | (1) |
| Chapter 10 Debugging and Testing |
|
209 | (12) |
|
Implementing the debugging mechanism |
|
|
210 | (7) |
|
|
|
210 | (1) |
|
The Designmodo Responsive Test tool |
|
|
210 | (1) |
|
The Opera Mobile emulator tool |
|
|
211 | (1) |
|
|
|
211 | (1) |
|
The Viewport Resizer tool |
|
|
212 | (1) |
|
The L-Square Responsive Design Inspector tool |
|
|
212 | (1) |
|
|
|
212 | (1) |
|
The More Display Resolutions 1.0 add-on |
|
|
213 | (1) |
|
The BrowserStack Responsive tool |
|
|
214 | (1) |
|
|
|
214 | (1) |
|
|
|
215 | (1) |
|
|
|
215 | (1) |
|
The Responsive Design Checker tool |
|
|
216 | (1) |
|
|
|
216 | (1) |
|
The Responsive Test online tool |
|
|
217 | (1) |
|
Testing the app as a whole |
|
|
217 | (2) |
|
|
|
219 | (2) |
| Index |
|
221 | |
