Activate your free membership today | Log-in

Wednesday, December 17th, 2008

OilCan: Grease up your Android browser

Category: Java, JavaScript, Mobile

Jeffrey Sharkey has created OilCan a thin wrapper on top of the WebKit shipping on Android that allows you to install userscripts that allow you to access to Android "Intents".

Intents are very nice abstractions that allow you to access large components and reuse them in different ways. Romain Guy has a nice post on them.

OilCan lets you customize any website by inserting JavaScript to change the website and help it reach into the Android world using intents.

OilCan inserts some powerful buttons into normal websites, and that power comes from Android intents. We didn't write a barcode scanner or the radar app into OilCan, but using intents we can launch those apps with parameters. We can request the Barcode Scanner app to scan something and return the code to us, or launch the Radar app with a specific lat/lon.

Userscripts can do other cool stuff, like hide the navigation columns in Wikipedia to make it easier to view on small screens. This is a proof-of-concept for now, and will probably turn into a binary plugin for the default Browser in the future.

A nice piece from an example shows the intent call out:

JAVASCRIPT:
  1.  
  2. function generate(item) { 
  3.     var helper = document.createElement('input')
  4.     helper.type = 'button'
  5.     helper.value = 'Scan barcode...'
  6.     helper.addEventListener('click', function(event) { 
  7.         // use the intentHelper bridge to fire an intent to Barcode Scanner 
  8.         // it's available in Market, or from http://code.google.com/p/zxing/ 
  9.         var result = window.intentHelper.startActivityForResult(JSON.stringify({ 
  10.             action:'com.google.zxing.client.android.SCAN'
  11.             category:['CATEGORY_DEFAULT'] 
  12.         }))
  13.  
  14.         // parse the result we get back, and read the barcode from the extras 
  15.         result = JSON.parse(result)
  16.         item.value = result['extras']['SCAN_RESULT']
  17.     }, false)
  18.     return helper; 
  19. } 
  20.  

Very cool!

Posted by Dion Almaer at 6:13 am
2 Comments

++++-
4 rating from 5 votes

Monday, December 1st, 2008

Kojax? Huh?

Category: .NET, Microsoft, Mobile

Mary Jo Foley has an article called Move over, Ajax. Here comes Microsoft’s ‘Kojax’. The thing is, I don't get what it actually is:

Kojax is a mobile development platform, according to my sources, that will allow Microsoft- — and third-party-developed — applets run in an Ajax-like way, using a combination of Visual Studio tools and JavaScript, on Java-based mobile phones.

Erm, is this just JavaScript running on the JVM? This is the big deal instead of the PDC touted "write using .NET and deploy everywhere"?

Mary goes on:

What kinds of mobile applets are we talking about here? Nothing iPhone-like, such as restaurant reviews or “I am Rich.” More like a virtual wallet for online payments, a group messaging service and photo-sharing app — things that build on top of Windows Live for Mobile services. Some of these Kojax-based applets will ad-funded; others will likely be transaction- and subscription-based.

Another interesting part of the Kojax tips I’ve received: Microsoft allegedly is aiming its Kojax applet plans primarily at users in emerging markets.

The Kojax work may or may not be related to a recent Unlimited Potential initiative about which I recently heard, known as “Mobile First.” Mobile First is all about users whose first Microsoft-related experience tends to be in the mobile-phone, rather than the PC, realm. (Given Microsoft’s recent acknowledgment that China Mobile will offer the first handsets running Internet Explorer 6, it’s not far-fetched to see how/why Microsoft is putting so much emphasis on emerging-market customers.)

I haven’t been able to glean much more about Kojax and Microsoft’s mobile applet plans. So before you ask, I don’t know what stage Kojax is at: It could be anything from a glimmer in a Microsoft development team’s eye, or something in private beta.

Posted by Dion Almaer at 4:00 am
4 Comments

+----
1.8 rating from 37 votes

Friday, November 21st, 2008

iPhone for JavaScript Developers

Category: Mobile, iPhone

John has done a really good job at wrapping up information on the various options for JavaScript developers on the iPhone platform.

He discusses the various approaches:

  • JiggyApp: JiggyApp provides a full API for developing an application - apparently separate from most of the typical APIs. Arguably, though, the code ends up being relatively usable (jailbroken only :(
  • JSCocoa: JSCocoa is a full bridge that maps Cocoa development into JavaScript (instead of the typical Objective-C/Cocoa mapping). The result ends up working in both OS X and on the iPhone.
  • PhoneGap: PhoneGap is an application that exposes a few JavaScript APIs to pages running MobileSafari. Right now this includes Geolocation and access to the Accelerometer.
  • WebTouch: The other day "Dr Nic" wrote up an article on how he had used a WebKit instance (along with HTML, CSS, and JavaScript) to render a portion of his iPhone application.

I was chatting with someone on the PhoneGap team about their Android support. There is a play to be had to enable rich mobile applications all based on the Open Web stack that we know and love :)

Posted by Dion Almaer at 6:23 am
14 Comments

++++-
4.1 rating from 7 votes

Friday, November 14th, 2008

Using UIWebView (WebKit) in your iPhone App

Category: Mobile, iPhone

Dr Nic has shared his experiences using WebKit to implement part of your iPhone app (in his case SurfView):

Negatives

  • - (void)webViewDidFinishLoad:(UIWebView *)webView is slow. "You’re running an interpreter (JavaScript runtime) on top of a device with a small CPU and small memory. Go figure."
  • The JavaScript bridge does not appear to block the main thread. This is a good/bad thing. You can invoke JavaScript code within the WebKit via your native Objective-C code.
  • The JavaScript bridge is one directional. From Objective-C/UIKit you can invoke JavaScript upon the WebKit and henceforth do wonderful things
  • Multiple languages in one project. Whilst we mainly just wanted to take a static HTML file, and dynamically update various elements with application data (e.g. the surf and weather conditions in the example above), we needed to do that via JavaScript.

Why you may want to do it

WebKit for rapid prototyping: WebKit exists and it is awesome at rendering HTML and CSS, with access to the powerful CSS3 transformations and webkit-specific bonus features.

It is highly likely that your designer can make something beautiful looking in Photoshop and cut it up into HTML + CSS. Comparatively, its highly unlikely they can cut it up into native Objective-C code.

WebKit isn’t the holy grail for non-Objective-C developers, but if your grand-poobar level skills are in JavaScript and HTML, and your Objective-C/iPhone skills are still catching up, then its a wonderful prototyping platform. Especially for static, complicated displays of data. Especially if that data includes HTML content from an external feed which needs to be rendered.

For Oakley’s Surf Report app, Anthony is toying with replacing some of the WebKit usage with native UI elements (normal UITableView with custom UITableViewCells) so that we can get back those precious seconds and give them to the user as a Christmas present.

A very nice read.

Posted by Dion Almaer at 8:21 am
3 Comments

++++-
4.6 rating from 7 votes

Monday, October 20th, 2008

Fennec (Mobile Firefox) Alpha 1 Released

Category: Browsers, Mobile

Mark Finkle has announced the first alpha release of Mozilla's mobile web browser, Fennec. While there was some discussion in recent days of progress on a Windows Mobile version, this release runs on the Nokia N800 and N810 only.

However, Mozilla has also provided an emulator for folks to run Fennec on their desktop machine and are soliciting feedback from the community especially on the browser UI but also on other aspects of the browser as well.

Fennec (Mobile Firefox) has reached milestone 9, which is also our first alpha! We’re calling this release the User Experience alpha.

As with the previous milestones, M9 is targeted at the Nokia N800/N810 (Maemo) Internet tablet. Yes, we have made great progress on Windows Mobile, but no milestone releases yet. However, in addition to the native Maemo release, we are also releasing desktop versions of Fennec. That’s right, you can install Fennec on your Windows, OS X or Linux desktop too! We want you to be able to experiment, provide feedback, write add-ons and generally get involved with the Mozilla Mobile project, even if you don’t have a device.

There's also a video walkthrough:

Posted by Ben Galbraith at 9:46 am
8 Comments

++++-
4.2 rating from 18 votes

Friday, October 3rd, 2008

iPhone Web Apps running at full screen

Category: Mobile, iPhone

I am so happy that the NDA mess is over! Clancy has written about how you can have your iPhone Web app run in full screen and has a demo app that shows it off:

HTML:
  1.  
  2. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  3. <meta name="apple-mobile-web-app-capable" content="yes" />
  4. <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  5.  

Posted by Dion Almaer at 4:03 pm
11 Comments

+++--
3.1 rating from 21 votes

Monday, September 29th, 2008

iPhone Safari 3D Navigation Menu

Category: Mobile, iPhone

Ben Putman has put together a nice iPhone Safari 3D navigation menu example that shows off the transforms and events available on the latest mobile Safari.

Ben told us:

In thinking of an interesting test, I've created a menu that you can rotate across a fixed y-axis with touch, allowing you to spin the menu around and see the depth and back of elements. There are also some examples of how animations can be used as you click and the menu unfolds. I also added a lightbox to examine how one might view some photos although it's not really practical in this form.

Open up the demo in your iPhone / Touch and also take a peak at the source to see what is going on, with snippets like this:

CSS:
  1.  
  2. .second_show {
  3.   -webkit-animation-name: 'second_show';
  4.   -webkit-animation-duration: 1s;
  5. }
  6.  
  7. @-webkit-keyframes 'second_show' {
  8.   from {    -webkit-transform: translateZ(0px) rotateX(180deg);}
  9.   to {    -webkit-transform: translateZ(100px) rotateX(0deg);}
  10.  
  11. }
  12. .second_hide {  -webkit-animation-name: 'second_hide';  -webkit-animation-duration: 1s; }
  13. @-webkit-keyframes 'second_hide' {
  14.   from {    -webkit-transform: translateZ(100px) rotateX(0deg);}
  15.   to {    -webkit-transform: translateZ(0px) rotateX(180deg);}
  16. }
  17.  

Posted by Dion Almaer at 6:42 am
1 Comment

++---
2 rating from 62 votes

Thursday, September 18th, 2008

SVG working on the iPhone

Category: Mobile, SVG, iPhone

Dylan Schiemann wrote about how disappointing it was that the iPhone didn't support SVG:

Safari on the iPhone does not currently have support for SVG. Safari 3 beta on Mac and Windows is currently the best browser on the planet for SVG performance, so this is a somewhat disappointing omission. We are hopeful that by the end of the year, the iPhone will receive the Safari 3 upgrade, and along with that native support for SVG. For now, we’ll have to wait on dynamic charting and drawing tools due to no SVG and the lack of mousemove event handlers.

It appears that if you point your iPhone 2.1 browser to SVG content and tests it now works!

Posted by Dion Almaer at 6:41 am
9 Comments

+++--
3.3 rating from 6 votes

Wednesday, September 17th, 2008

iPhone Web App: Spin the Bottle

Category: Mobile, iPhone

Tomi Mickelsson has created a fun iPhone Web App called Spin the Bottle. You know, a Web app, not one that has to get into the Apple store.

You can check it out on the iPhone/Touch/emulator and you will see how Tomi uses the iPhone specific APIs, such as:

JAVASCRIPT:
  1.  
  2. function startTouch() {
  3.     setTimeout(hideURLbar, 100);
  4.  
  5.     document.body.ontouchstart = function(e) {
  6.         oldangle1 = 0; oldangle2 = 0; oldangle3 = 0;
  7.         //spinout();
  8.         cancelspin();
  9.     }
  10.  
  11.     document.body.ontouchmove = function(e) {
  12.         // prevent window scrolling!
  13.         e.preventDefault();
  14.  
  15.         if (timer_rot != 0)
  16.             return;
  17.  
  18.         var touch = e.touches[0]; // finger 1
  19.         var dx = centerx - touch.pageX;
  20.         var dy = centery - touch.pageY;
  21.         var angle = Math.atan2(dy, dx);
  22.  
  23.         oldangle3 = angle;
  24.         oldangle1 = oldangle2;
  25.         oldangle2 = oldangle3;
  26.  
  27.         var val = "rotateZ(" + angle + "rad)";
  28.         bottle.style.webkitTransform = val;
  29.         shadow.style.webkitTransform = val;
  30.         rot = angle;
  31.         //cancelspin();
  32.     }
  33.     document.body.ontouchend = function(e){
  34.         if (timer_rot == 0) {
  35.             var val = ((oldangle2 - oldangle1) + (oldangle3 - oldangle2)) / 2;
  36.             val /= 3;
  37.             if (val == 0.0)
  38.                 val = rand(0.3)+0.2;
  39.             else if (Math.abs(val) <0.3)
  40.                 val *= 3;
  41.  
  42.             //cancelspin();
  43.             startanim(val);
  44.         }
  45.     }
  46. }
  47. // remove our touch handlers
  48. function stopTouch() {
  49.     document.body.ontouchstart = null;
  50.     document.body.ontouchmove = null;
  51.     document.body.ontouchend = null;
  52. }
  53.  

Posted by Dion Almaer at 8:24 am
3 Comments

++---
2.6 rating from 14 votes

Monday, September 8th, 2008

3D CSS Transforms on the iPhone

Category: Mobile, iPhone

iPhone apps get a lot of attention and press and understandably so. For a lot of iPhone app developers, these tiny apps can turn into a tremendous cash cow making development for the phone platform invaluable. But considering that the iPhone is running Safari on it, it's surprising that we haven't seen a whole lot more buzz surrounding the use of the new Webkit functionality available to the browser.

Paul Bakaus, lead developer for the jQuery UI team, has started exploring the possibilities of what Safari can offer to web application developers:

So I wasn’t content with the things I’ve tried doing in Safari, and recently began digging through the documentation of the iPhone SDK and the actual CSS Transforms spec.

I was a bit skeptical when I first read about all the cool functions that work in Webkit iPhone, but nowhere else, because there was little documentation, and literally nothing done by other developers, no demos, no tests. I thought, surely, some students with too much free time must have jumped on that immediately?

Seems like Paul was on the right track as finding information on taking advantage of there features for the iPhone was scarce. So by using a iPhone simulator, Paul was able to start hacking at some of the built-in Webkit features, especially the 2D CSS Transforms.

Here comes the cool stuff: The perspective function seems to define how the other primitive functions behave.

Let’s have a look at a practical example: Take a look at the following three functions:

* rotateX - Rotates the element on the X axis.
* rotateY - Rotates the element on the Y axis.
* rotateZ - Rotates the element on the Z axis (By default, same as “rotate”)

Try these out - all three will give you flat, 2d animations, although they are, in fact, functions that use a 3D matrix. However, now change the -webkit-perspective property to 200, and try again. Now, you established virtual depth, and all three functions will give you incredible results.

The end result of Paul's tinkering is a very cool flip effect that is handled within the iPhone's browser and similar to that found in typical iPhone applications. While only a small demo, this opens up possibilities in how browser-based applications can react within the iPhone and what can be presented to mobile web users.

To see the demo, you will need an iPhone or an iPhone simulator.

Posted by Rey Bango at 8:54 am
3 Comments

+++--
3.9 rating from 12 votes

Tuesday, August 12th, 2008

Squirreling out the Fish on the iPhone

Category: JavaScript, Mobile, Performance, iPhone

HTML:
  1.  
  2. <script type="text/javascript">
  3. function recurse(n) {
  4.     if (n> 0) {
  5.         return recurse(n - 1);
  6.     }
  7.     return 0;
  8. }
  9.  
  10. try {
  11.     // recurse(43687);  // Highest that works for me in WebKit
  12.                         // nightly builds as of 24 Jul 2008.
  13.     // recurse(2999);   // Highest that works for me in Firefox 3.0.1
  14.     // recurse(499);    // Highest that works for me in Safari 3.1.2
  15.     recurse(3000);
  16.     document.write("Could be SquirrelFish.");
  17. } catch(e) {
  18.     document.write("Not SquirrelFish.");
  19. }
  20. </script>
  21.  

This is the hack that John Grubber used to test whether iPhone 2.x had snuck in SquirrelFish. He was curious due to the performance improvements that he witnessed:

What about iPhone limits though? David Golightly tests the limits on the iPhone with a script that keeps downloading tiles until it can no longer do so:

After downloading about 210 images, the iPhone simply stops downloading new ones. This is probably due to hitting the hard 30MB same-page resource limit.

Posted by Dion Almaer at 6:11 am
1 Comment

++++-
4.4 rating from 18 votes

Wednesday, August 6th, 2008

iPhone Safari Flick Navigation By Example

Category: Mobile, iPhone

Matthew Congrove took some time to play with the iPhone SDK, but it wasn't his bag, so he decided to go back to building a Web application for the iPhone, and was pleasantly surprised with the updates to Safari that enabled new things:

In the midst of all my research for help I stumbled across something that I, like most, had completely forgotten about; the iPhone update wasn't just for native third-party applications, but it also upgraded the existing applications. Yes, that includes Safari. The upgrade for the iPhone's on-board browser added in support for CSS animations and transitions, a JavaScript accessible database, a few new DOM selectors and more. For me this meant that the myDailyPhoto web application could look and feel more like it was a native Cocoa Touch enabled experience. As soon as the idea crossed my mind I sat down to churn out this little test app.

To get the flick effect Matthew wrote the following CSS:

CSS: