Convert your website or web app to iOS app

I’ve been looking at web apps for iOS last weekend, as I was helping a friend with possibly porting his work as a native app. The solution provided by Apple is rather elegant, and very minimal in terms of work required. If your web app is HTML5 and CSS3 compliant, you’re good to go with about 15 minutes work. You’re able to have a web app run from the home screen of the iOS device, and appear to be native. The only flaw at this stage is that JavaScript is a bit laggy at times; this is primarily due to the fact that Apple has upgraded the JavaScript engine for Mobile Safari to the Nitro engine, while apps that run outside of Mobile Safari have not received access to the faster engine (read an unbiased explanation here). Anyways, what to do.

First, we need to hide the Safari components. We do this by adding the following inside the <head> tag of your normal web page/s:

<meta name="apple-mobile-web-app-capable" content="yes" />

Next, we need to hide the Status Bar. Again, by adding a single line to the <head> tag of your normal web page/s:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

There are three options for colors you can use here:

  • default – the status bar appears normal
  • black – the status bar has a black background
  • black-translucent – the status bar is black and translucent

If set to default or black, the web content is displayed below the status bar.
If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.
The default value is default.

Now, the icon for your app. Presumably, you will want to use the same image as for your favicon, so at least you have the artwork ready to go. It just needs a little tweaking, and we’re away. You’ll need an icon which measures 57×57. You have two options for this, apple-touch-icon and apple-touch-icon-precomposed, depending on how you want Apple to handle your icon. The first option tells iOS that you’ve given it a generic icon to which it will add the standard app icon effects (rounded corners, drop shadow, and reflective shine); the second option tells iOS that you are giving it a fully kitted out icon with no need for adjustment. Bear in mind that the icon will always be placed on a black background, and be overlaid with a round-cornered “stencil”; so any transparent elements to the image will appear as black in the final displayed version.

Once this icon is created, place it in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. This specifies the icon for the entire website (every page on the website). Now you can link to it with a single line to the <head> tag of your normal web page/s:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

or

<link rel="apple-touch-icon-precomposed" href="/custom_icon_precomposed.png"/>

For more information, check out Apple’s Web App tools, and also their discussion of meta-tags in iOS.

The new HP TouchPad gets out there (a little bit)

I’m really liking the first looks of the (soon to be released) HP TouchPad. Very sexy and swish looking. Sounds like webOS is pretty awesome too. We could have some serious iPad competition here, as long as the price point is set properly.

Another nice looking feature is the next generation of Touchstone technology (NFC anybody??):

Easily share a URL with your Pre3 simply by tapping them together. Receive text messages and answer phone calls on your TouchPad so you don’t miss a thing. Start reading a website or blog on a TouchPad and then tap your smartphone to take it to go.

NICE!!! and the specs are not slacking at all.

Color Black
Operating system HP webOS
Display 9.7-inch XGA capacitive, multitouch screen with a vibrant 18-bit color, 1024×768 resolution display
Keyboard Virtual keyboard
Email Microsoft® Exchange email with Microsoft Direct Push Technology

POP3/IMAP (Yahoo!® Mail, Gmail™, AOL, Hotmail®, etc.)

Messaging Integrated IM and SMS
GPS3 A-GPS (3G models only)
Digital camera Front-facing 1.3-megapixel webcam for live video calling
Sensors Light sensor, accelerometer, compass (magnetometer), and gyroscope
Media formats supported Audio formats: DRM-free MP3, AAC, AAC+, eAAC+, AMR, QCELP, WAV

Video formats: MPEG-4, H.263, H.264

Wireless connectivity Wi-Fi 802.11b/g/n with WPA, WPA2, WEP, 802.1X authentication;

Bluetooth® wireless technology 2.1 + EDR with A2DP stereo Bluetooth support

Memory Choose either 16GB or 32GB internal storage
Battery Rechargeable 6300 mAh (typical) battery
Connector Charger/microUSB connector with USB 2.0 Hi-Speed
Headphone jack 3.5mm stereo headset/headphone/microphone jack
Speakers Internal stereo speakers and Beats Audio™
HP Touchstone for TouchPad Compatible
Processor Qualcomm Snapdragon dual-CPU APQ8060 1.2GHz
Dimensions Width: 240mm (9.45 inches)

Height: 190mm (7.48 inches)

Thickness: 13.7mm (0.54 inches)

Weight Approximately 740 grams (1.6 pounds)

Testing WordPress app for iPad

Just a quick test post to check if my iPad WordPress app is logged and rocking properly.

The next Angry Birds update – Mighty Eagle!

After a long wait, the Mighty Eagle is almost here! This legendary and mysterious bird will be included in the next Angry Birds update, due to be released in the next few days. The update includes 15 levels in a hot new desert themed episode, Ham ‘Em High, with a brand new shiny golden egg, and all the usual goodies we love to see from Angry Birds.

The Mighty Eagle is downloadable content. If you get stuck in the game, you have the opportunity to purchase a can of sardines, which you use to lure out the elusive Mighty Eagle. This phenomenal creature will the soar from the skies to wreak havoc and smash the pesky pigs into oblivion!

Mighty Eagle will help you skip the toughest obstacles, but there’s a limit: you can only use the aid of Mighty Eagle to pass a level once per hour. In other words, when you pass a level with Mighty Eagle, you need to wait an hour to use him again to pass another level.

Is that all? Far from it! Mighty Eagle includes all new gameplay goals and achievements! In each level that you already cleared using the regular birds, you can smash away freely and try to fill up the destruction gauge! If you want to smash your way through every level leaving nothing behind, you have every incentive to do so!

Mighty Eagle is an in-app purchase in Angry Birds and costs $0.99/£0.59/€0.79NZ$1.29 to download.

Here’s a sneak peek

[text from Angry Birds press release]

my iPad app round-up

So, I’ve had my iPad for over a month now, and I felt it was time to review the apps I have on it now. I figure a month is enough time to settle into my usage patterns and have discarded apps that just didn’t do it for me afterall.

1: Social Networking –

I don’t run one app for all my social networking, some people prefer to but I have found it better to have apps that focus on one thing, and do what they do do well. For Twitter, I was originally using Twitterific, and had just upgraded to the paid version the day before Twitter released their own app. Since then I have been devoted to the official Twitter app which is clean, intuitive, and just pretty much perfect in my book.

For Facebook, I am still floating between two apps; Friendly and the official Facebook iPhone app. Both are pretty good, Friendly is more aesthetically pleasing due to being designed for the iPad form-factor, while the official FB app seems a little more intuitive and “like” Facebook itself (as you would expect).

I’m also running FourSquare on my iPad, as I don’t have an iPhone (still!!).

2: Utilities / Lifestyle –

I have quite a few utilities set up on my iPad, for news I am running the fantastic NYTimes app, the TVNZ News app, and the NZ Herald app. I also use GeekNews to pull all my geeky tech blogs together into one streamlined place. The Mashable! app is great for a quick check up on what is trending or popping up online currently.
I am currently using PrinterShare for printing directly from the iPad on my home network. This will hopefully change when iOS4 is released for iPad (rumors indicate late November 2010 maybe).
I also have Google Earth, the IMDb app, and a great tracking app – Parcel – which allows you to just put in your tracking code allocated to the delivery you are expecting. Saves having to visit different websites and remember your tracking numbers for different companies. Some other little gems are:
Epicurious
Wikipanion
Evernote
– The WordPress app for blogging on the go
Shazam
Then for a bit of creative fun, I have GrooveMaker and Drums! GrooveMaker lets you mix tracks, and even create your own tracks on the fly. Drums! is just that, a complete drum set on your iPad – in fact, it’s actually three complete drum sets, as you can choose between Standard, Groove, and Acoustic kits. The sound is true to life, so go get it.

3: Web Dev –

A few free web-dev helpers tucked on the iPad too. I’ve got JsAnywhere and three great apps from Interactive Blasphemy. JavaScript Anywhere is a JavaScript tool which enables you to edit your JS script, adjust the CSS, and then view the results in an HTML page. You can email the results to yourself. From Interactive Blasphemy I have robots.txt, which is just that, a robots.txt generator; Password, which generates passwords of random characters of length and complexity specified; and RGB/HSB/Hex, which enables you to create that perfect shade for you web job, and also then suggests good matching and contrasting colors.

4: Games –

Yep, the main reason most people have an iPad. I am personally a big fan of the logic/strategy games. I’ll list them all, then comment on a few of them, with more in-depth reviews being added, along with links to the iTunes store, later on:
– iFighter – essentially the classic fighter game 1945 remade for the iPad
– Harbor Master
– FlightControl HD
– Canabalt
– Gravity Hook
– Angry Birds
– Angry Birds (Halloween Special)
– Cut the Rope
– Pocket Frogs
– Plants vs Zombies
– Fruit Ninja HD
– Steve Young Football
– Build-A-Lot 2
– Blue Block
– Crazy Traffic: Crashed XL
– Train Conductor 2: U.S.A.
– No, Human
– Trainyard
– UFO On Tape
– Railway
– Chicktionary
– NOM
– Fish Eat Fish
– Dismount
– GearedHD
– Air Hockey
– TicTacDojo
– Little Metal Ball
– Soosiz HD
– Physics HD
– Gravity HD
– Tilt to Live HD
– NinJump
– Red Bull RC
– Asymmetry
– 8Bit Rebellion (the Linkin Park game)

Surprisingly enough, I have found my usage of the iPad to be alot different than I planned for. I have found the games an easy way to take a 5 minute break when I need to, but have found that I actually now tend to jump on Twitter or a news site when I want a 5 minute chill out. I am still just working with iBooks as my book-reader and PDF-reader of choice. Primarily because I have no need of the flasher features of the other readers out there. Overall, I have to say that the iPad is proving itself to be very worthwhile as a tool; and I keep finding new ways for it to excel and prove it’s worth.

hey, it’s me

So, the advertising campaign I blogged about a few weeks ago is up and at ‘em now. The site went live with the beautiful moi’s mug plastered on it today. Check it out here, and there’s a screen grab below:

science_promo

The new iPad got a look-in too!

awesome new background for my iPad

Just found this fantastic background for my iPad. Have to share it. It’s from Wallpaperama.

03p-7606-ipadwallpaper