Posts in the ‘mobile web’ Category
iPhone Apps – the current sensation in marketing circles. Every brand wants a piece of the iPhone action. Are brands jumping on this bandwagon as part of an overall mobile strategy or is it just the current trendy thing to do? Are brands becoming pre-occupied with mobile apps?
Many people forget that an iPhone app can only be used by people who have an iPhone. Whilst the iPhone is undoubtedly popular, it only has at most 5% of the market, so brands are effectively ignoring a majority of their consumers. Can this really be part of a considered mobile strategy?
There are a number of solutions to this problem:
1) Ignore it.
2) Create apps for other devices. This is expensive as it means a seperate development for each class of device, in a different programming language
3) Get the best of both worlds with a combined app and mobile web strategy. This can reach more consumers for a lower .
Save money, get a bigger audience
If you could have a solution that delivered the coveted iPhone app and also addressed consumers on all other devices you would have maximum coverage for your brand. And if it cost less than developing the native iPhone App, what’s not to like?
Using the latest release of the bemoko multi-channel web development framework, web developers can create a mobile website which works on all devices. The framework very easily allows the site to be tweaked for the iPhone, allowing it to be styled as an app with all the sliding page transitions and fancy effects associated with an app. So now you have a website that looks like an app, the icing on the cake comes with our integration of the PhoneGap framework to wrap the website in native code so it can be placed in the app store as a normal app and downloaded by consumers.
Now you have the iPhone App for the iPhone users and also a website that can be used by all your consumers whatever device they are on. And, because developing a website is much cheaper than developing a specialised app, you’ve only paid a fraction of the price of a native iPhone app with a limited audience.
Finally, a mobile strategy to keep everyone happy!
bemoko today launched the mobile website for the 2009 Doha Tribeca Film Festival and it’s been featured online in Mobile Entertainment.
Have a read of the article here and take a look at the site for yourselves at dtff.bemoko.com
… or in other words we can readily synchronise local browser storage with back-send server persistent storage. This is one of the fundamentals of compelling off line web applications.
So a little background. You may know that you can store data in your local browser database with javascript like …
1 2 3 4 5 6 7 8 9 10 11 12 13 | function store() { if (window.localStorage) { var count=window.localStorage.getItem("count"); if (!count) { count=0; } count++ window.localStorage.setItem("count",count); } } window.onload = function() { store(); } |
and you can even see it in action here, if you got a decent browser such as the latest iPhone 3, Firefox 3.5, Safari 4.
But this ain’t much good if you can’t get this data back to the server to do something useful with it, e.g. share with friends, share with your other devices, keep a backup, send a message … I could go on.
So what we really need is a way to easily listen out to storage events and deal with it in one place. Yep, we could create our own Javascript framework to do this and handle getters and setters, but that sounds nasty to me.
Instead we can know use the onstorage attribute on the HTML body tag to hook into a function that will handle all of these call backs based on local stored data.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function store() { if (window.localStorage) { var count=window.localStorage.getItem("count"); if (!count) { count=0; } count++ window.localStorage.setItem("count",count); } } function handleOnStorage() { myFunctionToSendDataToServer(event.key, event.newValue, event.oldValue); } window.onload = function() { document.body.setAttribute("onstorage", "handleOnStorage();"); store(); } |
Take a look at it in action here in the bemoko mobile test suite. It works on iPhone 3 and Safari 4. You can even see the complete code here.
With the iPhone 3.0 firmware released today, I thought I’d show you how to access one of the features I’ve been most looking forward to – support for the geolocation API in Safari means I can now create location aware websites.
This will be just a quick demo to retrieve and display the current longitue and latitude of your phone, along with a googlemap so we can see if the results are right. The more interesting applications will come….
To do this we’ll use javascript and the newly added Navigator.Geolocation interface to call the getCurrentPosition() function to retrieve the current longitude and latitude of the phone, which we’ll display and pass to the googlemaps API.
The code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iPhone 3.0 geolocation demo</title> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"/> <script> function handler(location) { var message = document.getElementById("message"); message.innerHTML ="<img src='http://maps.google.com/staticmap?center=" + location.coords.latitude + "," + location.coords.longitude + "&size=300x200&maptype=hybrid&zoom=16&key=YOURGOOGLEAPIKEY' />"; message.innerHTML+="<p>Longitude: " + location.coords.longitude + "</p>"; message.innerHTML+="<p>Latitude: " + location.coords.latitude + "</p>"; message.innerHTML+="<p>Accuracy: " + location.coords.accuracy + "</p>"; } navigator.geolocation.getCurrentPosition(handler); </script> </head> <body> <div id="message">Location unknown</div> </body> </html> |
The results:
-
- iPhone OS 2.2.1
-
- iPhone 3.0
-
- iPhone 3.0 – I am here!
Try it for yourself by pointing your Safari browser at http://bemoko.com/blog/iphonegeo.
Update 27/7/2009: I noticed the zoom level on the google static map API wasn’t being set so the map was zoomed all the way out. I’ve added a default zoom for the demo code above. Not sure if thats a new requirement from Google’s side?