I long suspected these problems had much to do with Facebook’s use of various Web technologies, since much of the mobile platform was built with web standards and technologies such as HTML5, surrounded by a native wrapper for Android or iOS. But I’m not a developer, so I couldn’t be sure. Now I am, thanks to Dirk de Kok’s detailed post at Mobtest, which tests mobile applications.

The gist of the problem, at least for iOS (and likely for Android as well, at least partially) is two-fold. One problem concerns HTML use with UIWebViews but without support for Nitro, which is Apple’s JavaScript engine. The second happens because the app makes different data calls for similar, but out-of-sync information. Here’s a pair of excerpts to explain:

“For a starter, caching of unchanged content cannot be controlled by the developer. The FB app downloads the whole timeline HTML every time, and it is up to the UIWebView to determine whether it needs to download images, stylesheets etc again…. Also, to communicate from the UIWebView to the native app, a Javascript bridge is needed. This is tricky stuff, slow and not really thread safe.”

“For notifications, messages and friend requests regular REST calls are done, returning XML data. First check is to see what number of new notifications are there, then the actual content is retrieved in a separate call. As far as I can tell, the Facebook service calls return inconsistent information. When you check too fast what new notifications are awaiting you, you don’t get the new information.”

I recommend reading de Kok’s entire analysis because he explains in further detail how all these moving parts are working together in a less than optimal way, illustrating the exact behaviors I’ve seen in the Facebook mobile app. I think it’s great that Facebook is adding new features and improvements on a regular basis and I understand that by using Web technologies, it can make these changes on the server side; you don’t have to update your Facebook app as a result.

But for the time being, I’m going to switch to m.facebook.com in my smartphone browser. I did some testing this afternoon and the experience is far faster, up to date and generally offers the same features as the native mobile app.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

B2G is Mozilla’s effort to build a device operating system for the open web that can offer the same features as a device with a non-web-based OS:

“We believe that the next frontier for Web applications is full device integration, so that Web developers have the same capabilities as those building for OS-specific stacks. Boot To Gecko is intended to identify those missing device capabilities and other application needs, and design standardized solutions for app developers to use.”

The demo video, which I found through Geek.com, shows that Mozilla is well on its way towards meeting that goal. B2G is built upon a Linux kernel, similar to Google Android, but boots directly into a web-based user interface. Browsing the Internet is breeze, as expected, as is using web-based apps or watching video. But our smartphones today are capable of so much more. How then could B2G suffice as a potential smartphone platform replacement?

That’s where Mozilla’s experience with web APIs comes into play; the company created the popular Firefox web browser. Through different APIs and new web standards, B2G can directly access hardware components on the smartphone. That allows for picture taking with the camera or placing a phone call over a cellular network, for example.

Could your next phone run on browser-based technologies, then? Given the current state and popularity of native app stores, I suspect not. But recall that Apple’s first iPhone actually bet on web-based apps in 2007 — and still supports them. These later gave way to native apps, but perhaps the idea of web apps wasn’t a bad one. Instead, it might have been an idea ahead of its time as web technologies were still (and are) maturing in addition to heavy reliance on young mobile broadband networks.

Given that sales of HTML5-capable phones are expected to hit 1 billion in 2013, I wouldn’t count web apps out just yet. And if B2G is ready by then to fully power a smartphone, some OEMs could take a chance on the solution.

With the ability to run a web-based phone on fairly minimal hardware, such smartphones could be much less expensive than phones that use a mobile operating system. If that’s the case, B2G-based phones could do well at the very low end of the market, which would hurt sales of Android and Windows Phone devices more than any other.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Where new opportunity lies in the mobile operating system space
• HTML5’s a Game-Changer for Web Apps
• How to deliver the next-generation web experience

Wheels of Steel is a fun app that allows you to play with a fully functioning set of turntables online — loading up records, dropping the needle, manipulating the vinyl, using volume controls, faders, equalizers and pitch controls. You can switch between 33RPM and 45. You can mix, beat match… you can even scratch yourself silly. Pick your tracks by entering the relevant Soundcloud URL, or plugging in the specific URL of the MP3 you want, and then go crazy.

And the most amazing thing? It’s built entirely in HTML, CSS and JavaScript.

The man behind this piece of genius is Flickr engineer Scott Schiller, an audio nerd who previously developed Sound Manager, an API that lets you play audio online, through JavaScript, without worrying about the usual hassles (Sound Manager is, unsurprisingly, used to power Wheels of Steel).

For anyone wondering exactly how it works, Schiller has written a blog post giving an incredibly detailed look at how it was put together. The post details every aspect of the build, and explains how all the different options and physics were designed and assembled.

Ultimately, it’s all intended as a bit of fun produced by somebody who was clearly dedicated to building virtual turntables. The actual build took 12 weeks, but he admits that he’s been interested in doing this for “years”. But it’s a great demonstration of what is now possible by using the basic toolkits of the web.

The prototype is an experimental bit of web audio fun, stamped with a number of warning labels and is not intended for pro or “skratch” DJs as frankly, it will quickly disappoint — and what DJ really wants to scratch records with a mouse, anyway. ;)

We now have digital toys and things that allow music to be manipulated in ways never imagined before — and yet, there remains something special and meaningful about the old, scratchy, dusty sound of analog mediums and the hands-on, real physical experience of mixing music that digital technology — this HTML experiment included — still aims to match.

Great stuff.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• What Does the Future Hold For Browsers?
• The evolution of consumer-media cloud storage
• Flash analysis: future opportunities for Pinterest

It’s unlikely that this breach will have any immediate impact on either digital media sales or online piracy. However, the defeat of HDCP is yet another instance of supposedly unbreakable content protection schemes failing badly.

Still, people in the industry are holding onto the illusion that there will one day be a secure architecture for digital content, despite of plenty of evidence to the contrary.  We’ve compiled a list of five of the most glorious DRM failures over the years:

1. Macrovision. The original copy protection scheme was first deployed in 1984 on VHS tapes. Macrovision worked by adding invisible signals to the video recordings on commercially released VHS tapes, which would make it impossible to make copies of these tapes with a second DVD VHS recorder. Macrovision was later also added to DVD players, disabling the ability to record DVDs on VHS. Macrovision Was however easily defeated when tinkerers figured out ways to filter out those extra signals, leading to a brief boom of Macrovision filtering devices. Some DVD player manufacturers also allowed users to disable Macrovision through special codes.

Macrovision’s corporate entity is now called Rovi, and it’s increasingly focusing on delivering programming guides for CE devices. Its long-defeated technology, however, is still in use on virtually any DVD player.

2. CSS. The Content Scramble System was Hollywood’s attempt to lock down the DVD format and prevent end users from ripping and copying DVDs. It was cracked in 1999, when a number of unknown hackers disassembled a software DVD player to extract its encryption key. This crack eventually led to a tool called DeCSS. One of the people involved in the creation of DeCSS was Jon Lech Johansen, who found himself targeted by Norwegian law enforcement and Hollywood studios as a result. The case against Johansen was eventually dropped in 2004, and he went on to bring media playback tools to the Android world with his San Francisco-based company doubleTwist. CSS decryption tools now have found their ways into many DVD copying tools, but their sale is still illegal in the U.S.

3. SDMI. The Secure Digital Music Initiative tried to prevent music piracy through watermarking of audio tracks. The initiative was founded in 1998 and backed by some 200 music, technology and CE companies. However,it faced difficulties coming to market, partially because even within the industry, some doubted its effectiveness. These critics were supposed to be convinced with a contest launched in 2000 that asked security experts to “hack SDMI.”

Princeton professor Ed Felten took the initiative by its word, and cracked all but one proposed watermarking schemes. The Recording Industry Association of America (RIAA) went on to threaten Felten with a lawsuit when he tried to document his findings, but subequently backed down when Felten teamed up with the EFF. SDMI eventually dissolved in 2001.

4. BD+. The early defeat of DVD copy protection hasn’t stopped the industry from trying to lock down Blu-ray disks. In fact, the BD+ copy protection scheme is far more sophisticated than CSS, because it’s based on updateable keys. However, that hasn’t stopped skillful minds from cracking BD+, and rips of a number of Blu-ray movies have since appeared online. The industry has reacted to this by in turn updating BD+, but the cure turned out to be more like a poison: Dozens of Blu-ray titles have been rendered unplayable for owners of Samsung’s Blu-ray players, thanks to copy protection gone wrong.

5. HDCP. The High-Bandwidth Digital Content Protection protocol aims to protect video signals traveling from one device to another. For example, if you connect your Blu-ray player via HDMI with your TV, then all the video will be encrypted with HDCP. The idea behind this is to prevent people from recording the HD signal, just like the original Macrovision copy protection system tried to prevent recordings on VHS.

And just like with Macrovision, this has led to the emergence of HDCP filtering devices. Dongles that make it possible to play HDCP-protected streams on non-compliant devices have been available for a number of years, but the fact that HDCP is now completely broken could potentially enable rogue manufacturers to build more sophisticated DVRs or Blu-ray copying devices. Also possible: Interfaces like an HDMI USB adapter or an HDMI Firewire converter, allowing you to write encrypted video streams onto your hard drive and then decrypt them with the help of a future DeHDCP application.

However, all of this likely won’t change much for the average consumer. Copy protection, even if broken, tends to be around for decades, as Macrovision and CSS have proven. And we can be sure that the next fail-safe protection scheme is just around the corner…

Image courtesy of Flickr user subcircle.

Related content on GigaOm Pro: The Return of DRM (subscription required)

Chances are if you do any kind of front-end web development on a Mac you’ve heard about CSSEdit, a very popular tool for editing .css files in OS X. I use CSSEdit pretty much all day long at my day job and while I absolutely love it and have a hard time imagining doing my job without it, its lack of support for all the new CSS3 properties is becoming more and more problematic.

Unfortunately, the good folks at MacRabbit who make CSSEdit have had their hands full lately. They just shipped a new update to their all-in-one web development app Espresso and apparently haven’t been able to get around to updating CSSEdit with full support for CSS3 yet. Lucky for us though, @andyford is on the case and has come up with this great “hack” for customizing the AutoCompletion.plist file in CSSEdit to include CSS3 syntax.

The .plist file in question is essentially just a collection of arrays that define the possible values for a given property, like font-weight for instance. As you can see from the screen shot below, the font-weight property has several strings contained in it’s array, all of which will be presented as autocomplete options when defining an elements font-weight within a .css file.

This is great news, as now we can use a handy tool like PlistEdit Pro to go in and add our own custom properties and values. By adding in additional strings to an array or by creating entirely new arrays, we can change the autocomplete behavior of CSSEdit and make it more CSS3 friendly.

But wait, Andy is ahead of the curve and has already rolled up a custom AutoCompletion.plist file (ZIP) for us which includes all the hot new CSS3 properties like border-radius, transform, transition, and more, including some custom values of his own. To join the fun, just right click on the CSSEdit application to “show package contents” and throw the custom .plist file into the CSSEdit/Contents/Resources directory. It’s probably a good idea though to first back up the existing .plist file somewhere safe just in case.

I did notice a couple CSS3 properties missing from Andy’s file but now that we know it’s there it will be easy enough to add in any important missing properties or values we need. I look forward to the folks at MacRabbit getting around to making an official update to CSSEdit now that they have the new version of Espresso out the door. There’s a lot of excitement building around HTML5 and CSS3 at the moment and I’m really hoping that my favorite CSS application can keep pace.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Mobile App Developer Survey: Profiles, Platforms and Monetization
• TV Apps: Evolution from Novelty to Mainstream
• How do developers ride the Siri wave?

What You Will Need

• Your Mac
• Your iPhone (it needs to be jailbroken)
• PlistEdit Pro (or another application capable of editing plists)
• Coda (or another application for editing HTML)

Before We Begin

To use a custom CSS signature, we will be modifying a preference file on your iPhone. Simply using copy and paste within the new 3.0 OS will not maintain the HTML and formatting of our signature. Your iPhone should already be jailbroken and capable of mounting as an Apple File Protocol (AFP) share on your Mac. For instructions on this process, see here.

Step One

Once you have logged into your iPhone over AFP, browse to the following location:

/private/var/mobile/Library/Preferences

Copy the file com.apple.mobilemail.plist to your Mac. Go ahead and duplicate this file, appending “backup” to the end of the filename so you have a clean copy in case something goes wrong.

Step Two

Open your email signature that we created (see the original post here) in your HTML editor and copy the contents to the clipboard.

Step Three

Use PlistEdit Pro to open the file you copied earlier in Step One. Towards the bottom of the list, you will see an entry called “SignatureKey.” The value for this string will match your current iPhone signature.

Double-click this value to highlight the contents and delete what’s there. Now paste the HTML code for your email signature that we copied in Step Two. Save this file back to your desktop.

Step Four

Browse back to the Preferences folder on your iPhone. Copy our new edited plist file and replace the original on your iPhone.

Step Five

All done! Create a new email and you should see your HTML email signature at the bottom.

Limitations

Unfortunately, due to limitations in the iPhone 3.0 OS, Mail on the iPhone only supports one signature. There are third-party applications available on the App Store that address this issue, but I have not tested them with HTML email signatures. Hopefully in a future OS update, Apple will allow users to have unique signatures for multiple mail accounts.

This process and file location has remained the same since iPhone OS 1.1.4 and will likely remain the same, meaning as new OS updates come out, they should not break this functionality (unless Apple adds support for multiple signatures at some point). However, if an update does break your signature, the process outlined above should still work to put it back.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Opportunities and challenges for mobile deals
• HTML5 or native mobile app? How about both?
• Flash analysis: Steve Jobs

Real has recently thrown one last haymaker by opening up a potentially promising — and very risky — line of business.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Making Movies Mobile
• Google TV: Overview and Strategic Analysis
• NewNet Q4: Platform mania and social commerce shakeout

Web designers have long been using CSS to customize font size, style, family, backgrounds and layouts across a site. CSS3 brings a much more powerful feature set to those designers, including:

Text shadows, borders, shaped borders, boxes with shadows. No longer will you have to fancy up fonts as graphics files and embed them. Also, because of the detailed specifications for shaping a border, gone are the days of struggling with rounded corners. You can set the radius for each corner and voila!

Web fonts. Yes, you can now specify the font you want to use in CSS3, and the browser will auto-download it if it’s not already installed. No longer are you at the mercy of the fonts your users have installed.

CSS3 also offers transitions for dynamic effects such as changing the size, color or positioning of text by hovering your cursor over it. Move over Flash and JavaScript effects: CSS3 has got these animation-like features covered.

The current version of Opera already supports parts of CSS3, while support in Opera 10 will be even greater. Opera 10 beta should be available in the next few months.

Lie also showed me an e-book designed entirely using CSS3. The CSS took care if all of the intricate printing layout details, like pagination, that would normally be handled by something like Adobe InDesign. Fascinating.

Opera, Mozilla and Safari will all fully support CSS3 in the future; indeed, they have all had partial support for the standard for a while now. The lone party pooper is IE, of course. Lie is hoping web developers will rally together to ignore IE in their development strategies and, “free yourself from the IE prison.” A noble cause, but probably not realistic just yet. Personally, I haven’t used IE for eons (especially as a Mac user). However, many of my clients  are still adamant that IE is their visitors’ most popular browser.

Check out this live video demo of CSS3 by Lie at SXSW:

Håkon Wium Lie from Opera Software Demos CSS3 from WebWorkerDaily on Vimeo.

What are your thoughts on CSS3? And how likely do you think it is that we’ll be able to banish IE from our web design work in the future?

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• What Does the Future Hold For Browsers?
• Personal tools lead to practical business
• Disruptapalooza 2011: how Amazon’s Kindle is changing the portable media game

According to the official WebKit blog, the browser rendering engine now supports some explicit CSS animations. A recent nightly build brings support for keyframes and repeating animated effects coded directly in CSS. The animation features are currently exclusive to test builds of Safari, but they have already been put into play by Apple in the iPhone and iPod touch’s mobile Safari browser.

Since that’s the easiest way to see them live, I fired up mobile Safari on my iPhone and had a look at the three demos available. There are falling leaves, pulse, and a bouncing box. The falling leaves were probably the most impressive example of the potential this new tech offers, but all three were promising and looked good on the iPhone. They should soon be supported by Safari for the desktop as well, and they have been submitted for inclusion in the official CSS standards, as determined by the W3.

While it’s not clear yet what the limitations of the tech are in terms of interactivity, they do present a nice, simple alternative to overly complicated Flash animations, at least for visuals. Depending on how advanced the support for CSS animations and other effects becomes, Apple may see less of a need for supporting Flash. As the iPhone gains more hold in the mobile browser market, web designers could opt to code in CSS animation effects to reach a broader audience.

Regardless of what happens with Flash, CSS animation support is promising for iPhone users and developers alike, since it expands the canvas and promises more graphically-rich content. As long as it doesn’t result in this kind of thing.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Mobile Q2: Smartphone growth surges; iPad’s rule continues
• What Google’s Honeycomb Means for Apple and Microsoft
• Mobile App Developer Survey: Profiles, Platforms and Monetization

Targeting your professional development, however, in a preemptive rather than reactive way, is not always easy. Usually freelancers and consultants just roll with the punches and learn what they have to depending on client requirements. A little forethought, though, can go a long way to making you the applicant of choice before any contracts are awarded.

Skill 1: Working Knowledge of HTML and CSS

This is an oldie but goodie, and it will become even more important as companies start to streamline their IT departments. It happened to traditional freelancers and consultants when they were expected to bring desktop publishing skills to the table along with their analytical abilities, and it will happen with online workers as well. For employers, it’s simple math: fine one who’ll do the job of two. Here’s a useful free resource to start with.

Skill 2: Transparent Reporting

When spending is the key deciding factor behind any and all business decisions, good reporting practices can make all the difference. Show your prospective client that you have a solid, consistent reporting process that’s simple, straightforward, and transparent, and they’ll thank you by awarding you more contracts. Things to think about are the level of detail you put into your activity logs, what increments you use to account for your time, how you list and back up your expense claims, etc.

Skill 3: Twitter Networking

You may be a networking whiz, with all the LinkedIn, Facebook, and MySpace contacts one person can handle, but that doesn’t translate into instant Twitter success. That’s because Twitter’s a different beast altogether. Case in point: the overwhelming majority of my Facebook contacts have never even heard of Twitter, yet it boasts among its members the most powerful and successful people working online today.

Succeeding here means learning to converse instead of broadcast, giving people a reason to follow you beyond your portfolio, and treading the thin line between self-promotion and spamming. Check out Darren Rowse’s Twitip for some help getting started, or refining your Tweet-Fu.

I’m sure that as the year progresses, many other valuable skill sets will emerge, but you can bet that these three, at least, will continue to be relevant well into the future.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Millennials in the enterprise, part 1: strategies for supporting the new digital workforce
• A 2011 NewNet Forecast
• What Enterprise Software Vendors Could Learn from the Consumer Space