Webmonkey » Web Apps

W3C Offers a Guide to Building Mobile Web Apps

Scott Gilbertson — Thu, 23 Dec 2010 19:09:35 +0000

If you’ve been wanting to start development on a web-based mobile app, but don’t know where to begin, the W3C has you covered. The web’s governing body has released a set of guidelines and best practices for developing mobile web applications.

If you’ve already been keeping up with the latest in mobile web technologies, the guidelines probably won’t have too much new information for you. But if you haven’t already explored the rapidly growing mobile web apps scene, the W3C’s guide makes a good starting place.

The guide covers everything from the (hopefully) obvious, like minimizing the number of cookies, compressing your files and using CSS sprites, to less-well-known tips like using Fragment IDs or caching resources by fingerprinting resource references.

One thing to keep in mind is that this overview is intended for web apps, not just websites. If you just want to develop a mobile-optimized version of your website, check out our earlier post on the best practices for mobile websites.

If you’re building something much more complex and application-like, the W3C’s guidelines make a great starting point to get up to speed.

See Also:

Mozilla Shows Off Plans for an Open Web App Store

Michael Calore — Tue, 19 Oct 2010 19:37:24 +0000

Mozilla has released more details about its soon-to-arrive Open Web Applications platform.

There are two key components: a directory where users can browse available web apps, and a new dashboard that will be baked into the browser interface, where users can install and manage their favorite apps.

The company published some technical documentation for developers so they can get to work retrofitting their apps with the code necessary to make them work with the new dashboard.

We first heard mumblings from Mozilla about this “Open app store” for the web back in May, only one day after Google announced its own app store for its Chrome browser and web-based Chrome OS. Google’s store is expected to make its full debut soon. The apps in Google’s store will be optimized for Chrome and may not work in other browsers, but Mozilla’s approach will list apps that work on “any modern browser with support for basic HTML technologies” — including mobile browsers. Mozilla says it will let each browser vendor dictate how it presents the app dashboards and management features.

So, app stores for web apps?

It doesn’t make much sense when coupled with what we’ve seen of “traditional” app stores — the ones popular in the mobile world, like those for Apple, Android and BlackBerry devices. But unlike those app stores, which actually involve downloading a package and installing it for offline use, a web app store is simply a directory of apps that are hosted on web servers.

In Mozilla’s model, users browse the app listings, where everything is categorized and rated. Developers can also host their own apps. Users click “install” on the ones they want, and those apps are added to a dashboard inside their browser.

It’s been mocked up for Firefox, and it looks something like this:

In the dashboard, you can manage how apps access your personal information, or uninstall them. Users don’t have to use the dashboard. They also have the option of saving a link on their desktop or mobile home screen for a single-click launch.

The web apps are built in HTML, JavaScript and CSS, guaranteeing interoperability between browsers and operating systems. Since everything is based on open web technologies, developers can implement standard controls for things like user authorization, local data storage and geolocation.

This doesn’t sound like much of a departure from the way apps work on the web right now, and it isn’t. We’ve all been clicking on tab thumbnails, bookmarks or desktop icons to launch our favorite web apps (Gmail, Twitter, Facebook) for years. The “app store” paradigm has been so successful as a method of discovery, marketing and distribution, it’s simply creeping from the tiny screens in our pockets into other areas.

The real innovation here is the inclusion of the dashboard. As more of our daily tasks move towards web-based apps, we’ll need better ways of managing them. A dashboard is a good solution. It’s also a nice way of introducing users new to web apps — people who think of apps only as things that are launched from a taskbar, dock or desktop.

One other important point: Mozilla does not intend to play gatekeeper. The company says it will have editorial, security and quality view guidelines, but it intends to make those processes entirely transparent.

It also won’t make developers jump through too many hoops. Inside the technical docs, you’ll find an example of a simple metadata manifest that will be required to talk to the dashboard.

Here’s a video. The beginning explains the philosophy, then it gets a little technical near the end.

See also:

Chrome Web Store Is Now Open for Developers

Michael Calore — Thu, 19 Aug 2010 23:34:38 +0000

Google has launched a developer’s preview of its Chrome Web Store — the company’s directory where users can browse and install Chrome extensions, web apps and downloadable apps that run in the browser.

There are no listings available yet in Thursday’s preview, but you can start creating apps and uploading them to the store so they’ll be available as soon as it opens later this year. All the tools you’ll need to publish apps are available there, as well as instructions on how to use the Licensing API so you can charge for your apps if you wish.

Interestingly, Google is recommending developers pursue a freemium model for paid apps. “A freshly installed app should always provide something useful or interesting, even if the user hasn’t paid yet,” the documentation says. “If the first page the user sees is useless — nothing but a payment wall, for example — the user is likely to uninstall your app, and you might get some scathing reviews.”

According to a report on TechCrunch, Google will take a five percent cut of sales revenue.

What’s up with installable web apps, you ask? Don’t web apps get served to a client from a web server? Well, yes, there’s that kind, and then there’s the kind you download and install. Google describes an installable web app as “a normal website with a bit of extra metadata.” The app is packaged, then downloaded and installed by the user, where it runs in the browser (online or off) and can access local storage.

Here’s a video that covers the details of Thursday’s developer preview:

See Also:

How Do Native Apps and Web Apps Compare?

Michael Calore — Tue, 17 Aug 2010 13:00:46 +0000

The Web is Dead. Long Live the Internet

The Web is Dead?! A Debate

How the Web Wins

How Do Native Apps and Web Apps Compare?

Two roads diverge on a tablet screen. One is the path to the native app, the other leads to the open web.

Luckily, you can take both. The latest mobile devices ship with a thoroughly modern browser capable of handling emerging web standards. Beneath that is a modern operating system with access to the magic inside the hardware: the camera, GPS, gyroscope and compass. But if you had to pick one — native app or web app — which would you choose? Your decision will make all the difference in how you approach your design, development and distribution.

The Issues	Native Apps	Web Apps
Internet access	Not required	Required, except for rare apps with offline capability
Installation/updates	Must be deployed or downloaded	Hit refresh
User interface	Native apps are responsive and functional	Browsers can be clunky, but new advancements in JavaScript like jQuery Mobile are catching up fast
Device compatibility	Platform-dependent, hardware-dependent	Platform-agnostic, content can be reformatted with CSS to suit any device
Animation/Graphics	Fast and responsive	Web apps are getting closer, but will probably always lag
Streaming media	Few problems with audio and video. Flash works, but only if the device supports it	Flash works where supported. Browser-based audio and video are getting there, but still beset by compatibility headaches. Give it a year or two
Fonts	Tight control over typefaces, layout	Almost on par, thanks to advancements in web standards. Give it six months
Is my content searchable?	Not on the web	By default
Sharable/Tweetable?	Only if you build it in	Web links are shared freely. Social APIs and widgets allow easy one-click posting
Discussion and collaboration	Only if you build it, and it’s more difficult if data is disparate	Discussion is easy, all data is stored on a server
Access to hardware sensors	Yes, all of them: camera, gyroscope, microphone, compass, accelerometer, GPS	Access through the browser is limited, though geolocation is common
Development	Specific tools required for some platforms (like Apple’s). You have to build a new app for each target platform	Write once, publish once, view it anywhere. Multiple tools and libraries to choose from
Can I sell it?	Charge whatever you want. Most app distributors take a slice, up to 30%	Advertising is tolerated, subscriptions and paywalls less so. No distribution costs beyond server fees
Distribution	Most app stores require approval. And you gotta wait	No such hassle
Outside access to your content	No, the reader must download your app	Yep, just click a link
Advertising	Control over design (though limited in iAds) and rate	More choices for design, plus access to web analytics. Rates vary widely

See Also:

DeviantArt’s Muro Drawing App Is Pure HTML5 Awesomeness

Michael Calore — Tue, 10 Aug 2010 23:35:24 +0000

The folks at DeviantArt, a website best known for hosting images of fairies and vampires created by gothy art students, have debuted a new browser-based drawing tool created entirely with web standards.

Muro works in all modern browsers, and you can dive in and start drawing on a blank canvas, all without Flash or any other plug-in. There are several brushes available to everyone, but to access the more advanced features, you’ll need to create a DeviantArt account and log in.

The image above was created by DeviantArt user loish using the new tool. It’s amazing to see what people are creating with it.

Muro is reminiscent of other browser-based drawing tools like Odosketch, which uses Flash, and Sketchpad, which, like Muro, uses only web standards. But Muro is cleaner and more of a joy to use than any other HTML5-based sketching app I’ve seen.

As browsers become more powerful and web technologies like HTML5, CSS and JavaScript become more advanced, we’re seeing more and more killer web apps emerge. But productivity apps, fancy fonts and media playback hacks aren’t just interesting tricks we can all marvel at, they are examples of how the web is quickly maturing into a true computing platform.

I found Muro to be more useful on an iPad — a fingertip is much more forgiving than a mouse or a trackball when you’re trying to draw something on a screen. Also, the default settings seem to be optimized for the iPad’s browser. In Chrome and Firefox, it took some fiddling to get the brushes to the point where they produced the desired results. But once you get the hang of it, it’s super easy and fun. You’ll waste a lot of time if you’re not careful.

I also asked Dennis Crothers, Wired.com’s head of user experience, to give it a test drive with his Wacom tablet. You need to be running Wacom’s tablet data plug-in (which you probably already have installed if you have the device) for it to work. He was impressed. He says Muro isn’t the best drawing tool out there — this is coming from a designer who spends the bulk of his days in Adobe Illustrator — but for an HTML5 web app, he says it’s an excellent piece of work. I agree.

Green-haired girl by loish. Crappy Veve by me.

See Also:

Test Your Site at Any Size With ResizeMyBrowser

Michael Calore — Tue, 13 Jul 2010 18:17:04 +0000

When building a website, it’s critical to test your page against multiple resolutions to make sure everything displays properly on different screens. It’s especially important to test against all the mobile browsers out there, now that the mobile web is exploding and the tablet/netbook web is gathering steam.

ResizeMyBrowser, created by a developer named Chen Luo, is a super-simple web app that snaps your browser’s width and height to a selected resolution.

There are some common resolutions to choose from, including both portrait and landscape views for the iPad, iPhone (older models and and iPhone 4), and Nexus One. You can also set your own custom presets that the app will remember the next time you visit.

It uses the resizeTo JavaScript event, which means it won’t work in Google Chrome (a bug) or in Opera (not supported). But it works in all other desktop browsers.

XSS Vulnerabilities, Raw SQL Top List of Common Programming Errors

Scott Gilbertson — Wed, 24 Mar 2010 18:24:21 +0000

No programmer is perfect, but some mistakes are more dangerous than others. While some mistakes might just slow down your site, others can open up vulnerabilities that expose your code, your database and even your users to all manner of attack.

To help you identify the more serious errors common in programs of all types, a group of top software security experts in the US and Europe have released their Top 25 Most Dangerous Programming Errors.

Unsurprisingly, cross-site scripting vulnerabilities and improperly handled SQL top the list of common and dangerous mistakes. Remember kids, sanitize your database inputs; you just never know when someone is going to name their child: “Robert’) DROP TABLE Students;”

While not all the errors in the list are common in web programming, some of the more serious things are concerns for web developers — cross-site request forgeries, missing encryption of sensitive data and unrestricted file uploads are all common web programming issues.

Also interesting is the weaknesses by language section, which breaks down common mistakes in PHP, Java, Perl and C/C++. No doubt web developers would like to have seen Python and Ruby in that list, but it should at least be useful for PHP and Perl programmers.

See Also: