Developing Responsive Web Applications with AJAX and jQuery Design and develop your very own responsive web applications using Java, jQuery, and AJAX Sandeep Kumar Patel BIRMINGHAM - MUMBAI Developing Responsive Web Applications with AJAX and jQuery Copyright © 2014 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: July 2014 Production reference: 1180714 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78328-637-9 www.packtpub.com Cover image by Abhishek Pandey ([email protected]) Credits Author Project Coordinator Sandeep Kumar Patel Aaron S. Lazar Reviewers Proofreaders Fernando Doglio Simran Bhogal Md. Zahid Hasan Paul Hindle Mohammad Amzad Hossain Indexers Jake Kronika Hemangini Bari Rekha Nair Commissioning Editor Julian Ursell Priya Subramani Acquisition Editor Graphics Mohammad Rizvi Abhinash Sahu Content Development Editor Production Coordinator Balaji Naidu Shantanu Zagade Technical Editors Cover Work Venu Manthena Shantanu Zagade Mrunmayee Patil Copy Editors Roshni Banerjee Sarang Chari Janbal Dharmaraj Gladson Monteiro Deepa Nambiar Karuna Narayanan Adithi Shetty About the Author Sandeep Kumar Patel is a senior web developer and the founder of www.tutorialsavvy.com, a widely-read programming blog since 2012. He has more than 4 years of experience in object-oriented JavaScript and JSON-based web application development. He is GATE 2005 Information Technology (IT) qualified and has a Master's degree from VIT University, Vellore. At present, he holds the position of Web Developer in SAP Labs, India. You can find out more about him from his LinkedIn profile (http://www.linkedin.com/in/techblogger). He has received the DZone Most Valuable Blogger (MVB) award for technical publications related to web technologies. His article can be viewed at http://www.dzone.com/users/sandeepgiet. He has also received the Java Code Geek (JCG) badge for a technical article published in JCG. His article can be viewed at http://www.javacodegeeks.com/author/sandeep-kumar-patel/. About the Reviewers Fernando Doglio has been working as a web developer for the past 10 years. During that time, he fell in love with the Web and has had the opportunity of working with most of the leading technologies such as PHP, Ruby on Rails, MySQL, Node.js, AngularJS, AJAX, REST APIs, and others. In his spare time, he likes to tinker and learn new things, which is why his GitHub account keeps getting new repos every month. He's also a big open source supporter and tries to win the support of new people with the help of his site: http://www.lookingforpullrequests.com/. He can be contacted on Twitter at @deleteman123. When not programming, he can be seen spending time with his family. Md. Zahid Hasan is a professional web developer. He got his BSc and MSc in Information and Communication Engineering from University of Rajshahi (RU), Rajshahi. Now, he is working as a Lecturer in the department of Computer Science and Engineering at Green University of Bangladesh. He previously worked as a Software Developer at SEleven IT Limited for 2 years in Bangladesh. He has a wide range of technical skills, Internet knowledge, and experience across the spectrum of online development in the service of building and improving online properties for multiple clients. He enjoys creating site architecture and infrastructure, backend development using open source tools such as Linux, Apache, MySQL, and PHP (LAMP), and frontend development with CSS and HTML/XHTML. Mohammad Amzad Hossain has 7 years of experience building large-scale complex websites and web applications. He works as a Branch Manager in Sourcetop Inc. where he leads an offshore team in Dhaka, Bangladesh. His day-to-day life requires him to plan, analyze, guide, and provide solutions for complex requirements. In his free time, he digs into recent trends in web development and follows hundreds of RSS that help him to keep up in the fast-track world of development. He has a BSc degree in Computer Science Engineering. Jake Kronika, a software developer and UI architect with over 20 years of experience, brings to bear extensive proficiency implementing both server-side and user interface (UI) solutions including multiple responsive web applications to date. He began his career early in life using online tools for static content and rapidly progressed to building dynamic applications incorporating databases and server-side scripting languages. He has been a Senior User Interface Software Engineer at ADP Dealer Services in Seattle, WA, USA from 2011. Prior to this, he occupied numerous senior-level positions in the UI space in Chicago, IL. He has also balanced considerable freelance work under a sole proprietorship named Gridline Design & Development, accessible at http://gridlined.com/, online since 1999. Over the past several years, particularly as the HTML, CSS, and JavaScript portions of websites have experienced rapid evolution, he has continually sought out and digested new technological knowledge through reading, personal and client projects, and other means. Some of his favorite current tools include Node.js and AngularJS, Less/Sass, and Git VCS. Prior to this book, he was a technical reviewer for the following Packt Publishing titles: • Django JavaScript Integration: AJAX and jQuery, Jonathan Hayward, in January 2011 • jQuery UI 1.8: The User Interface Library for jQuery, Dan Wellman, in August 2011 • jQuery Tools UI Library, Alex Libby, in February 2012 www.PacktPub.com Support files, eBooks, discount offers, and more You might want to visit www.PacktPub.com for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. Why subscribe? • Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • On demand and accessible via web browser Free access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access. Table of Contents Preface 1 Chapter 1: Introduction to a Responsive Web Application 7 Benefits of a responsive design 8 Server- versus client-side detection 9 The technology stack 9 HTML5 10 CSS3 and media queries 10 JavaScript 11 Measuring responsiveness 11 Devices and screens 12 Media types 12 Media queries 14 Role of media queries 15 Responsive frameworks 15 Bootstrap 16 The Foundation framework 16 The Cascade framework 16 The Pure CSS framework 17 The Gumby framework 17 Bootstrap 3 for a responsive design 17 What are we building? 18 Summary 19