Creating Mobile Apps with jQuery Mobile – A good & wide-ranging how-to guide – #programming #bookreview

Creating Mobile Appls with jQuery Mobile
Shane Gliser
(Packt Publishing – paperback, Kindle)

The long tagline on the cover of Shane Gliser’s new book deftly sums up its contents:  “Learn to make practical, unique, real-world sites that span a variety of industries and technologies with the world’s most popular mobile development library.”

Gliser unabashedly describes himself as a jQuery “fanboy…if it’s officially jQuery, I love it.” He is an experienced mobile developer and blogger who operates Roughly Brilliant Digital Studios. He also has some background in mobile UX (user experience).

Both aspects of that background serve him well in his smoothly written, nicely illustrated how-to book that zeroes in on jQuery Mobile, a  “touch-optimized” web framework for smartphones and tablets.

You may be surprised when you extract the 234-page book’s code examples and related items and find that the ZIP file is almost 100MB in size. Gliser covers a lot of ground in his 10 chapters. And each chapter contains a project.

Still, what you don’t do in the first chapter, “Prototyping jQuery Mobile,” is work at a computer. In the true spirit of UX, Gliser has you start first with a pen and some 3×5 note cards. Your goal is to rough out some designs for a jQuery Mobile website for a new pizzeria.

Why the ancient technology? “We are more willing to simply throw out a drawing that took less than 30 seconds to create,” Gliser writes. Otherwise, it’s too easy to stay locked into one design while trying different ways to make its code work. And: “Actually sketching by hand uses a different part of the brain and unlocks our creative centers.”

Best of all, working first with paper sketches enables team members who are not coders to contribute some comments, suggestions, and corrections for the emerging design.

In Chapter 2, “A Mom-and-Pop Mobile Website,” you step over to your computer with the paper prototype in hand and start converting the final design “into an actual jQuery Mobile (jQM) site that acts responsively and looks unique.” You also begin building “a configurable server-side PHP template,” and you work with custom fonts, page curl effects using CSS, and other aspects of creating and optimizing a mobile site.

“Mobile is a very unforgiving environment,” Gliser cautions, “and some of the tips in this section will make more difference than any of the ‘best coding practices.’” Indeed,  he wants you to be aware of optimization “at the beginning. You are going to do some awesome work and I don’t want you or your stakeholders to think it’s any less awesome, or slow, or anything else because you didn’t know the tricks to squeeze the most performance out of your systems. It’s never too early to impress people with the performance of your creations.”

Chapter 3, “Analytics, Long forms, and Front-end Validation,” moves beyond “dynamically link[ing] directly into the native GPS systems of iOS and Android.” Instead, Gliser introduces how to work with Google static maps, Google Analytics, long and multi-page forms, and jQuery Validate. As for static maps, he says, “Remember to always approach things from the user’s perspective. It’s not always about doing the coolest thing we can.” Indeed, a static map may be all the user needs to decide whether to drive to a business, such as a pizzeria, or just call for delivery. And, as for Google Analytics: “Every website should have analytics. If not, it’s difficult to say how many people are hitting your site, if we’re getting people through our conversion funnels, or what pages are causing people to leave our site.”

Meanwhile, desktop users are familiar with (and frequently irritated by) long forms and multi-page forms. Lengthy forms can be real deal-breakers for users trying to negotiate them on mobile devices. The author presents some ways to shorten long forms and break them “into several pages using jQuery Mobile.” And he emphasizes the importance of using the jQuery Validate plug-in to add validation to any page that has a form, so the user can see quickly and clearly that an entry has a problem.

The focus in Chapter 4, “QR Codes, Geolocation, Google Maps API, and HTML5 Video,” is on handling concepts that can be “applied to any business that has multiple physical locations.” Gliser uses a local movie theater chain as his development example. A site is created that makes use of QR codes, geolocation, Google Maps, and linking to YouTube movie previews. Then, he shows how to use embedded video to keep users on the movie chain’s site rather than sending them off to YouTube.

In Chapter 5, the goal is “to create an aggregating news site based off social media.” So the emphasis shifts to “Client-side Templating, JSON APIs, and HTML5 Web Storage.” Notes Gliser: “Honestly, from a purely pragmatic perspective, I believe that the template is the perfect place for code. The more flexible, the better. JSON holds the data and the templates are used to transform it. To draw a parallel, XML is the data format and XSL templates are used to transform. Nobody whines about logic in XSL; so I don’t see why it should be a problem in JS templates.”

Next, he shows how to patch into Twitter’s JSON API to get “the very latest set of trending topics” and “whittle down the response to only the part we want…and pass that array into JsRender for…well…rendering” in a manner that will be “a lot cleaner to read and maintain” than looping through JSON and using string concatenation to make the output.

Other topics in Chapter 5 include programmatically changing pages in jQuery Mobile, understanding how jQuery Mobile handles generated pages and Document Object Model (DOM) weight management, and working with RSS feeds. Gliser points out that there is still “a lot more information out there being fed by RSS feeds than by JSON feeds.” The chapter concludes with looks at how to use HTML5 web storage (it’s simple, yet it can get “especially tricky on mobile browsers”), and how to leverage the Google Feed API. Says Gliser: “The Google Feeds [sic] API can be fed several options, but at its core, it’s a way to specify an RSS or ATOM feed and get back a JSON representation.”

Chapter 6 jumps into “the music scene. We’re going to take the jQuery Mobile interface and turn it into a media player, artist showcase, and information hub that can be saved to people’s home screens,” Gliser writes. He proceeds to show how “ridiculously simple it can be to bring audio into your jQuery Mobile pages.” And he explains how to use HTML5 manifest “and a few other meta tags” to save an app to the home screen. Furthermore, he discusses how to test mobile sites using “Google Chrome (since its WebKit) or IE9 (for the Windows Phone)” as browsers that are shrunken down to mobile size. “Naturally, this does not substitute for real testing,” he cautions. “Always check your creations on real devices. That being said, the shrunken browser approach will usually get you 97.5 percent of the way there. Well…HTML5 Audio throws that operating model right out the window.”

Since “mobile phones are quickly becoming our photo albums,” Gliser’s Chapter 7, “Fully Responsive Photography,” shows first how to create a basic gallery using Photoswipe. Then, in a section focused on “supporting the full range of device sizes,” he explains how to start using responsive web design (RWD), “the concept of making a single page work for every device size.” The issues, of course, range from image sizes and resolutions to text sizes and character counts per line, on screens as small as smart phones and tablets, or larger.

In Chapter 8, “Integrating jQuery Mobile into Existing Sites,” three topics are key: (1) “Detecting mobile – server-side, client-side, and the combination of the two”; (2) “Mobilizing full site pages – the hard way”; and (3) Mobilizing full site pages – the easy way.” Gliser avoids some potential “geek war” controversies over “browser sniffing versus feature detection” when detecting mobile devices. He zeroes in first on detection using WURFL for “server-side database-driven browser sniffing.” He also shows how to do JavaScript-based browser sniffing, which he concedes may be “the worst possible way to detect mobile but it does have its virtues,” especially if your budget is small and you want to exclude older devices that can’t handle some new JavaScript templating. He also describes JavaScript-based feature detection using Modernizer and some other feature-detection methods.

As for mobilizing full-site pages “the hard way,” he states that there is really “only one good reason: to keep the content on the same page so that the user doesn’t have one page for mobile and one page for desktop. When emails and tweets and such are flying around, the user generally doesn’t care if  they’re sending out the mobile view or the desktop view and they shouldn’t.” He focuses on how “it’s pretty easy to tell what parts of a site would translate to mobile” and how to add data attributes to existing tags “to mobilize them. When jQuery’s libraries are not present on the page, these attributes will simply sit there and cause no harm. Then you can use one of our many detection techniques to decide when to throw the jQM libraries in.”

Mobilizing full-size pages “the easy way” involves, in his view, “nothing easier and cleaner than just creating a standalone jQuery Mobile page…and simply import the page we want with AJAX. We can then pull out the parts we want and leave the rest.” His code samples show how to do this.

Chapter 9, “Content Management Systems and jQM” looks at the pros and cons of using three different content management systems (CMS) with jQuery Mobile: WordPress, Drupal, and Adobe Experience Manager. “The key to get up and running quickly with any CMS is, realizing which plugins and themes to use,” Gliser writes.  He also explains how to use mobile theme switchers.

Drupal offers some standard plugins that provide contact forms, CAPTCHA, and custom database tables and forms, and enable you to “create full blown web apps, not just brochureware sites,” he notes. But: “The biggest downside to Drupal is that it has a bit of a learning curve if you want to tap its true power, Also, without some tuning, it can be a little slow and can really bloat your page’s code.” .

As for Adobe Experience Manager (AEM), Gliser merely introduces it as a “premier corporate CMS” and a “major CMS player that comes with complete jQuery Mobile examples.” He doesn’t show “how to install, configure, or code for AEM. That’s a subject for several training manuals the size of this book.”

Chapter 10, the final chapter, is titled “Putting It All Together — Flood.FM.” Using what you’ve learned in the book (including prototyping the interfaces on paper first), you create “a website where listeners will be greeted with music from local, independent bands across several genres and geographic regions.” Along the way, Gliser introduces Balsamiq, “a very popular UX tool for rapid prototyping.” He discusses using Model-View-Controller (MVC), Model-View-ViewModel (MVVM), and Model-View-Whatever (MV*) development structures with jQuery Mobile. He shows how to work with the Web Audio API , and he illustrates how to prompt users to download the Flood.FM app to their home screens. He finishes up with brief discussions of accelerometers, cameras, “APIs on the horizon,” plus “To app or not to app, that is the question” and whether you should compile an app or not. Finally, he shows PhoneGap Build, the “cloud-based build service for PhoneGap.”

Bottom line: Shane Gliser’s book covers a lot of  useful ground for those who are ready to learn jQuery Mobile.

Si Dunn

Advertisements

Drupal for Designers – Putting Drupal to work, with good planning and design up front – #bookreview

Drupal for Designers
Dani Nordin
(O’Reilly, paperbackKindle)

Drupal has (1) a lot of fans, (2) a lot of people who wonder what the heck it is, and (3) a lot of people who complain about it.

Sometimes, a Drupal user is each of these at the same time.

Officially, Drupal is “an open source content management platform powering millions of websites and applications.” Thousands of add-on modules and designs are available, and individuals, groups, organizations and companies use Drupal “to build everything from personal blogs to enterprise applications.” Indeed, some big and well-known sites use Drupal, including The Economist, Examiner.com and the White House, to name a few.

There is a learning curve, but Drupal specialist Dani Nordin’s new book can help you (1) get started with Drupal, (2) help you wrap your mind “around the way Drupal handles design challenges,” and (3) help you master important techniques and tools. You will also learn the importance of doing detailed site planning first and keeping up with version control, even if you are a solo designer.

The book focuses on Drupal 7, but much of the material can be used with Drupal 6. Some parts of the book are “version-agnostic.”

Dani Nordin also offers case studies involving two of her ongoing efforts, so readers can “see how these ideas work in the real world, with all the frustrations and moments of unexpected joy that happen in real projects.”

She adds: “Through these projects, I can show you a typical Drupal design process—from creating the project brief to ideation and sketches to prototyping and applying our look and feel to the site’s theme.”

Drupal for Designers is a compilation of three previous short guides, with new materials added. It is aimed, the author says, at “the solo site builder or small team that’s itching to do interesting things with Drupal but needs a bit of help understanding how to set up a successful Drupal project.”

To work with Drupal, you should have some familiarity with HTML and CSS, and you should be open to learning some PHP.

Drupal for Designers has 303 pages and 22 chapters that are grouped into seven parts:

  • Part 1: Discovery and User Experience
  • Part 2: Sketching, Visual Design, and Layout
  • Part 3: Setting Up a Local Development Environment
  • Part 4: Prototyping in Drupal
  • Part 5: Making It Easier to Start Projects
  • Part 6: Working with Clients
  • Part 7: Sample Documents (for designers, including a project brief, a work agreement, and a project proposal)

There is no one “right” way to use Drupal, the author notes. “Every Drupal designer and site builder has his or her own approach to creating projects….”

But careful planning and design work up front will be essential to your success, she emphasizes.

Si Dunn

Using Drupal, 2nd Edition – Excellent how-to-guide – #bookreview #programming #in #Drupal

Using Drupal, 2nd Edition
Angela Byron, Addison Berry and Bruno De Bondt
(O’Reilly, paperback, list price $44.99; Kindle edition, list price $35.99)

Drupal is an increasingly popular open source framework for (1) developing websites, using community contributed modules, and (2) content management using plug-in modules, also community-contributed.

“The beauty of all of these modules,” says Drupal founder and project lead Dries Buytaert, in the foreword to Using Drupal, 2nd Edition, “is that they empower website builders to assemble rich and powerful websites quickly and easily without having to be a programmer.”

Using Drupal, 2nd Edition focuses on “Choosing and Configuring Modules to Build Dynamic Websites” using Drupal 7, “the latest version of this open source system.”

This newly updated how-to guide is aimed at developers who have at least some minimal experience with Drupal. But beginners can handle it, too. The writing is clear and concise, and the 467-page book has many hands-on exercises, screenshots, step-by-step lists, case studies, links to examples, and other useful and helpful information. The book is not recommended for developers seeking “hardcore, nitty-gritty details about Drupal’s API functions.”

The book’s how-to projects include building a job posting board, a photo gallery, an online store, a product review database and an event calendar.

Some big-name sites now use Drupal, including the White House, The Economist magazine, Sony BMG Records, Lifetime Television, and many others. But small businesses and individual users can put it to work, too. And this excellent book shows how.

— Si Dunn

#

Mapping with Drupal – How to build artful, engaging & useful online maps – #bookreview

Mapping with Drupal
By Alan Palazzolo and Thomas Turnbull
(O’Reilly, paperback, list price $19.99; Kindle edition, list price $9.99)

Drupal is an open source content management platform with a long track record, a good reputation, and many users around the world. Drupal now powers more than 1 percent of the Internet and is used on more than a million websites, the authors note.

And: “Over a quarter of adult Americans use mobile or social location-based services such as Google Maps, Weather lookups, and restaurant searches….As location becomes a core part of what users expect from websites and mobile devices, Drupal gives you the tools to create a website that meets these demands.”

Palazzolo’s and Turnbull’s Mapping with Drupal assumes that “you know how to install Drupal, install contributed modules, and enable themes; maybe you have already built a site that is used publicly.”

If you are not yet at that level, this well-written book still contains plenty of useful information and references that can help you get up to speed on mapping as you learn Drupal.

“The great strength of Drupal is its relative simplicity, and its power to interact with content on your site and outside data sources,” the writers state.

“In Drupal 7 there is an abstract data concept called an entity that is a container for a specific sort of data, such as a user account, a blog post, or a restaurant. All entities can have fields, which are structured input mechanisms. Three possible fields for a restaurant entity could be could be names, addresses, and phone numbers. You can make almost any content in Drupal location-aware without any code, just by adding Drupal modules that provide geographic fields. With the right combination of modules, you can create maps that allow your users to find geographically relevant information.”

Drupal and mapping now have a relatively long track record, the authors add. “Drupal was one of the earliest content management systems to integrate with external mapping services. The first of these services to be integrated was the Google Maps API in 2005, through the Location and GMap modules. These modules have gained a lot of traction over the years and are still being developed in Drupal 7.”

Mapping with Drupal is structured with eight chapters and three appendices.

  • Chapter 1. Why Map with Drupal
  • Chapter 2. Web Mapping Basics
  • Chapter 3. Spatial Data
  • Chapter 4. Displaying Maps
  • Chapter 5. Extending Map Interactions
  • Chapter 6. Making Beautiful Maps
  • Chapter 7. Managing Maps as Features
  • Chapter 8. Conclusion

The concluding chapter discusses next steps in map making, as well as the future of mapping with Drupal.

The Drupal website is rich with documentation, and the authors, in Appendix A, recommend a number of books on mapping and Drupal, as well. Appendix B briefly describes some common and uncommon map projections, such as south-oriented maps. Appendix C, meanwhile, is a short glossary of mapping and Drupal terms.

The book is not a dry how-to discourse, although it contains a number of code examples, tips and screen shots. The authors have long connections both to Drupal and mapping. To them, “Maps are art” and “Maps tell a story.” And this love of the beauty, power and influence of maps and mapping shines through in their text.

They contend: “This idea that maps have the power to literally define the world around us, and not just represent it, still holds true today and is in your hands as a map maker.”

#

Si Dunn is a novelist, screenwriter, freelance book reviewer, and former software technical writer and software/hardware QA test specialist. His latest book is Dark Signals, a Vietnam War memoir available soon in paperback. He also is the author of a detective novel, Erwin’s Law, a novella, Jump, and several other books and short stories.