Archive for December, 2010

File Under: HTML5, Mobile, Web Standards

W3C Offers a Guide to Building Mobile Web Apps

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:

File Under: Identity, Web Standards

New Privacy Icons Aim to Save You From Yourself

A few of the proposed privacy icons

Mozilla has taken the lead among browser vendors to make a site’s privacy settings more explicitly visible. It’s doing so by proposing visual cues in the browser that indicate what level of privacy you’re currently browsing at, and what pieces of your personal data the site you’re currently visiting is sharing with the rest of the web.

Earlier this year, Mozilla’s head user experience designer Aza Raskin proposed creating a set of icons to denote the privacy policy of a website. Now, after getting feedback from a wide range of interested groups — from the Electronic Frontier Foundation to the Federal Trade Commission — Raskin has drawn up a new and improved icon set.

The idea behind Raskin’s proposal is that the browser is the most logical place to display identity and privacy information to the user as they click around on the social web. The end goal is to produce a set for warnings similar to the way that Firefox (and other browsers) currently handle phishing attack warnings, using visual icons and simple language to explain what you’re getting into when you load a page with a different level of privacy or security.

For the active social web user, keeping track of which bits of your data are public and which are private on different sites is a chore. Some websites share your photos, status updates, your list of friends, who you’re following and other data default. Some share nothing. The rest are somewhere in the middle.

Part of the problem is the privacy policies themselves. They are complex, mind-numbingly long legal documents. We routinely ignore them, breezing past them by clicking “I agree.” Once clicked, your rights are compromised, and you may not be able to fully restore them.

A set of icons in the browser, to quickly and easily allow users to know what will happen to their data, means that users don’t need a law degree to know what’s happening to their images, status updates and other data.

The big difference between privacy icons and the phishing warnings your browser already offers, is that these icons are targeted at the websites themselves. The biggest counter-argument to Raskin’s proposal is that there’s nothing stopping a site from displaying these icons and then doing the opposite.

Raskin’s solution is to make the privacy icons supersede the written privacy policy. “When you add a Privacy Icon to your privacy policy,” writes Raskin, “it says the equivalent of ‘No matter what the rest of this privacy policy says, the following is true and preempts anything else in this document…’”

In other words, sites using the icons maliciously would face legal consequences. Of course differences in international laws mean enforcing such violations would be complex.

Still, as Raskin points out, privacy policies are fast becoming a selling point for many sites. Nearly every site we’ve tested lately has some sort of large, obvious banner that proudly proclaims the site will never share your data. Those are the kinds of sites, says Raskin, that would adopt privacy icons.

But it’s still unlikely any site would ever adopt the negative icons. If you’re sharing everything users give you with anyone who pays for it, you probably don’t want to advertise that. So the privacy icons actually become most useful when they aren’t present. Of course, as Raskin writes, “people don’t generally don’t notice an absence; just a presence.”

The solution to that problem is to make the privacy icons machine readable. The workflow would be something like this: You visit a website and decide to sign up. When Firefox encounters the sign-up form, it looks for the privacy icon. If it finds it, Firefox displays it. If Firefox doesn’t see an icon it warns you that your information may be shared using the negative icon. Either way, you know where you stand.

For now the privacy icons, good idea though they may be, are a long way from reality. Raskin calls the current mockups an “alpha” release and since Raskin is leaving Mozilla, the future of the project is unclear. If you’d like to get involved, head over the Mozilla Drumbeat Privacy Icons project page.

See Also:

File Under: Browsers

Firefox 4 Beta 8 Arrives With Faster Graphics, Better Sync

Mozilla has dropped the eighth beta release of Firefox 4. Originally intended as a quick update to fix some issues on beta 7, Firefox 4 beta 8 actually brings over 1,400 bug fixes, some improvements to the new add-ons interface, better syncing and more hardware accelerated WebGL support. There’s also a beta update for Android and Maemo mobile phones, which we’ll look at later.

If you’d like to take Beta 8 for spin on your desktop, head over to the Mozilla beta downloads page. It’s been a very long development cycle for Firefox 4 — the final version is still a couple of months out, since once the betas are done, Firefox 4 moves into the release candidate stage. However, the enhancements being made over versions 3.5 and 3.6 are substantial, and these releases are stable enough to use in day-to-day browsing, so it’s not like we’re waiting a long time for nothing. We can reap the rewards well before the official release date.

The improvements to Firefox’s new sync feature — which syncs bookmarks, browsing history, user preferences and open tabs between both desktop and mobile versions of Firefox — make signing up and starting sync easier for new users. Most of us use multiple screens every day — one or two computers, and at least one smartphone with a web browser — keeping it all in sync is increasingly difficult. That’s where Firefox’s sync tools come in and the streamlined sync interface makes it even easier to pick up where you left off, no matter what device you’re using.

The sync updates in Firefox 4 beta 8 coincide with similar improvements in Firefox Mobile 4 beta 3 for the Android and Maemo mobile platforms.

Firefox 4 beta 8 now supports WebGL on more graphics cards across both Mac and Windows operating systems. WebGL bridges the gap between HTML5 tools like the new Canvas tag and OpenGL, an OS-native graphics engine, to speed up HTML5 web apps and animations. If you’d like to see the new WebGL support in action, grab Firefox beta 8 and head over to the Flight of the Navigator demo page, or check out the release notes page which has a video of the demo.

The latest beta isn’t just faster with HTML5 graphics either. Although Mozilla hasn’t released any precise speed figures, in our testing, the start up time was faster than beta 7 and general browsing felt snappier as well.

The new Firefox Add-ons page

Firefox 4 beta 8 refines the main add-ons page (which is now a page, rather than a separate window, a nice improvement). The URL bar has been removed for the add-ons page, and the button design has been revamped. Although the new, slicker-looking buttons do make the interface a bit nicer, add-ons are still variously referred to as “extensions” and “add-ons.” You can see which “extensions” you have installed, but then you “Get Add-ons.” Firefox veterans aren’t likely to even notice the difference, but it could be confusing for new users.

The list of bug fixes for this release is extensive, but Mozilla’s nightly builds have already been renamed to beta 9, which means we’ll see at least one more, possibly two more beta releases before Firefox 4 arrives in final form. Mozilla hasn’t set an official release date for Firefox 4 yet, but it’s expect to arrive sometime in early 2011.

See Also:

File Under: Browsers, HTML5

Microsoft Ups HTML5 Support With New HTML5 Labs Site

Microsoft's new HTML5 Labs experiment

Internet Explorer 9 will be Microsoft’s most standards-compliant browser to date. But it still lags behind the rest of the pack when it comes to supporting the latest and greatest elements of HTML5 and CSS 3.

To address that shortcoming, Microsoft has launched a new HTML5 Labs site to give interested web developers a way to “preview” HTML5 features that won’t be supported in Internet Explorer 9, but could make it into future updates.

HTML5 is still incomplete — the spec changes and evolves on a daily basis, and a few key issues are still undecided. While the more cutting edge web browsers like Firefox, Opera and Google Chrome have opted to support portions of the HTML5 spec that are still very much in flux, Microsoft is taking a more conservative approach, shipping what it calls “mainstream browser” features and skipping the more experimental parts of HTML5.

In a recent blog post, Microsoft’s VP for Internet Explorer, Dean Hachamovitch, attempted to draw a line between the “prototype implementations” of HTML5 and those features that are “mainstream browser product[s].” While the distinction is Microsoft’s own, and for the most part totally arbitrary since the entire HTML5 spec is technically unfinished, on a practical level, Hachamovitch is right — some HTML5 features are more equal than others.

Curiously, one of the two that Microsoft has thus far included in its new HTML5 Labs is WebSockets. Firefox and Opera recently disabled WebSockets due to a security flaw. There’s a way to fix the flaw, but it will require rewriting some of the WebSockets spec.

Concerns about immature specs are precisely the reason Microsoft is taking a conservative approach to HTML5 in IE9. But to then turn around and offer a “labs” version of Web Sockets — which is absolutely guaranteed to change — seems like strange move on Microsoft’s part. After all, why would developers want to even experiment with something that is not only going to change, but is also vulnerable to attack in its current form?

The other experimental feature in Microsoft’s HTML5 Labs makes more sense — support for IndexedDB. IndexedDB is a draft spec that outlines a method of storing large amounts of data in the browser. Primarily intended for offline web apps, IndexedDB sidesteps some of the problems with current SQL-based offline storage tools and is much easier to work with when you’re using JavaScript.

If you’d like to experiment with Internet Explorer’s take on WebSockets and IndexedDB, head over to the new HTML5 Labs page and follow the installation instructions. While the process of adding these features to IE9 is a little convoluted, it does give you a way to test your apps in IE, which means that when these features finally do make it into an update, your apps will be ready to go.

See Also:

File Under: APIs, HTML5, JavaScript

Easel JS Simplifies Working With HTML5 Canvas

The HTML5 Canvas element promises web developers a web-native way to create animations, interactive charts and even full-fledged apps like image editors and complicated games. Canvas may well be the best thing about HTML5. But unfortunately, it can be kind of a pain to work with, especially for those coming from a Flash animation background.

Easel JS is a JavaScript library for working with the HTML5 Canvas element. It was created by developer Grant Skinner and his cohorts at gskinner.com. Skinner is probably best known for his work in Flash, and the Easel Library adds a number of tools that make Canvas a bit more approachable for Flash developers (and everyone else as well).

Canvas’ biggest drawback (compared to Flash or SVG) is that it has no internal concept of display objects. That means you have to manage updates manually (see our earlier posts for some more tips on working with Canvas). The gskinner blog post has some more details on what Easel JS does, but the main points are a core interaction model with a full, hierarchical display list and helper classes to simplify working with Canvas.

Easel JS is currently an alpha release, so proceed with caution. The code is available under the MIT license and full documentation can be found on the docs page. Skinner says that, once Easel reaches the beta stage, the code will be moved to GitHub and opened for outside contributions and improvements.

See Also:

File Under: Visual Design

Sneak a Peek at the Process Behind 37Signals’ Redesigned Site

If you’ve ever wanted a peek behind the scenes of a redesign, the 37Signals blog has a fascinating look at the design iterations for the company’s new website.

37Signals is best known for its Basecamp project management software and the Ruby on Rails platform, which grew out of the former.

Even if you don’t like the final design — and plenty of commenters on the blog post don’t seem to be big fans of the typography-focused redesign — the process behind it is worth looking at. Sometimes, seeing what ends up on the cutting room floor is more instructive than looking at the finished product.

The post should also make you feel a bit better if you too fail to magically draw up the right design on your first try.

See Also:

Yahoo Looking to Sell, Not Shut Down Delicious

Good news Delicious fans — Yahoo has finally made something of an announcement, saying that the bookmarking service will not be shut down, but sold off.

Despite a leaked, internal image that listed Delicious and other services in a “sunset” category, Yahoo denies it is planning to shut the bookmarking service down.

The Delicious blog says the service is looking for “a home outside the company that would make more sense for the service and our users.”

According to the same announcement, the tech press is to blame for assuming that “sunset” meant shut down. More likely, Yahoo simply wasn’t ready for the level of backlash that rumors of Delicious’ demise brought about, and now the company is backpedalling.

Yahoo also hasn’t made any announcement regarding MyBlogLog, Yahoo Buzz or any of the other services listed as “sunset” in the leaked graphic that circulated last week.

Presumably, in some cases, sunset does in fact mean “shut down.”

Still, the word that Delicious will live on in some form is good news for the millions of users and bookmarks the service currently hosts. Unfortunately, Yahoo has not denied that it has laid off the engineers and technical staff behind Delicious.

See Also:

Yahoo Plans to Kill Off Delicious Bookmarking Service

According to a leaked photo, Yahoo plans to close a number of services, including Yahoo Buzz, MyBlogLog and Delicious, the popular bookmarking site.

Most of the closing services are Yahoo projects that simply never went anywhere, but Delicious, which Yahoo acquired in 2005, was once the king of bookmarks and helped popularize many of the key elements of today’s social web.

Delicious (Del.icio.us in its original incarnation) popularized tags as a more flexible alternative to folders, introduced us to the idea of following other users and helped kick off the “share it with the world” trend that created today’s social websites like Twitter and Facebook.

Under Yahoo’s leadership Delicious ceased to be innovative. Delicious remains a useful service, but it hasn’t really improved on its original features in almost half a decade.

It’s unclear what will happen to Delicious. So far Yahoo hasn’t made any official announcement, nor has the company given any hint of when or how Delicious will head into the sunset, but one thing is for sure: the web will be poorer without it.

Fortunately for Delicious users its impending demise doesn’t mean your bookmarks will disappear forever. It’s actually quite easy to export your bookmarks, and there are dozens of services that can import them and replace Delicious in your workflow.

I’ve been a heavy Delicious user ever since the demise of its competitor Ma.gnolia. I bookmarked sites, scraped the API and stored the bookmarks on my own server (you can find the details of those scripts in our Django tutorial). I also relied on feeds from other people to find news, links and other tidbits for Webmonkey.

The first part of that workflow is easy to replace. I signed up for Pinboard.in, which lacks some of Delicious’ sharing features, but offers a mirror of the Delicious API. I imported my Delicious bookmarks into Pinboard, changed the root url in my scripts and effectively replaced Delicious in less than 10 minutes. If you don’t want to pay for Pinboard, Zootool, StumbleUpon and other services also make fine Delicious replacements.

But Delicious isn’t just a bookmarking service, it’s a fantastic resource for finding links, stories and the latest news about nearly anything that interested you. Its popularity make its reach extensive. You can easily tap into the minds of friends, colleagues and strangers to see what they’re reading on the web. The concept of tags makes it easy to find links related to any topic or combination of topics that interests you.

ReadWriteWeb’s Marshall Kirkpatrick likens the impending death of Delicious to “setting a museum on fire.” Where, asks Kirkpatrick, “are you going to find a reading list of the best collected written works and other multimedia about almost any given topic?”

Put simply: nowhere.

Twitter is a possibility. Delicious even used Twitter for some of its real-time search features. But Twitter isn’t dedicated to links the way Delicious is so you’ll have to put up with a lot more noise to find the same stories. Facebook may fill the gap for people. It’s also possible that Pinboard or another service will grow in the wake of Delicious’ collapse and come to offer a similar depth and breath of links.

Exactly what will happen to all those links currently stored on Delicious remains to be seen. It’s possible Yahoo may sell off Delicious, but in the absence of a statement from Yahoo, many users have already assumed the worst.

Hopefully Yahoo will at least keep the Delicious domain active, even if the service is not. Perhaps the Archive Team — which saved Geocities from death at the hands of Yahoo — can scrape and mirror Delicious.

For those that have only vaguely heard of Delicious and don’t see what the fuss is, just re-read the above replacing the word Delicious with the word Flickr or even Facebook. This is the template I’ll be using five years from now when Facebook meets the same fate.

See Also:

File Under: Web Basics

Google Helps You Avoid Playing Tech Support for the Holidays

Google's new Teach Parents Tech site is friendlier than xkcd's flowchart

If you’re like us you dread going home to see the family for the holidays because it means, when the eggnog is flowing, you’ll be asked to play computer technician for less savvy relatives.

Well this year, Google has a better solution — a new website dubbed “Teach Parents Tech.” The company has put together some fifty videos to help the less tech savvy among your family learn the basics — like how to change desktop backgrounds, create strong passwords, add bookmarks to a web browser or even create a blog.

In addition to the videos, the site offers a handy form letter you can use to send videos to your parents. With a healthy dose of snark — one of the signature options is “good luck (you’ll need it)!” — and some genuinely useful videos, the site just might save you a few headaches this holiday season.

Of course we didn’t see a video on how to re-install Windows after dozens of viruses have brought it to a crawl, so possibly there will still be some work to do while the rest of the family enjoys a nice holiday feast.

Comic by XKCD, CC

See Also:

Microsoft Adds H.264 Video Support to Firefox

Thanks to licensing issues and exorbitant fees, Mozilla doesn’t support the H.264 video codec in Firefox, but Microsoft (yes, Microsoft) is aiming to change that.

Microsoft has created a Firefox plug-in that will tap into Windows 7′s native H.264 support, allowing Firefox 3.6 and the 4.0 betas to play H.264 encoded video.

If you’d like to give it a try, you can download a copy of the HTML5 Extension for Windows Media Player Firefox Plug-in from Microsoft’s Interoperability Labs.

The HTML5 video tag promises to eliminate the need for third-party plugins like Flash or QuickTime. Sadly, it’s a long way from “promises” to “delivers.” While HTML5 offers a video tag for authors to easily add videos to their webpages, it’s up to the browser to actually play that video. And that’s where the problem arises — what video codec should the browser use?

Apple is standing firm behind the H.264 video codec. But H.264 has licensing requirements, fees and is not free in any sense of the word. Mozilla Firefox supports Ogg Theora and WebM, both of which are open and free. Google’s Chrome supports all three codecs. Opera supports Ogg Theora and WebM. Microsoft has decided to support H.264 and WebM in IE9.

In short, varying codec support across browsers has made native HTML5 video a mess.

Microsoft’s new add-on brings support for H.264 to Firefox whether Mozilla wants it or not. The add-on parses HTML5 pages and replaces video tags with a call to the Windows Media Player plug-in. Unfortunately it’s not perfect. To deal with the different codec support in each browser, many sites use JavaScript to determine the browser’s codec support before presenting a video. If that’s the case, the new add-on won’t work because the detection code won’t see the H.264 support (the H.264 support is an add-on, not a native part of Firefox).

Ironically, native web video isn’t supported at all in Microsoft’s own browsers, regardless of the codec used (IE9 will introduce support for HTML5 video when it is released next year). Third-party developers have already created an experimental IE add-on to help current versions of IE get in on the native web video fun.

Microsoft’s add-on is far from ideal, but if you’ve been frustrated by Firefox’s lack of H.264 support, it does offer a partial solution. Hopefully, in the long run, browsers will standardize around WebM, which seems to enjoy the most widespread support (Apple’s Safari is current only browser that hasn’t pledged WebM support), but if that doesn’t happen solutions like this one may become even more common.

See Also: