Domain: modernizr.com
Stories and comments across the archive that link to modernizr.com.
Stories · 2
-
Book Review: Creating Mobile Apps With JQuery Mobile
sagecreek writes "You can judge this book, at least in part, by the lengthy tagline on its cover: '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.' jQuery might not be your favorite framework on the long, long list of JavaScript possibilities. But Shane Gliser unabashedly describes himself as a jQuery 'fanboy...if it's officially jQuery, I love it.' Gliser is an experienced mobile developer and blogger who operates Roughly Brilliant Digital Studios. He also has some background in mobile UX (user experience), and both qualities show in this smoothly written, well-illustrated, 234-page how-to book that focuses on jQuery Mobile, a 'touch-optimized' web framework for smartphones and tablets." Read below for the rest of sagecreek's review. Creating Mobile Apps With JQuery Mobile author Shane Gliser pages 234 pages publisher Packt Publishing rating 9/10 reviewer sagecreek ISBN 9781782160069 summary Takes the reader from mobile prototyping and creating templates to mobile development and creating versatile mobile sites, with a project in each chapter. Don't be surprised when you extract the book's code examples and related items from a ZIP file that is almost 100MB in size. Gliser covers a lot of ground, and he covers it well in his 10 chapters. And each chapter contains a project.
The first thing you don't do in Chapter 1, "Prototyping jQuery Mobile," is work at a computer. In the true spirit of UX, Gliser briefly has you work with a pen and some 3x5 note cards. (Remember those?) Your initial goal is to roughly sketch out some designs for a jQuery Mobile website for a new pizzeria. But why the ancient technology? "We are more willing to simply throw out a drawing that took less than 30 seconds to create," Gliser writes. And: "Actually sketching by hand uses a different part of the brain and unlocks our creative centers." Furthermore, those on your team who are not coders can contribute comments, suggestions, and corrections to the emerging design.
In Chapter 2, "A Mom-and-Pop Mobile Website," you step over to your computer with Chapter 1's paper prototype in hand. You start converting the sketched 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. It is "considering throwing its hat into the mobile ring," so 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. Explains 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," begins with creating a basic gallery using Photoswipe. Then, in a section focused on "supporting the full range of device sizes," he shows 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, plus 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. "For WordPress, I would not recommend a jQuery Mobile plugin. As I was experimenting for this chapter, it broke the admin interface and was, in general, a miserable experience. However, there are several jQuery Mobile themes that will serve you well. Some are free, some paid." He explains how to use mobile theme switchers.
Meanwhile, 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." But: "The biggest downside to Drupal is that it has a bit of a learning curve if yo want to tap its true power, Also, without some tuning, it can be a little slow and can really bloat your page's code," he says.
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." He adds: "If you work for a company that can afford AEM, you'll already be well-versed in the mobile implementation. The power this platform gives to content authors is astounding."
Chapter 10, the final chapter, is titled "Putting It All Together — Flood.FM." Using what you've learned in the book, including paper prototyping the interfaces, 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 introduces 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."
Shane Gliser's book does indeed cover a lot of ground, clearly and with good examples. If you truly demand that some nits must be picked, I can report that an occasional dash is missing or a comma sometimes shows up out of place, such as this example in Chapter 2: "A practice is only best until a new practice, [misplaced comma] comes along that is better." In the printed book's table of contents, there are style and spelling glitches in the heading for Chapter 3. "Analytics, long forms, and frontend validation" should be "Analytics, Long Forms, and Front-end Validation." And, in Chapter 5, Gliser refers to the "Google Feeds API" when it's actually "Google Feed API." But the term "Google Feeds API" commonly is misused by developers on Stack Overflow and other sites.
I am not a mobile developer. I am a tech writer, frequent book reviewer, and occasional coder. I have played with some of the code examples in this book, but I have not tried them all. So I can't say if there are code glitches. However, the book was reviewed before publication by at least four software professionals with impressive resumes.
Aside from occasional spots where the text needed tighter editing, this book is, in my view, well written and rich with information, examples, sources, and tips for working effectively with jQuery Mobile. I intend to put it to good use as I continue learning.
You can purchase Creating Mobile Apps with jQuery Mobile from amazon.com. Slashdot welcomes readers' book reviews (sci-fi included) -- to see your own review here, read the book review guidelines, then visit the submission page. -
HTML5: Up and Running
eldavojohn writes "As you're probably aware, HTML is in a transition period, lost somewhere in the mire between versions 4 and 5. That doesn't stop us from using the latest and greatest, but it does create a requirement for gracefully falling back when a user does not have native support for features like canvas, video, audio, local storage, web workers and geolocation. HTML5: Up and Running is a great resource for someone tasked with bringing HTML4 webpages up to HTML5 standards, but it's mediocre-to-poor in illustrating advanced usage. For example, author Mark Pilgrim invests around thirty pages on video, while putting at most half a page toward web workers. Some of this is not his fault, due to support (or lack thereof), but the book felt skimpy at a couple hundred pages. For me, this book had value if only for the many wrapper scripts and workarounds like Modernizr, complete with code snippets. This book is for the beginner to intermediate developer and also for developers tasked with implementing HTML5 immediately. I received my copy for review from O'Reilly, but you can also find a draft of it under CC-BY-3.0 license. And the sample code is available online, so you can follow along." Read on for the rest of eldavojohn's review. HTML5: Up and Running author Mark Pilgrim pages 224 publisher O'Reilly Media rating 8/10 reviewer eldavojohn ISBN 978-0596806026 summary A brief initial look at the cemented changes and features in HTML5 as well as those to come. The first chapter gives the impression that Pilgrim wants the reader to feel the pains so many in the HTML working groups have felt over the past two decades. But after all the anecdotes, after all the distribution list forensics, after 'too bad I'm doing it this way,' this chapter could be shortened down to one sage and universal rule for software: those who ship win. If you want to dictate HTML5 behavior and interfaces, sitting around e-mailing doesn't matter when other browsers are shipping code that works.
Chapter two is entirely focused on checking whether or not the user's browser supports any of the many features HTML5 is bringing to web developers' fingertips. An important thing to note throughout the book is that Pilgrim makes sure to keep mobile browsers in mind and a part of the discussion. While useful, this occupies fifteen verbose pages of the already short book.
Chapter three has really good material in it if you're looking to evolve from HTML4 to HTML5 without any of the added functionality (just markup). It makes for cleaner code and introduces all the new tags and their functionality. Here you'll see how navigation has been generalized (much to the joy of disabled/impaired users who rely on screen readers) and how to properly transform and maintain HTML towards to HTML5.
Chapter four does a good job of beginning to cover the canvas element and drawings in HTML5. Drawing shapes, lines, setting text and rendering images multiple times on the canvas are all covered. The chapter presents many examples and ends with a simple implementation of a game of halma. It's inefficient, and he alludes to better ways of rendering game graphics (like redrawing only 'dirty' parts of the screen). But I hope he takes the time to flesh out this chapter, as I've seen impressive things done with canvas already. I really hoped for more out of this chapter, but must concede that it might be better off in a book devoted to game design.
The next chapter exhaustively covers video and audio codecs. From there the book steps the user through how to make their page foolproof so that the video tag gracefully resorts back to Flash (or whatever you want), should it be unable to find a supported video codec. From batch encoding with ffmpeg to Firefogg to using handbrake, the author holds the user's hand and more (even explains MIME types). This chapter is very valuable to anyone who is sitting on some video data that wants anyone to be able to access it and isn't opposed to multiple encodings.
I'd like to mention also that Pilgrim is an entertaining author. As he covers the available codecs, he pokes fun at a few corporations:MPEG-1 Audio Layer 3 is colloquially known as "MP3." If you haven't heard of MP3s, I don't know what to do with you. Walmart sells portable music players and calls them "MP3 players."Walmart. Anyway ...
And in regards to DRM:
Originally, all AAC files "bought" from the iTunes Store were encrypted with Apple's proprietary DRM scheme, called FairPlay. Selected songs in the iTunes Store are now available as unprotected AAC files, which Apple calls "iTunes Plus" because it sounds so much better than calling everything else "iTunes Minus."
It should be noted that Pilgrim can at times seem a little pro-Google. They are his employer, but I would appreciate it if he was an equal opportunity humorist and didn't pick on just the others.
Chapter six gives a short introduction to the geo-location features and the API provided by HTML5. It explains how to use gears or geo.js to work around IE's lack of support and also explains how to opt out of this sort of service — as it might seem a little too much for some people. I guess this is a feature for advertisers (not like they aren't doing it already, anyway).
Chapter seven briefly covers local storage in HTML5 and the precursors to it (cookies). It's got a few code snippets you can tinker with. There's a great meme embedded in this chapter: 'userData allows web pages to store up to 64 KB of data per domain, in a hierarchical XML-based structure. (Trusted domains, such as intranet sites, can store 10 times that amount. And hey, 640 KB ought to be enough for anybody.)' The chapter covers competing visions and notes that this is a separate effort from the core elements of HTML5. At the end, Pilgrim adds persistence to the halma game from earlier. This is already being abused, by the way.
Chapter eight shows how to markup your pages so that they operate offline. You include resources in the cache manifest file to let the browser know what to cache for offline usage (and more importantly, what not to cache). Again, at the end of this chapter, we take the halma game offline.
Chapter nine is one of the better chapters, as it extensively covers the various new types of form inputs we have in HTML5. Gone are the days of importing calendar scripts to create a date popup widget (although we already know how to check whether that's required). Search inputs, different kinds of integer selectors and color pickers are all covered in this chapter. While you might have experienced this in many other UI technologies, we're finally receiving native support in the browser!
The final chapter is relatively lengthy and very informative. It explains microdata and how to make HTML5 extensible so you can define your own markup (while keeping it normal so that older browsers don't plotz). It's like advanced metadata. You might wonder: Why would you do this? Well, the chapter continually shows how Google search results interpret this data ... but we aren't informed of any competitors using it or any plans of them using it. Pilgrim informs us that we should put this around our data and let others decide what to do with it (they might surprise you). So while the work is pretty extensive, you won't immediately see the fruits of your labors (unless everyone else is already doing it).
HTML5 has a long way to go. I hope this book is a living document, and I imagine the final O'Reilly book on HTML5 will be several times the length of Up and Running, but until those who ship their code cement it (after reading this book, my money's on Google), we'll have to wait. In the meantime, Pilgrim has some great resources on his site and done a decent job with this book.
You can purchase HTML5: Up and Running from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.