How boules got cool. Forget the image of boules (or pétanque, as it is more properly known) as the game of old men in string vests. Suddenly, it’s becoming the height of cool – and not just in France

Leave a comment

Diane Kruger and Joshua Jackson enjoy a game of boule at the Chanel Party in St Tropez

Supermodel Karolina Kurkova (second left) beside actors Joshua Jackson and Diane Kruger during a game of boules at the Chanel party in St-Tropez in May. Photograph: MaxPPP/

According to Martine Pilate, who wrote La Véritable Histoire de la Pétanque and so should probably know, none of this would ever have happened without her grandad.

Round about the turn of the last century, in common with a great many of their compatriots across the south of France, the men of La Ciotat, a small port town in Provence, were much taken with a version of boules known as le jeu provençal, AKA la longue (because, back then, the piste was up to 20m long) or le trois pas (because players took three smart paces before launching their balls).

So anyway, says Pilate, one sunny spring day back in 1907, a bunch of longuistes were shooting balls on a now-celebrated piste in La Ciotat known as La Boule Etoilée. “In those days,” she recounts, “spectators could hire chairs to watch a game. This could cause problems, because people sitting near the jack were not above giving a boule a sly nudge with their feet every now and then, to push it closer or further away – whatever served a friend’s cause.”

To prevent such unsporting behaviour it was decided, for this particular game, to lose the chairs. “They took them all away – apart from the one belonging to Jules ‘Le Noir’, a great former champion,” Pilate says. “He had such bad rheumatism he could no longer step up to play, which upset him no end. So my grandfather made Jules a suggestion: ‘We’ll shorten the piste by half,’ he said in Provençal, ‘and draw a circle round your chair, and we’ll all play from there, with our feet anchored: a pes tanca.”

And thus was pétanque, the only form of boules in which the player must stand still to launch his balls, born.

Most of us, of course, ignorant of such subtleties, know it as plain French boules, a game played in the shade of plane trees on the scuffed gravel of countless squares across France by elderly men in flat caps and string vests, Gitanes clamped to their lower lips and shots of pastis never far from hand. Or encountered on summer campsites, which is where many of the astonishing 17 million French people said to partake in this most sociable of sports presumably indulge their passion. Or glimpsed on cinema screens, perhaps in something by Marcel Pagnol.

But we need to update that picture. Because, guess what? Pétanque has become fashionable. Not just across the Channel – where Karl Lagerfeld this month hosted a star-studded tournament in St-Tropez for the likes of Vanessa Paradis and Diane Kruger; where chic labels such as Chanel and Louis Vuitton are currently flogging designer pétanque sets in soft leather cases for £1,500; and where the country’s biggest boules manufacturer, Obut, has just launched a new line in tattooed steel for style-conscious teenage pétanquistes – but in Britain, too.

“I’d have to say,” says Ben Brousson, a French banker and former regional champion who has lived in London for 12 years, “that over the last few years the interest has increased phenomenally.” Brousson cites a tournament held just last month in the Chelsea Physic Garden in London, sponsored by the aperitif company Pernod Ricard, which drew 900 competitors. “And it really wasn’t for the booze,” he says. “These were smart, switched-on young people, French, English, all nationalities, all playing pétanque with total seriousness. Only 5% or 10% were the grans and grandpas most people see as your typical pétanque player.”

(Nine hundred competitors is still, of course, a far cry from the world’s largest pétanque tournament, the Mondial la Marseillaise à Pétanque, which, for its 49th edition earlier this month, drew 13,104 participants, aged 12 to 84, from 19 different countries to France’s second city. But it’s not bad for London. Indeed, Pernod Ricard found the experience heartening enough to announce a series of exhibition matches to be held in Spitalfields every Tuesday evening in August.)

One of the more unlikely leaders of this surge in interest is Olly Dixon, of the London synthpop band Filthy Dukes. He recently co-founded the East London Pétanque Association, which aims – among other things – to dramatically broaden the game’s appeal by staging “guerilla pétanque” events at selected summer festivals, such as Field Day in Hackney’s Victoria Park on Saturday.

More regularly, boulistes in the capital gather on summer evenings in such un-Provençal locales as Cleaver Square in Kennington, Brockwell Lido in Herne Hill and Larkhall Park, Lambeth, for a post-work end or two (as each game in a match is called). Flourishing clubs have been founded in the last two or three years in Kingston and on Parliament Fields.

And according to Mike Pegg, president of the English Pétanque Association and Britain’s only qualified international umpire, pétanque’s appeal is not confined to London or even the south-east (although Brighton also has a particularly well-used piste). Reflecting the game’s informal success, membership of the EPA has been climbing for several years: it now boasts 3,000 signed-up members in 300 affiliated clubs across 15 regions, from Yorkshire to Cornwall, Pegg says, with successful associations in Wales and Scotland too.

The game’s growing popularity, he says (echoing Rabelais), is down to the fact that it’s “for both sexes, for all sorts, and all ages. It’s exceptionally sociable yet tremendously competitive. You can play it on any reasonably level patch of bare hard ground; you don’t need a manicured lawn. And while the rules are as simple as you could imagine, the tactics can be as complicated as chess.”

The principles of pétanque are as old as history. Archaeologists found two balls and a jack in the sarcophagus of an Egyptian prince buried in the 52nd century BC. The ancient Greeks and Romans liked playing with stone balls; medieval Europeans preferred wooden ones studded with nails. Boules became so popular in France that the game was banned for commoners for much of the 14th and 15th centuries. Here, successive English kings from the time of Edward III forbade their archers to play it, and an act not repealed until the 18th century formally outlawed the game for “artificers, labourers, apprentices and servants” at any time except Christmas.

(In France, several regional variants of boules emerged, and still exist, although pétanque is the most popular. Here, boules eventually mutated into the altogether more refined lawn bowls, although quite when it’s hard to say. Sir Francis Drake may have insisted on finishing his game of bowls on Plymouth Hoe before laying into the Spanish Armada, but contemporary paintings show his group playing with metal cannon balls on a gravel surface, and some portray him lobbing the ball, not rolling it: it seems likely we played something more similar to pétanque than bowls until at least the 19th century. Today the two versions, Pegg insists, co-exist peacefully, though pétanque “probably appeals to a rather younger crowd”.)

Back across the Channel, meanwhile, following that crucial intervention by Martine Pilate’s grandad, the first formal pétanque tournament was played under the new rules in 1910, and the first world championships in 1959. The Fédération Internationale de Pétanque now has more than 600,000 members in 52 countries. While more than half of them are in France, the game is huge in unexpected places: Queen Sirikit of Thailand, for example, was such a fan that pétanque became an official sport of the Thai army.

It’s a devilish clever game. The object is simple: individually, or in two teams of two (doublettes) or three (triplettes), you have to get your own balls (steel; of restricted size and weight; marked and engraved as you choose) as close to the jack (the cochonnet, or piglet) as possible. But in the process – and here’s the fun bit – you are permitted, nay encouraged, to interfere with your opponent’s.

Pétanque is thus a game of dexterity and technique, but also of gamesmanship, bad behaviour and sheer animal cunning. Of skill, and skullduggery. In French, pretty much the worst insult you can throw at a pétanque player is that he’s “transparent”.

Teams have pointers, who aim to “kiss” the jack with their balls, and shooters, who try to blast their opponents’ better-placed boules (and if necessary the jack) to kingdom come. So: point or shoot? Pin-point accuracy, or massive and destructive force? Go for broke – a throw known as à carreau knocks the enemy’s winning boule out, leaving yours in its place; le bec inches a potentially winning boule of your own yet closer to the jack – or play it safe? (And remember: hovering over every game is the dread spectre of Fanny, the demoiselle – or, more usually, artistic representation thereof – whose bare bottom the player who suffers a 13-0 defeat is required to kiss.)

The French, not surprisingly, dominate the competitive game. “They start young,” says Pegg, “and they play anywhere – in a car park, under the Eiffel tower.” Some players reach extraordinary levels of skill: the great Christian Fazzino was capable of shooting 992 boules out of 1,000 in the space of an hour. The undisputed young star of the moment is Dylan Rocher, barely 18, who earlier this month ousted 12-time world champion Philippe “Le Dieu” Quintais and his team to take the Mondial triplettes in Marseille. He’s now famous for life in France.

The Brits don’t fare badly: we have reached the last 16 on occasion, and once won bronze in the ladies’ shooting. But we obviously lack the low cunning needed to go all the way. “Those that do well in Britain,” says Brousson, “tend to be big characters, voluble, quite Gallic in their attitude.” Here, it’s really the social aspect that wins out: “The friendliness, the chat, the forgetting of your problems. And, um, the drinking. You can’t beat it.”

The rules

• Someone from Team A throws the jack 6-10m away.

• The same player lobs the first boule, always underarm.

• Now someone from Team B throws; this team keeps throwing until they land a boule closer to the jack than Team A or run out of boules.

• Then it’s Team A’s turn again.

• Points are scored when everyone is out of boules: one point for each boule closer to the jack than the best-placed boule of your opponents. First team to 13 wins.


Airship Communications: High Flyer or Pie-in-the-Sky? In the coming months, Sanswire Networks and GlobeTel plan to launch a fleet of airships above the earth to provide broadband and cell service. The launch could give a whole new meaning to “down time.”

Leave a comment

Look! Up in the sky! It’s a bird. It’s a plane. No, it’s Stratellite!

It hovers nearly 13-miles above the earth, looks like an updated version of the ill-fated Hindenburg, and, reportedly, can provide high-speed internet access, video and cell phone service to an area roughly the size of Texas. The creators call it a Stratellite—a cross between a satellite and a ridge-frame blimp or dirigibles.

The folks at Sanswire Networks LLC and GlobeTel Communications Corporation, who are behind the project, are quick to say it is, “not a blimp!” but an airship.

The difference is that a blimp is basically a gas-filled bag with a gondola attached to the underside. The Stratellite also has a gondola, but its frame is rigid—sort of an updated version of the airships or dirigibles that plied the skies in the early part of the 20th century. The German airship Hindenburg, which exploded spectacularly over Lakeshurst, New Jersey (“Oh, the humanity!”), was the most famous of those ships which carried passengers to and from the U.S. and Europe.

Instead of carrying passengers, these new ships will carry communications equipment that can provide broadband and cell phone service to tens of thousands of customers.

“A Stratellite is conceived as an autonomous communications and surveillance platform that will park at a specific location in the stratosphere approximately 13 miles up,” said Douglas Murch, a retired USAF Lieutenant Colonel, who is heading the project. “At this altitude, the Stratellite provides an extensive footprint of coverage, approximately 126,000 square miles, and brings immediate communication connectivity to areas that have no ground infrastructure.”

Old idea, new skin
Unlike the airships of old, the Stratellite is very light, using composites—instead of metal or aluminum—for the frame, and light-weight synthetic materials for the hull skin. It also utilizes gas containment bags instead of one giant chamber along with regenerative, or long-endurance non-regenerative, electric power versus gas or diesel fuel. It flies by remote controls without a pilot, and can stay aloft in a fixed position for up to 18 months.

The concept of an airship being used for communications may be novel, but it is not new. The idea was floated in the 1990s during the big ‘dot-com’ boom. At the time, it got a lot of attention, but little backing. The technology took a final nose-dive when DSL and cable-delivered broadband came on the scene and the “dot-com” bubble burst. Ultimately, it failed to get off the ground. This time around, the planners say the technology is much better and the time is right.

What makes it interesting for the ISP is that instead of carrying passengers, these modern airships will carry “telecommunications, broadcast and, if used by government or institutions, other assorted sensor and/or surveillance payloads, providing voice, data and video services to customers,” said Murch.

If that is not enough to get your attention, Murch claims they have “other certain technical features we do not wish to disclose at this time.”

While they are claiming a “potential” range of up to 126,000 square miles, Murch tempers this by adding that the “range for ground wireless devices varies with [each device’s] particular format and output power—and whether a CPE [customer premises equipment] or a repeater type device, if required, is used for direct communication with the Stratellite or if the device connects to a ground based network for uplink to the Stratellite for backhaul.”

All an ISP will need to connect to the Sanswire Network Stratellite is an uplink/downlink with repeater system. No other technical issues are anticipated, according to a company spokesperson. Prices for connecting to the Stratellite have not been set yet, but the company claims a “savings over most ground-based systems.”

Murch adds that based on recent studies, the airship would be one-tenth to one-twentieth the cost of a comparable ground-based system “even when you calculate the cost of construction and the cost of the ground stations and antennas.” Final costs and expenses will depend upon the population served and they type of services offered.

A plan, a plan, an airship
If the response for the airship telecommunications platform is as good as anticipated, Sanswire Networks plans to have 1,500 to 1,800 of these babies hovering over the landscape within the next 20 years. The total ‘projected market’ based on ‘current’ usage is said to be approximately 3,200 of them!

In case you are worried that we could have another Hindenburg disaster in the making with the Stratellite, Murch said there is not much chance of that, noting that the airship has segmented gas cells.

“Losing one gas cell will not have a dramatic impact on its buoyancy. Even if you lost all the gas cells at once, the parasitic drag from such a large, lightweight structure would result in a slow descent. Further, it is possible that an automated rocket deployed parachute system could be installed to further slow its descent rate if final calculations show it warrants it having one installed for such an unlikely emergency situation.”

Specialized markets
But don’t plan on being able to connect to one anytime soon. The first to get Stratelites will be areas where there is customer need and a lack of alternative systems. “Third world and developing countries is where the most intense interest is coming from for telecommunications,” Murch said.

Niche markets, such as rural areas where broadband is spotty or non-existent, and areas hit by natural disasters where terrestrial towers have failed or been destroyed are other potential markets. An example are the areas that were hit by Hurricane Katrina. Right after the disaster, satellite systems providing phone and data services jumped in popularity in Gulf Coast areas.

Murch added that the U.S. government has already indicated a “significant” interest in the technology. Presumably, the government is interested in using it for security and surveillance.

As for reliability, Murch claims that the core network should be as reliable as any other mode of communication. He noted that weather should not be an issue but that, on the ground, trees and buildings do affect some types of signals, just as they do for ground-based systems. However, “with the Stratellite, there is a more direct look up/down signal” since the signal has fewer obstacles, such as buildings or trees, in the way, providing a more direct line of sight and, in theory, a cleaner signal.

According to Sanswire Networks, initial lower altitude and ground-based long distance tests have been positive. While they have not yet conducted stratospheric tests, the company claims there are no foreseeable communications issues with regard to speed, responsiveness or latency.

Technology looking for a market?
It sounds great, but some believe the idea is little more than a ‘pie-in-the-sky’ dream that, like its predecessors, will come crashing back to earth. Detractors dismiss it as a technology looking for a market as they point out that the cost may not justify the limited audience.

It’s estimated that the cost of just one of these airships is in the range of $30 to $40 million. Considering that in order to attract any business, the cost to consumers must be competitive, there must be very significant demand in order to pay off the purchase price.

Additionally, they are not the only game in town. Late last year, the Federal Communications Commission (FCC) approved Arizona-based Space Data Corporation‘s SkySite technology for use in air-to-ground (ATG) communications. The approval was part of the FCC’s decision to increase competition in the air-to-ground services market.

Their system uses balloon-born (similar to a weather balloon) communications equipment, known collectively as the SkySite Network, which operate in “near space” or over 20 miles above the earth. This past August, the U.S. Air Force Space Command (AFSPC) Space & Missile Systems Center’s Development and Test Wing at Kirtland Air Force Base, New Mexico, awarded a $49 Million contract to Space Data Corporation to provide a near space communications system.

There are also unanswered questions concerning the durability of dirigibles like the Stratellite. It’s an idea that has never been fully tested. The stratosphere is an inhospitable place above the jet stream where temperatures are usually around freezing. To date, no airship has ever stayed in the stratosphere for an extended period, so it’s anybody’s guess just how the environment will affect an airship that is stationed there for a year-and-a-half at a time.

Another problem is that in most places in the world, wireless is a proven technology in a market that is already saturated. Airship-based communications is relatively new and still unproven. The trick is going to be to attract sufficient venture capital to make the idea fly.

For now, it’s an intriguing idea that does seem to hold potential for certain markets.


`Jailbreaking’ of IPhones to Add Apps Backed by U.S.

Leave a comment

Owners of Apple Inc.’s iPhone can unlock the device to use applications not authorized by the company, the U.S. Library of Congress said.

Librarian of Congress James H. Billington added the practice, described in the ruling as “jailbreaking,” to a list of actions that don’t violate copyright protections. The decision affecting iPhones and other smartphones was posted today on the agency’s website.

The library acted as part of a periodic review by its copyright office, called for under a 1998 law, into whether legal uses of technology were being blocked. The ruling was a victory for Apple critics led by the Electronic Frontier Foundation, a San Francisco-based privacy-rights group that petitioned the library.

“Now people can go ahead and fix their phones and jailbreak them so they can run all sorts of different applications,” Corynne McSherry, the group’s senior staff attorney, said in an interview. “They can make full use of the phone they bought without some kind of legal liability hanging over their head.”

Apple has sold almost 60 million iPhones since its 2007 debut. The company’s App Store has more than 225,000 applications available for download. The process for inclusion in the App Store has drawn criticism from some developers whose material was rejected by the company.

The company based in Cupertino, California, says it typically withholds approval of applications because they have technical bugs or contain material such as pornography that the company considers inappropriate.

‘Great Experience’

“Apple’s goal has always been to ensure that our customers have a great experience with their iPhone and we know that jailbreaking can severely degrade the experience,” Natalie Harrison, an Apple spokeswoman, said today in an interview. “As we’ve said before, the vast majority of customers do not jailbreak their iPhones as this can violate the warranty and can cause the iPhone to become unstable and not work reliably.”

The Library of Congress also said in the filing posted today that people don’t violate the law when they circumvent copy protection on DVDs and extract short excerpts to create new, noncommercial works.

The decision “unnecessarily blurs the bright line established” in copyright law against circumventing technical protection measures, said Elizabeth Kaltman, a vice president with the Motion Picture Association of America, in an e-mailed statement. The Washington-based organization represents film studios.

‘Means Nothing’

The ruling affecting iPhones “absolutely means nothing as a practical business matter” in part because it doesn’t require any action by handset makers such as Apple, Motorola Inc. and Nokia Corp., Daniel Ernst, an analyst at Hudson Square Research in New York who doesn’t own Apple shares, said in an interview. The Library of Congress findings don’t affect AT&T Inc., the iPhone’s U.S. carrier, Ernst said.

Apple can update the iPhone’s systems to make it harder for unauthorized applications to work on the device, Ernst said.

Apple may also use other laws to keep iPhones from being modified, said Jason Schultz, co-director of the Samuelson Law Technology and Public Policy Clinic at the University of California, Berkeley.

“Having the copyright office side with the jailbreakers doesn’t look good in court for Apple,” Schultz said in an interview. “They will have to explain why the copyright office is wrong.”

Making Margaritas

Jonathan Handel, an attorney for TroyGould in Los Angeles specializing in entertainment and technology, said the decision could open Apple to lawsuits against its practice of preventing the use of certain software on its devices.

“When someone buys a kitchen blender, they don’t expect it to refuse to make a margarita,” Handel said in an interview. “And when they buy an iPhone, they don’t expect it to not run reasonable software.”

In a filing with the Library of Congress during consideration of the issue, Apple said exempting jailbreaking would “destroy the technological protection of Apple’s key copyrighted computer programs in the iPhone device itself and of copyrighted content owned by Apple that plays on the iPhone.”

Apple fell 66 cents to $259.28 at 4 p.m. New York time in Nasdaq Stock Market composite trading.

To contact the reporters on this story: Todd Shields in Washington at; Adam Satariano in San Francisco at


7 Steps to a Great Résumé

Leave a comment

Turn an iPod into a poor man’s iPhone

Leave a comment

I try to keep a stiff upper lip about not having an iPhone. Just couldn’t afford it – not with the minimum £44.05 a month it costs for a monthly contract.

I could, however, afford the £165 iPod Touch – and got it as a gift, as it happened. It has most of the same goodies: a web browser, email, YouTube. And it stores way more music than the iPhone.

Plus, the other day I used it to call China.

Yup, a call around the world – on a device that doesn’t have a phone. A handful of applications on Apple Inc.’s iTunes store will let you do this, as long as you’re in a Wi-Fi hot spot.

My iPhone complex hasn’t disappeared, but at least now I have a device that looks just like it, has no monthly service fees, and lets me make free or cheap phone calls.

The best part of these applications – which require the second-generation iPod Touch that came out last year – is that they are free to download, and calls to other people using the same app won’t cost you anything.

Two of the services I’ve tried, Truphone and Fring, will also let you make free calls to Google Talk users and type instant messages to friends online. Both automatically queue up a list of buddies from different services you might have, including Gmail chat, AIM and MSN Messenger, once you log in.

But it’s Truphone’s pay feature that puts it ahead of the others. TruPhone charges you to make calls to landlines or regular cell phones, but generally at better rates than most wireless carriers. And it’s upfront about what you pay.

Your balance – which you can add to with a credit card, either on the device or on your computer browser – pops up with the dial screen. Calls in the US are all 5 cents per minute (2 cents if you sign up to pay a $4 monthly fee).

Rates outside the US vary wildly but you can check in the application before you dial. To call cell phones in China, for instance, is only 5 cents per minute, while France is 25 cents. Antarctica? A whopping $2.25.

You can make regular calls with Fring using a Skype account, but that’s another layer to deal with.

The calls on these services sound pretty good, a little tinny but clearer than my regular cell phone connection. iPod Touch users will need Apple’s ear buds that have a tiny microphone on the back of the volume control along the cord, or any iPhone compatible headphones like Ultimate Ears.

The most serious drawback is the most obvious: While the iPhone uses 3G networks to provide internet access anywhere, on the iPod Touch you’ll need to stick to Wi-Fi hot spots.

For rural or suburban dwellers who don’t encounter lots of free Wi-Fi zones, that may very well mean limiting yourself to your house, or other places where there’s a computer with the same internet phone call capabilities anyway.

That means these apps probably won’t replace your cell phone. But they can moderate your iPhone envy.


BP oil spill: failed safety device on Deepwater Horizon rig was modified in China. Blow-out preventer was sent to Far East at BP’s request rather than overhauled in US

Leave a comment

BP ordered the owner of the Deepwater Horizon rig, whose explosion led to the worst environmental disaster in US history, to overhaul a crucial piece of the rig’s safety equipment in China, the Observer has learnt. The blow-out preventer – the last line of defence against an out-of-control well – subsequently failed to activate and is at the centre of investigations into what caused the disaster.

Experts say that the practice of having such engineering work carried out in China, rather than the US, saves money and is common in the industry.

This weekend BP remained cautiously optimistic that the cap placed on top of the Gulf of Mexico well on Thursday night would continue to hold back the torrent of oil. It is the first time the flow has been stopped since the accident happened almost three months ago. But BP said that the pressure readings from the Macondo well were not as high as it had hoped, which could indicate that it has ruptured and that oil could be leaking out somewhere else.

There is no evidence that the significant modifications to the blowout preventer (BOP), which were carried out in China in 2005, caused the equipment to fail. But industry lawyers said BP could be made liable for any mistakes that a Chinese subcontractor made carrying out the work. It would be almost impossible to secure damages in China, where international law is barely recognised.

It is understood that lawyers for Cameron International, the manufacturer of the BOP, will argue the device was so significantly modified in China that it no longer resembled the original component, and that Cameron should therefore not be held liable.

Transocean, the owner of the Deepwater Horizon, which bought the BOP from Cameron, has already told congressional hearings into the disaster that the modifications were carried out at BP’s request and “under its direction” as the lessee of the rig. BP and Cameron declined to comment this weekend.

Responding to the latest developments in the Gulf, President Obama said that it was too early to say if the well had been permanently fixed. “We’re moving in that direction, but I don’t want us to get too far ahead of ourselves,” he said.

BP has been monitoring the pressure inside the well since Thursday. Thad Allen, the retired Coast Guard admiral overseeing the response effort, said that pressure of about 7,500 pounds per square inch would show the well was intact, while pressure that lingered below 6,000 psi would indicate it had been damaged and could be leaking. The pressure on Friday night remained at about 6,700 psi and was rising only fractionally.

Allen has told BP to step up monitoring for any seabed breaches and gather additional seismological data to detect any pockets of oil in the layers of rock and sediment around the well.

This week David Cameron will travel to the US to meet Obama and other politicians where he will stress the importance of BP to the UK economy. Business figures such as Lord Jones, the UK trade ambassador and former CBI boss, criticised Cameron for not being sufficiently supportive of the company last month after he said that he “understood the US government’s frustrations” over BP’s failed attempts to stop the leak.

A government adviser said that Cameron and Obama shared common interests over the crisis, and that both wanted BP to survive the incident. BP accounts for over a tenth of all share dividends paid by UK companies, and pension funds rely on the income it generates. Politicians in the US want BP to make enough profits to pay potentially billions of dollars in compensation and damages arising from the spill.


How to Make an HTML5 iPhone App

Leave a comment

How to Make an HTML5 iPhone App

You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn.

I don’t want to say that you should give up on the objective: you can get it eventually. But in the meantime, there is something else that you can do.

You can create a native app that lives with all the other apps, and for the most part, it’s going to be a pitch-perfect imitation.

You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript.

I’ll show you how to create an offline HTML5 iPhone application. More specifically, I’ll walk you through the process of building a Tetris game.


What am I talking about when I say “offline”? Well, it means that we have a custom icon, a custom startup screen, a native look-and-feel, and you can use the app even when the phone isn’t connected to the Internet.

The app should be as functional as it can when it is offline, just like normal native mobile apps.

This is a tutorial specifically for iPhones but most of these techniques apply to all phones that have HTML5-capable browsers.

Yeah, I mean it, check out the following image. It has no URL bar and no navigation at the bottom. It looks just like a native mobile application.

Final result


You are going to need access to a server where you can change the HTTP Headers on your files. This is because we need to take advantage of HTML5’s offline caching (more on this later down the page).

Apache does this really well and you can just add something to a .htaccess file and it will just work. Here’s a tutorial on modifying HTTP headers using htaccess.

The other thing you need to do is to enable the debug bar in Safari’s web browser on your iPhone unit. Go to the > Safari > Developer on your iPhone, then turn on the debug console. This will help you spot potential JavaScript errors.

Once you’ve built your app, you should turn this off so that you will get the full experience when testing your HTML5 iPhone app.


About the App

Icon and Startup Screen

The icon needs to be 57px x 57px.

The iPhone will round the corners of your icon, create a dropshadow, and add a shine to whatever icon you use.

It should be in PNG or JPG format.

Here is what I used for the tetris game.

Icon and Startup Screen

The startup screen needs to be 320px x 460px and should also be in PNG or JPG format.

Here is what I used for the startup screen.

Icon and Startup Screen

Some tips before you start

Stay small, sparse and simple.

  • Small: This is mobile app development so even though you are caching your stuff, it’s still a smart idea to keep your file sizes lean.
  • Sparse: You should try to keep the amount of files you deal with as low as possible.
  • Simple: Start with a few simple ideas and execute it. By keeping your scope small, you can get things done faster.

Application Cache

This is a new standard, you can read the spec here.

Application caching allows browsers to determine in advance all the files a web page will need for the web page to work.

It will cache those files (to a fault, sometimes). The syntax of this file is simple: just list the locations of your files in either absolute (e.g. or relative to the manifest file (/picture.png). The browser will keep those files offline.

You can also list a few URLs that should not be cached, but this isn’t pertinent for our offline app (if you’re interested, read about this in the documentation).

One tricky part to this whole thing is that the manifest (the list of files that need to be cached offline) has to be passed with a filetype Header set to text/manifest. That is why you need access to a web server that can set HTTP headers.

Screen Size

A quick note when designing your application: When you are in app mode, you have a screen size of 320px x 460px. When you are in web mode, it has a screen size of 320px x 356px. This can affect the user interface of your offline HTML5 app.

Here you can see the difference side by side.

Screen Size


It’s a real browser so your HTML is exactly the same. The iPhone browser is also in the forefront of HTML5, so dig into the spec.

For more in-depth detail, check out the Safari Developer’s corner:

Let’s get coding

The app starts by defining your markup. here is the markup for my Tetris app.

<!DOCTYPE html>
<html manifest="tetris.manifest">

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="iphon_tetris_icon.png"/>

    <link rel="apple-touch-startup-image" href="startup.png" />
    <link rel="stylesheet" href="tetris.css" type="text/css" media="screen, mobile" title="main" charset="utf-8">

    <title>offline Tetris</title>
   <!-- Put your Markup Here -->
   <script type="text/javascript" src="tetris.js"></script>


First, notice the Doctype. Isn’t HTML5 awesome?

The manifest="cache.manifest" property on the <html> tag is how the browser knows that we want to cache this web page offline.

There’s proprietary Apple markup on our HTML5 page. A brief explanation of each:

  • apple-mobile-web-app-capable: This is another tip-off that we want to be an offline app.
  • apple-mobile-web-app-status-bar-style: This hides the status bar, and nav bar when the app is offline.
  • apple-touch-icon:This is the pointer to the image that want to be the icon.
  • apple-touch-startup-image: This is a url pointing to the startup image.

Also note that you should put CSS at the top and JavaScript at the bottom (best practices still apply here).


It’s almost the same as a normal web page. There are some specific -webkit CSS rules that you can use that do some really cool things like animation, but this is a quick-and-dirty guide and that’s outside of the scope of this article.

The CSS is just Plain Jane.

body {
    background: #d7d7d7;
#tetris {
    width: 320px;
    height: 460px;

The style is really just to the div element on our web page to make sure it fits in the iPhone’s viewport properly.


I used a modded version of a JavaScript from Dalton Ridenhour; I found it on Github. The JS was written originally for a normal web browser. The only modifications I had to make was to support not having a keyboard.

In general, JS functions work just fine on the iPhone—there are exceptions though. Think about something like a mouseover, the event exists on the iPhone, but I am not sure how helpful it is when you don’t have a standard pointing device (such as a mouse). Quirksmode posted an article about events on the iPhone that is really helpful.

When you have all of that, you can test it out but opening your index.html in an iPhone, and you should be able to see everything work.

Then, next step is to server it from an actual webserver that can set the proper settings on the cache.manifest.

Then you could be able to add it to the home screen and have all the extras, and see the offline mode.

You can see a working version I have set up at:

Bonus Section: Offline Data

Along with the ability to keep files that are needed offline, you can also store user data in an offline database. There are two major APIs for per user and/or per page data. The first is localStorage. localStorage, is an easy to use key-value store with a dead simple API.

localStorage.dataToStore = 5;
console.log(localStorage.dataToStore); // 5

You can use this for storing the user’s score, for example.

The second is actually an offline SQL engine, a webdatabase. The APIs are a little more advanced. Here is a little of you will see.

// Try and get a database object
var db;

try {
    if (window.openDatabase) {
        db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
        if (!db)
            alert("Failed to open the database on disk.  This is probably because the version was /
            bad or there is not enough space left in this domain's quota");
    } else
        alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
} catch(err) { }

// Check and see if you need to initalize the DB
db.transaction(function(tx) {
    tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {
    }, function(tx, error) {
        tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp /
        REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {

// Insert a test Note.
var note = {
    id: "1",
    text:" This is a test note",
    timestamp: "112123000",
db.transaction(function (tx)
    tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES /
    (?, ?, ?, ?, ?, ?)", [, note.text, note.timestamp, note.left,, note.zIndex]);

// Get all the notes out of the database.
db.transaction(function(tx) {
    tx.executeSql("SELECT id, note, timestamp, left, top, zindex /
    FROM WebKitStickyNotes", [], function(tx, result) {
        for (var i = 0; i < result.rows.length; ++i) {
            var row = result.rows.item(i);
            var note = new Note();
   = row['id'];
            note.text = row['note'];
            note.timestamp = row['timestamp'];
            note.left = row['left'];
   = row['top'];
            note.zIndex = row['zindex'];

            if (row['id'] > highestId)
                highestId = row['id'];
            if (row['zindex'] > highestZ)
                highestZ = row['zindex'];

        if (!result.rows.length)
    }, function(tx, error) {
        alert('Failed to retrieve notes from database - ' + error.message);

Wrap Up

There is lot that can be done with offline HTML apps. Games, like tetris, are even possible, but you would probably want to consider what you want to do and make sure its right for an offline app. Quake 3 Arena, probably not. A to-do list app, definitely.

Let thousands apps bloom!


Related Content

About the Author

Alex Kessinger works for Yahoo! as a front-end engineer. Elsewhere, he likes to curate great stuff from the web on his blog, He is also a founding member of the Tastestalkr Network, a brand group. When not working, Alex lives in the bay area and enjoys really good food.


Older Entries