3.0 OS and Location
September 15, 2009
There is a new spec (http://dev.w3.org/geo/api/spec-source.html ) to be aware of and incorporate into your code if you are going to use the GPS on the new iPhone 3.0 OS. Here is how to do it.
Note the difference is the “p.coords.latitude” versus “p.latitude” and how to detect the version of the OS:
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<script type=”text/javascript” src=”http://apps.pointabout.com/static/mobile_interface/2.0.0/js/basic_interface.js“></script>
<script type=”text/javascript”>
function init_device() {
alert(Device.version);
document.getElementById(’mydiv’).innerHTML=”Hello world”;
}
var getLocation = function() {
var suc = function(p){
userlat = document.getElementById(’userlat’);
userlng = document.getElementById(’userlon’);
if( Device.version == “3.0″ ) {
userlat.innerHTML = p.coords.latitude;
userlng.innerHTML = p.coords.longitude;
} else {
userlat.innerHTML = p.latitude;
userlng.innerHTML = p.longitude;
}
};
var fail = function(){};
navigator.geolocation.getCurrentPosition(suc,fail);
}
</script>
</head>
<body>
<div id=’mydiv’>Springboard sandbox</div>
<ul>
<li><a href=”#readgeo” onclick=”getLocation();”>Location</a></li>
</ul>
<div id=’userlat’>location…</div>
<div id=’userlon’>location…</div>
</body>
</html>
Developer Tip: Yahoo Pipes Make You Expert-in-a-Minute
August 12, 2009
So the developers here at PointAbout found an awesome new tool this week that has some really useful applications. It’s called Yahoo Pipes, and there’s a demo video below that shows you how to use it do do all kinds of RSS-enabling things to make your content more versatile than ever. For example, AppMakr is all about RSS. But, regular RSS– not Atom. If this was a problem before, it definitely isn’t any longer, thanks to Yahoo Pipes.
And, did you know that you can use Pipes to “mash-up” RSS feeds– that is, get a single, combined feed from multiple sources? Now think of how much better that’ll make your finished product inAppMakr!
Turn any API into an RSS feed using XSLT and Yahoo Pipes
August 4, 2009
Yahoo Pipes gives users the ability to turn an API call or regular XML into an RSS feed, which can then be embedded into our multi-feed RSS reader template. This allows any API to be mashed up and displayed as a mobile application using PointAbout – a very powerful combination! If you’ve never heard of XSLT, here’s a great whitepaper by IBM on it.
A picture of Yahoo Pipes at work, at left.
An intro to RSS and how you can use it to do awesome things with mobile
July 24, 2009
We often get clients who want to create mobile applications such as walking tours, location-sensitive audio tours, or the like.
We’re going to, in this post, show you how you can do this, and help you ensure you have the skills to be successful in the endeavor.
The first thing that clients typically forget is that the data has to come from somewhere. If you want to make a walking tour of a city, there has to be some data about that city for you to give the mobile user. Often, that data has rights attached to it, by the author or publisher, so you can’t just go out and take it. This is one of the most overlooked facets of creating an app – the data does not just magically appear. All of that content about what restaurants to go to, or what monuments to see, etc., was created by someone, and if you use it, they’re going to want you to get their permission first. Maybe you want to take content from your website and put it into an iPhone app.
 |
Assuming you can get access to the data, the next step is to transfer the data to the phone in some manner. RSS is a great way to do this. If you’ve never heard of RSS, you can learn about it here. Think of RSS as the “telephone line” that’s going to transport your data from a computer server to the phone. It keeps you from having to cram your whole site into a tiny mobile browser by letting us extract all the relevant information. |
 |
Next, you have to create an RSS feed. If you’re a little more advanced and you want to manually create an RSS feed, here’s a good tutorial for doing it (you’ll at the very least need HTML skills to do this). However, the absolute easiest way to create an RSS feed is just to use Wordpress.com to get a free blog. When you write blog posts, Wordpress will automatically create the RSS feed for you. Then you can pull that information into a cohesive application that is neatly packaged. |
 |
Next, you’ll need to display the RSS feed on the phone. Luckily, PointAbout can help you here. We’ve developed an RSS reader template that we can customize to taste. We can even make the RSS feed location aware. If you’re building your own RSS feed you’ll want to make sure you format it correctly for us. You should end up with a simple-to-use app! |
 |
Here, each relevant section or article on your site is listed as an item of content which the user can browse at their own leisure.
When you select one of the listed items, you’ll get more in-depth content, like a complete article. This will most closely resemble articles as viewed on your site when using a computer. |
 |
It’s that easy to translate a well-organized webpage to a fast, useful, versatile application. And, with AppMakr, you can build an app just like this one, on your own, in 27 seconds. From there, we can meet with you on a consulting basis to customize your application with fonts, colors, icons, and unique functions that extend and reinforce your brand identity. |
And if RSS is still too confusing, just contact us at right and we’ll set up a consulting project to take care of the details for you!
Going Offline with HTML5
July 21, 2009
Part of PointAbout’s HTML Springboard approach to native application building includes constant research into offline capabilities. HTML 5 offers some exciting new capabilities in this area. Here’s a great article on how to take advantage of offline access to content in HTML 5.
How to format your RSS feeds for PointAbout
July 15, 2009
Want it to look snazzier? See how we can customize the look & feel.
Setting multiple RSS feeds up in a PointAbout iPhone/Android application:
Each feed corresponds to the icon at the bottom of the application. For example, this example is for the “Business” feed. Each icon in the app corresponds to its own feed. The more feeds you want to include in the app, the more icons we’ll have. Here’s how to format a feed:
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<?xml-stylesheet href=”/css/rss20.xsl” type=”text/xsl”?>
<rss xmlns:pheedo=”http://www.pheedo.com/namespace/pheedo” version=”2.0″ xmlns:dc=”http://purl.org/dc/elements/1.1/”>
<channel>
<title><![CDATA[Business]]></title> This corresponds to “Business” in the left image title bar, above
<!– title><![CDATA[Business News & Economic Policy]]></title –> (This is not used by PointAbout, but must be in the feed)
<link><![CDATA[http://www.samplesite.com/business/index.html]]></link> (This is also not used by PointAbout, but must be in feed)
<item> This tag is just duplicated for as many items as you have.
<title><![CDATA[ In the Chevy Malibu, GM's Pride and Its Challenge ]]></title> This is the first item in the list (just duplicate the item tag for other items)
<link>http://feeds.samplesite.com/click.phdo?i=53695</link> This maps to the “Web Link” button on the 2nd image to the right, in the header bar.
<guid isPermaLink=”false”>company_name_12345</guid> Globally unique identifier for item (Must be globally unique among all RSS feeds worldwide. Can also be an HTML link, since that would be unique)
<pubDate>Wed, 15 Jul 2009 10:19:55 EDT</pubDate> Publish date, displayed to right of Title on the image at left
<geo:lat>37.86885</geo:lat> If your item has a physical location, include the latitude here. Click here for more info on GeoRSS.
<geo:long>-122.27293</geo:long> If your item has a physical location, include the longitude here.
<description><![CDATA[
Consumer prices rose at a surprisingly steep rate in June and the nation's factories continued to pull back production, according to new data released today that affirm that the economy remains weak but is not entering a dangerous cycle of falling prices.
<br clear="both" style="clear: both;"/>
<br clear="both" style="clear: both;"/>
<a href="http://ads.samplesite.com/click.phdo?s=53695dc3777fd5113da50d3c72ca99a5&p=1"><img alt="" style="border: 0;" border="0" src="http://ads.samplesite.com/img.phdo?s=53695dc3777fd5113da50d3c72ca99a5&p=1"/></a>
]]></description> This tag is the “meat” of the RSS feed. The CDATA tag allows for this to be HTML and it can be as short or as long as you’d like. Also, if you include an HTML link in this description tag, it will activate the web slide-in. So you could, for example, include a link to a Google Map, as follows: <a href =”http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1600+Pennsylvania+Ave+NW,+Washington,+DC%E2%80%8E&sll=38.900251,-77.036562&sspn=0.035135,0.103254&ie=UTF8&ll=38.89935,-77.036626&spn=0.008784,0.025814&z=16&iwloc=A”>The White House</a> and it would display in the description area (right image above) as a link. When clicked, it would open up a web slider with the Google Map, which could then be closed, and the user would be back in the description area.
</item>
</channel>
</rss>
Using GeoRSS in PointAbout apps
July 13, 2009
PointAbout utilizes GeoRSS to create location-aware RSS feeds. You can find more detail on the GeoRSS spec here.
The best way to set a GeoRSS feed up is to have the mobile app (i.e., the iPhone app) send its lat + long coordinates to a server, and have the server crunch the data as follows:
Step 1: Have the server find all the data points near the user. The way you do this is by incrementing the long & lat by 0.1 in each direction. For example, if the phone sends you its location as “Latitude = 38.8977, Longitude = -77.0366″, then you can take plus/minus 0.1 on each of the values the phone gave you to give you about a 10 mile radius. (use something like where lat between currlat+.1, currlat-.1 and lon between currlon+.1, currlong-.1).
Step 2: Now that you have a ~10 mile radius bounded box, you want to take all the data points that fall within those lat & long values, and order them based on where the phone is. You can calculate distance in a langauge, sql, script, or compiled serverside language:
var R = 6371; // km
var dLat = (lat2-lat1).toRad();
var dLon = (lon2-lon1).toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
Then you want to return an ordered list of RSS items to the phone based on the calculations above. Every time the “update” button is pressed by the user, the location is re-sent to the server for a new list of RSS items to be passed back to the phone.
Here are some other resources for calculating distance and “nearest” items:
- How to calculate the distance between two points on the Earth
- SQL Server Zipcode Latitude/Longitude proximity distance search
Here’s what the finished app looks like (uses our new mashup product):
Fixed HTML
July 13, 2009
We’ve found a way to fix the HTML so it doesn’t scroll (just like a native app) based on these two excellent blogs, which pioneered the concept:
- http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
- http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
You can download this zip file which has the javascript and CSS to do this, which is based on the links above.
Javascript 3x to 10x faster on iPhone OS 3.0
June 4, 2009
Apple’s pending release of the iPhone OS 3.0 seems to indicate some vastly improved javascript rendering speeds. Here is an article that purports to show speed increases of 3x to 10x with the new OS. This is great for PointAbout applications that use javascript extensively.
In-App Storyboarding Mockups
June 1, 2009
|
PointAbout has developed a way to perform in-app storyboarding mockups right from iPhone & Android phones. This high-ROI process only requires the use of a designer with Photoshop skills or similar to produce completely realistic iPhone and Android app mockups. It’s a stunning way to pitch clients on mobile applications, and then you can use our phone2projector device to demo the app on a projector, and/or put the app on a handful of iPod Touches to let your clients try the app out themselves.
|
Here’s what we need from you:
- Have a designer create a mockup of the application in Photoshop or any editing software. The mockup should have the following characteristics:
- For iPhone, the icon should be a 57 x 57 pixel square, flat PNG. No rounded edges or gloss; we add that when compiling the app. Here’s an example of what the icon should look like.
- For iPhone, the splash screen should be a 320 x 480 pixel flat PNG. Here’s an example of what the splash screen should look like.
- Create one or more PNG or JPG screen mockups of the app itself. The picture size should be 320 pixels wide by 460 pixels tall (the actual phone screen is 480 pixels tall, but the carrier bar takes up 20 pixels at the top).
You can also handle the rest of the process yourself for free if you have the time and HTML or Dreamweaver experience. Here are the steps:
- The next step is to host these images on a URL. If you have some HTML experience, this should be easy. The end result will be something like www.YourDomain.com/Image_1.jpg , www.YourDomain.com/Image_2.jpg , www.YourDomain.com/Image_3.jpg ,etc.
- Then, you want to use image mapping software, such as Dreamweaver, to create an image map of the images (to simulate clickable buttons, etc.). If you’re not sure what an image map is, click here.
- Lastly, you (or we) will use our tool www.AppMakr.com to create a native application out of these linked, image mapped images, which will result in an “in-app storyboard”.
Presto! Now you have a native app that sits on an iPhone or Android device. Once the app is opened by clicking on the icon, your mockup screenshots come up, just like the native app would. Visually, the mockup is completely indistinguishable from a functioning native application. And by making parts of the mockup clickable using image maps, you end up with what looks like a fully native application but with just very little design work, and no development work.
In your head tag, add the following code to lock your screen left to right:
Note: The < and > brackets have been removed from the code samples below. Add them back in before using code
meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /
And write your body tag as follows to remove any padding:
body style="padding:0; margin:0"
Note: All links (to images and web pages) must be absolute, and not relative.
