JavaScript is improved in latest iPhone….as expected
March 30, 2009
As expected companies such as Apple and Google will continue to improve the basic principles that have built our world wide web instead of re-inventing it. In addition to Googles who has been able to improve the ability to execute JavaScript and download web pages faster through their client ‘Chrome’, iPhone 3.0 is boasting an even greater improvement to thier web broswers ‘Safari’ with some benchmarking its speeds at 3-10x faster then its competitors.
More below:
JavaScript 3-10x Faster On iPhone OS 3.0
There has been a reasonable amount of speculation surrounding JavaScript speed improvements in iPhone 3.0. Testing carried out on the iPhone Simulator bundled with the SDK didn’t lead to a conclusive outcome, but benchmarking done by Wayne Pan would seem to suggest that iPhone 3.0 handles JavaScript 3x-10x faster than iPhone 2.1.
…..
PointAbout mentioned in today’s Washington Post
March 29, 2009
PointAbout was mentioned in today’s Washington Post article titled, “Teaching the Facebook Generation the Ways of Washington“.
Dev 101: Getting to know PointAbout
March 29, 2009
Overview: PointAbout’s job is…
PointAbout’s mission is 2 fold.
First, we make it very easy for anyone with HTML and Java Script experience to build and publish a mobile application. Without PointAbout a developer would need to learn Objective-C and own a Mac.
Second, we make the application you build “cross – platform” for the iPhone, iPod Touch & Android phone platforms (more soon).
Basic Architecture
PointAbout has 2 components–The “Springboard” and the “AppMakr”.
The “Springboard” exposes the native features of the phone (GPS, Camera and Accelerometers) via JavaScript. You can then utilize these APIs in your HTML files.
The “AppMakr” then takes the hosted URL that utilizes the PointAbout JavaScript APIs plus some splash-screen and icon artwork and builds a native application.
The PointAbout Process
- You build and host a URL that makes PointAbout Java Script calls to get Location/Camera/Accelerometers
- You send the URL and supporting media to PointAbout and we use AppMakr to build the native application
- We will send you a Zip file containing the application that you can load on your phones
- We will submit the Zip file to the App Store
PointAbout JavaScript API’s
Initialize PointAbout Springboard
- Device.init() – This function starts up the PointAbout springboard
Get the Location (longitude and latitude)
- Device.Location.init() – This function starts up the phones GPS
**See the example in the developer blog for more details
Using the Camera
- Device.Image.getFromPhotoLibrary()
- Device.Image.getFromSavedPhotosAlbum()-To specifically call the photoalbum feature on the phone from javascript
**See the example in the developer blog for more details
Using the Accelerometers
- accelX, accelY, accelZ
PopOut
- Device.openWebView(url)- To open a web view containing back, forward, refresh and close option
A Simple Example (using PointAbout to get location)–Step 1: HTML & JavaScript
**This example references Python , DJango, Google AppEngine and the Sunlight Foundation APIs –these are not required to use PointAbout.
<script type="application/x-javascript" src="http://www.pointabout.com/static/mobile_interface/1.4/js/basic_interface.js"></script>
<script>
initPA = function() {
Device.init();
Device.Location.callback = updateLocation;
Device.Location.init();
}
var currLat = "";
var currLon = ""
updateLocation = function(lat,lon) {
currLat = lat;
currLon = lon;
myATag = document.getElementById("curr_loc_link");
myATag.href= "/rep_sen_currentlocation" + "?lat=" +lat + "&amp;amp;amp;amp;lon=" + lon;
myATag.style.display = "block";
}
</script>
There are 5 basic steps:
- First, as you see on line 1, we add a pointer to the springboards Java Script APIs.
- Second, on line 5, we create an initialization function to open up a connection to the Springboard
- Third, on line 16, we create an atag href for a page to Pass the latitude and longitude
<body onload="initPA()"> <ul> <li><a class="arrow" href="/rep_sen_currentlocation" id="curr_loc_link" name="rep_sen_currentlocation">Legislators: Current Location <img src="/static/images/gps.gif”></a></li> </ul> </body>
- Fourth, in the body of the HTML file, seen above on line 1, we call the initialization function
- Fifth and last, on line 3 above, we pass the latitude and longitude via the URL: “/rep_sen_currentlocation?lat=38.0&long=-77” to Python (reference the myATag.href variable from the JavaScript above)
A Simple Example (using PointAbout to get location)–Step 2: Python
Most developers won’t need these next 2 steps because they will be using another language but I added them in case you are using Python to build the mobile website.
def main():
<p style="padding-left: 30px;">application = webapp.WSGIApplication([('/', MainPage),('/rep_sen_currentlocation', SunshineGetLegislatorCurrentlocation)], debug=True)
wsgiref.handlers.CGIHandler().run(application)
class SunshineGetLegislatorCurrentlocation(webapp.RequestHandler):
def get(self):
<p style="padding-left: 30px;">lat = self.request.get('lat')</p>
<p style="padding-left: 30px;">lon = self.request.get('lon')</p>
<p style="padding-left: 30px;">state_number=sunlight.districts.getDistrictFromLatLong(latitude=float(lat), longitude=float(lon))</p>
<p style="padding-left: 30px;">try: leginfo=sunlight.legislators.get(state=state_number.state, district=state_number.number)
except: leginfo=None
<p style="padding-left: 30px;">template_values = {
'leg': leginfo,
'state_number': state_number,
}
<p style="padding-left: 30px;">path = os.path.join(os.path.dirname(__file__),'rep_sen_currentlocation.html')
self.response.out.write(template.render(path, template_values))
<p style="padding-left: 30px;">
Here on line 4, you can see in the main request handler for Google AppEngine the Class associated with the “/rep_sen_currentlocation” page
On line 8, you see in the class function SunShineGetLegislatorCurentlocation we get the latitude (lat) & longitude (lon) variables that were passed
On line 13, we convert the variables to floats so they can be used via the API that needs them such as the Sunlight API in this example.
On line 25, we take the data that the API has returned for the location associated with the Lon/Lon and display it on the HTML page Associated with the class (rep_sen_currentlocation.html) by Passing it in an array called “template_values”
A Simple Example (using PointAbout to get location)–Step 3: HTML Display Data
{% if leg %}
<ul class="profile">
<img src="/static/images/100x125/{{leg.bioguide_id}}.jpg" class="ico" style="max-height: 200px"/>
</ul>
<ul class="field">
<li><font color="blue">{{leg.title}}. {{leg.firstname}} {{leg.lastname}} ({{leg.party}})</font></a></li>
<li class="arrow">District: <a href="/putonmap?district={{leg.district}}&amp;amp;amp;amp;state={{leg.state}}">
{{leg.district}}<img src="/static/images/map.jpg" class="ico" /></a></li>
<li>State: {{leg.state}}</a></li>
<li class="arrow">Phone: {{leg.phone}}</a></li>
<li>Fax: {{leg.fax}}</a></li>
<li>Congress Office: {{leg.congress_office}}</a></li>
{% if leg.email %}<li class="arrow">Email: {{leg.email}}</a></li>{% endif %}
{% if leg.twitter_id %}<li class="arrow">Twitter ID:<a href="http://m.twitter.com/{{leg.twitter_id}}"><small>Link</small></a></li>{% endif %}
{% if leg.webform %}<li class="arrow">Web Form: <a href="{{leg.webform}}"><small>Link</small></a></li>{% endif %}
… removed for brevity…
{% if leg.fec_id %}<li >Fec ID: {{leg.fec_id}}</a></li>{% endif %}
</ul>
{% endif %}
We now use Django to numerate each variable in the “leg” array passed from Python to display the data.
Using PointAbout’s Camera Functionality
Using the camera functionality is very simple using PointAbout’s Springboard. Using a few lines of javascript you can initiate the camera functionality.
initPA = function() {
Device.init();
Device.Image.uploadUrl = "http://www.example.com/upload_photo?";
Device.Image.callback = imageDoneUploading;
}
imageDoneUploading = function(response) {
document.getElementById("message_box").innerHTML = "Photo has been attached!";
}
Let’s review the code:
line 02: Here we init the device and tells the Springboard to set device variables
line 03: Define an upload URL which will accept the POST of the image selected by the user
line 04: Tell PointAbout’s Springboard to send the callback message to the supplied function
line 07: define the callback function which we assigned to the<code> Device.Image.callback</code> earlier.
line 08: once we get the callback tell the user the image has been uploaded.
Now thats almost all of it, except now we need to tell the Image controller class to allow the user to take a picture.
Device.Image.getFromPhotoLibrary();
That should bring up the Image picker from the photo library. Thats it!
<body onload="initPA()">
lastly we need to call our initialization function “initPA()” with the body’s onload.
iPod Touch
- If a user tries to access the camera while on the iPod Touch the photo album will be initiated instead.
Using PointAbout’s Accelerometer Functionality
The Accelerometer functionality is the easiest to aquire–it’s basically there via the variables accelX, accelY and accelZ once the Device.init(); has been called. Here is a simple example of how it’s used:
function updateAccel() {
$('#x').val( accelX );
$('#y').val( accelY );
$('#z').val( accelZ );
var t=setTimeout(updateAccel,50);
}
Mobile UI Basics – Stylesheets
CSS
<head> <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ /> <meta id=”viewport” name=”viewport” content=”width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <link rel=”stylesheet” href=”/static/stylesheets/iphone.css” /> </head>
Viewport
From: http://www.iphonecompatible.net/design-tips-tools/define-a-viewport/
Most websites and web pages will be compatible and work fine on iphone and Blackberry. However, it’s still possible to make the web sites more supportive, ready and friendly to Apple iPhone by giving more information to iPhone about how the webpage should be displayed on the iPhone browser. Beside, for web sites that try to emulate the functionality of the built-in iPhone applications such as webapps that use Canvas, AJAX functionality and limit the size of the page to 320×480px (or 480×320px), it’s best to ensure iPhone and Blackberry compatibility to ensure that the page is rendered and formatted correctly and avoid problem such as web page or application not scaling properly when rotate and Safari browser zooming out.
One of the best way with just one line change on website coding to make website and web app support iPhone and Blackberry is by telling the PDA phone of the viewport size of the overall page. To do so, simply add the following line to the HTML HEAD section of the web page:
<meta name=”viewport” content=”width=320″>
viewport is visual formatting model for visual media in CSS 2.1 specification, where it is a window or other viewing area on the screen through which users consult a document (mean part of the screen that you’re actually seeing). User agents may change the document’s layout when the viewport is resized. Other parameters applicable for viewport include initial-scale, user-scalable, minimum-scale and, maximum-scale where you can try to make your website fit into iPhone and BlackBerry view area. The example of usage:
<meta name=”viewport” content=”initial-scale=1.0″> <meta name=”viewport” content=”user-scalable=false” >
You can mix the setting u want to use into a single META HTML code such as:
<meta name=”viewport” content=”width=320,user-scalable=false”>
Mobile UI Basics – HTML Canvas versus Flash
From our developer blog:
The relatively new HTML <canvas> tag in HTML5 is a great way to create scriptable graphics and animation in lieu of Flash on the iPhone. It is currently being supported in the newest versions of Opera, Safari, Firefox and of course iPhone’s version of Safari. Apple originally created the <canvas> tag to create Dashboard widgets for Mac OS X but it worked so well it found it’s way into the HTML5 specifications.
The canvas tag allows a developer to do ray-casting using Javascript, animations and more complex image transformations such as rotations, translation and scaling than is originally allowed by javascript and HTML. Since all this is part of iPhone’s Safari browsers its included in PointAbout’s springboard.
You can find examples of <canvas> here:
http://www.benjoffe.com/code/games/torus/
http://iterationsix.com/particle_fountain/particle_fountain.html
The tutorial from mozilla.org will help you get started:
https://developer.mozilla.org/En/Canvas_tutorial
Here is an excellent example from Opera’s site that goes through a detailed example:
http://dev.opera.com/articles/view/blob-sallad-canvas-tag-and-javascrip/
What you need to provide PointAbout to submit your application to an AppStore
See http://www.pointabout.com/134/creating-media-assets-for-iphone/
PointAbout Presents at the Dow Jones Wireless Innovation Conference
March 27, 2009
PointAbout was a featured presenter at the Dow Jones Wireless Innovation Conference held in Redwood City, CA. on March 17-18, 2009.
PointAbout Mobilizes AFP Content with Futbol Ya
March 26, 2009
PointAbout has teamed up with Agence France-Presse (AFP) to create an iPhone application based on its soccer news feed, called Futbol Ya.
The application features a photo-rich environment of soccer news worldwide, provided by AFP. The application uses the PointAbout framework which allows it to run as a native iPhone application while its content stays constantly updated.
“This is an opportunity for us to show the power of PointAbout’s approach to native application building,” said Daniel R. Odio, a co-founder of PointAbout, Inc. The application utilizes PointAbout’s thin-client springboard for rapid development across multiple phone platforms.
More pictures of the application are available below.
PointAbout Mobilizes Miami Dade College
March 26, 2009
PointAbout has created a mobile reporting system (link opens iTunes) for Miami Dade College, which allows students to report maintenance and safety issues right from their phones.
Python Exception Logging
March 23, 2009
This took me a little while to figure out so I thought I’d post it incase somebody else has the same issue. Python has try/except blocks which allow you to catch and handle exceptions. This is great however, what happens when you’re unsure the exception that is going to be throw? And once its thrown and you have an idea as to what it is, how do you get more details? Here is the code to get it done:
try:
.
... your exception here
.
.
except Exception, ex:
logger.error("error:" + str(ex) )
Thats it. The object ‘ex’ is of the super-type “Exception” but has a built-in type of something more concrete. Python’s has a built-in Exception types documentation on their website here: http://www.wingware.com/psupport/python-manual/2.4/lib/module-exceptions.html
Pick up where iPhone and flash left off
March 22, 2009
Great methods used in webkit (available in iPhone safari browser) that allows users to achieve flash like animations. See more and some code in action @
http://www.maclife.com/article/news/css_animation_kick_flashes_butt_iphone
http://webkit.org/blog/324/css-animation-2/
Specifying animations is easy. You first describe the animation effect using the @-webkit-keyframes rule.
@-webkit-keyframes bounce {
from {
left: 0px;
}
to {
left: 200px;
}
}
A @-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation. The animation engine will smoothly interpolate style between the keyframes. In the above example we define an animation called “bounce” to have two keyframes: one for the start of the animation (the “from” block) and one for the end (the “to” block).
Once we have defined an animation, we apply it using -webkit-animation-name and related properties.
div {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
}
The above rule attaches the “bounce” animation, sets the duration to 4 seconds, makes it execute a total of 10 times, and has every other iteration play in reverse.
Now, suppose you want to party like it is 1995 and make your own super-blink style. In this case we specify an animation with multiple keyframes, each with different values for opacity, background color and transform.
@-webkit-keyframes pulse {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
.pulsedbox {
-webkit-animation-name: pulse;
-webkit-animation-duration: 4s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
PointAbout Creates MugShotz: Frame Someone
March 20, 2009
MugShotz, the hilarious new entertainment app by PointAbout, is now available for sale on the iTunes App store for $.99. You can find a dedicated website here at www.MugShotzMobile.com (app is also available for purchase on that page). This application is avaible for sponsoring, re-skinning & private labeling. Contact us at right for details.
Here is a feed of pictures taken using MugShotz:
Here are some screen captures:
iPhone SDK 3.0 coming soon!
March 17, 2009
Looks like iPhone is coming out with some great features allowing users do things as simple as copy and paste, all the way to device integration. What’s even cooler is that apple has made it easy for applications to help with payments through an iPhone, so look out for Apple finally accomplishing what pay-pal set out to do in their early days.
These features and more help ensure that all other mobile devices coming out thinking they are catching up to Apples iPhone will be thrust back into the “out-dated” group yet again.
more @ http://developer.apple.com/iPhone/program/sdk.html
