Activate your free membership today | Log-in

Tuesday, July 15th, 2008

RJK - Seven Reasons Why the New iPhone Sucks

Category: iPhone

Look before you leap before buying the new iPhone. This is the iPhone that all of us have been waiting for. It promised to address the deficiencies of the first generation iPhone, but does it really?

Here are some reasons why not:

1. Too expensive to own.
Apple and AT&T may have shaved a couple of hundred dollars off the price but they will more than make up for it in monthly fees. If you take into account the regular monthly fee, the data fee, the text message fee, which used to be free, and the $99 annual mobileme fee you could end up spending over $1,000 a year to own an iPhone, that’s 200 gallons of $5 gas.

2. Can’t use the GPS like a GPS.
Forget about getting turn-by-turn voice directions in your car from the new iPhone 3G. The iPhone SDK makes it pretty clear it’s not allowed, “Applications may not be designed or marketed for real time guidance.” Yes it will superimpose your position on a Google map, or show you the closest pizzeria but what about getting real-time route guidance? If you read reviews for other GPS devices you never come across a GPS that doesn’t provide some form of guidance. There’s a rumor that TomTom may be developing a guidance application but you have to wonder how they’ll get it past the Apple police.

3. Can’t tether the iPhone to your laptop.
Want to save sixty dollars per month for a 3G card for your laptop and use the iPhone instead? Not going to happen—not allowed. Although there are plenty of phones, including AT&T’s Tilt, that will allow you to use your 3G phone as a high speed modem for your laptop, the iPhone won’t be one of them so you can add the cost of a 3G card for your laptop at $720 a year to your total cost of ownership.

4. Still no cut and paste.
Cut and paste has been around on Apple computers since the earliest Mac Plus computers. What’s the big problem with implementing it on iPhones? Why is cut and paste so important? Suppose you’re browsing a web site and want to capture some text or a URL, or someone sent you an email and you want to grab some text from it and send to someone else. Not possible on an iPhone. Speaking of email, where’s the spell checker? Predictive typing is fine but spell checkers are everywhere else but here.

5. Wimpy 2 MP camera.
In the world of 5 MP Smartphones and 10 MP point and shoot cameras that you can buy for under $200, why is the iPhone still stuck with a measly 2 MP? That’s so 2003. While we’re at it how come we can’t record video, afraid the non-existent SD card might fill up? The iPhone should be able to stream video by now just like many other cell phones can already do right now.

6. No stereo Bluetooth.
We thought the iPhone was supposed to be part iPod. At least they fixed the recessed headphone jack flaw (and called it a new feature) but the A2DP stereo Bluetooth standard has been around for a while and is missing from the iPhone.

7. The list goes on.
Still no Flash player for rich media content (what grudge does Steve Jobs hold against Adobe). Still can’t send pictures in MMS messages, still no native voice dialing, no mobile TV, no replaceable battery, no flash memory card, and on and on.

Okay, now that I got that off my chest, I feel better and what the heck, so it’s not perfect but it’s still the coolest smartphone out there (other smartphones) and I still want one. I look forward to seeing you on the line.

Posted by dkennedy at 3:24 pm
1 Comment

OOOOO
Rate the above post

Friday, July 11th, 2008

iPhone Web Goodies: Drag and Drop with Touch, Resize and Rotate with Gestures

Category: JavaScript, Showcase, iPhone

The video above shows a simple showcase application that Neil Roberts of SitePen created and wrote about.

He testing out the new APIs such as the touch API where he worked with drag and drop:

JAVASCRIPT:
  1.  
  2. node.ontouchmove = function(e){
  3.   if(e.touches.length == 1){ // Only deal with one finger
  4.     var touch = e.touches[0]; // Get the information for finger #1
  5.     var node = touch.target; // Find the node the drag started from
  6.     node.style.position = "absolute";
  7.     node.style.left = touch.pageX + "px";
  8.     node.style.top = touch.pageY + "px";
  9.   }
  10. }
  11.  

And resizing and rotation with the Gestures API:

JAVASCRIPT:
  1.  
  2. var width = 100, height = 200, rotation = ;
  3.  
  4. node.ongesturechange = function(e){
  5.   var node = e.target;
  6.   // scale and rotation are relative values,
  7.   // so we wait to change our variables until the gesture ends
  8.   node.style.width = (width * e.scale) + "px";
  9.   node.style.height = (height * e.scale) + "px";
  10.   node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
  11. }
  12.  
  13. node.ongestureend = function(e){
  14.   // Update the values for the next time a gesture happens
  15.   width *= e.scale;
  16.   height *= e.scale;
  17.   rotation = (rotation + e.rotation) % 360;
  18. }
  19.  

Some readers might have noticed that a gesture is just a prettier way of looking at touch events. It’s completely true, and if you don’t handle things properly, you can end up with some odd behavior. Remember to keep track of what’s currently happening in a page, as you’ll probably want to let one of these two operations “win” when they come in conflict.

Posted by Dion Almaer at 10:16 am
Comment here

OOOOO
Rate the above post

Remember the Web Apps; Don’t forget the first iPhone baby today

Category: JavaScript, iPhone

We see the birth of the second baby when it comes to building and running apps on the iPhone. People have already spent almost $100k in the first few hours of the AppStore not being open, so tomorrow is likely to be a great day for Apple, and developers, as people run around clicking on buy without thinking of the price.

I spent some time running the applications, and thinking about how different they are to Web versions. For example, when I launch Twitterific vs. a web based Twitter it actually was faster for the Web page to load Safari up with everything. Twitterific also had a strange feature for loading images. As I moved up and down the list the images looked like they were being pushed out of cache which made for a weird experience.

What if the iPhone offered the ability to aggressively cache "applications". When you open the application it opens its own instance of Safari instead of just linking over to Safari. What if it had access to local storage APIs in WebKit?

The native applications do have benefits. They have access to the camera, addressbook, ... well wait, those could be JavaScript APIs too.

There is the tool chain. You can have fine grained performance knowledge of your application with the Objective-C tools, but with SquirrelFish Apple is getting better and better there too. Other nice tooling could work well when constraining the Web interfaces to the iPhone form factor.

What about games? You couldn't do super monkey ball, or could you if you had a really solid Flash, or feature complete canvas.

The native apps are great, but I am still betting on the Web as a great platform for mobile applications too.

Posted by Dion Almaer at 10:01 am
1 Comment

+++--
3.5 rating from 4 votes

Monday, April 21st, 2008

iPhone Remote Debugger

Category: Mobile, Utility, iPhone

Jon Brisbin is a Java programmer doing iPhone development, and decided to scratch his own itch for a better iPhone remote debugger, creating iPhoneDebug:

The iPhone Debug Consle is meant to give greater visibility and interactivity on your iPhone/iPod Touch while doing development. I grew frustrated having to go through the "include console.log statement then reload" method of debugging. I wanted something similar to Firebug's fantastic console and debugger.

I grew frustrated with trying to debug my iPhone/iPod Touch apps because I had no interactivity with the page. I couldn't interrogate variable values or CSS values unless I put in a console.log statement and reloaded the page. This is far from ideal.

In trying to find something that would fit my needs, I came across Joe Hewitt's iPhone/Firebug integration, but I wanted something more robust and that worked without firebug and requiring "console.log" in the desktop browser.

I'm a Java programmer, so naturally I thought of using COMET and Jetty to pass messages between a desktop browser and the iPhone. A couple days later, I had a workable solution. It lets you log things in your mobile JavaScript to a desktop console, but the biggest plus for my situation is that I can send JavaScript to the iPhone to be executed there, with the results logged back to my desktop console. Just like in Firebug, I can call methods, retrieve CSS values, and all manner of debugging activities I've grown used to doing while building apps with Firebug. There is also rudimentary UP and DOWN arrow command retrieval on the prompt.

Here it is in action, getting commands from the console:

iPhone Debug

Posted by Dion Almaer at 9:26 am
2 Comments

++++-
4.1 rating from 13 votes

Monday, April 7th, 2008

iPhone WebKit Goodness: 3D CSS Transforms and ontouch events

Category: JavaScript, Library, Mobile, iPhone

Scripters and Coders 2008

Apple is secretive. I normally don't mind so much, as they always come through on yet another cool Mac product. If I could know one thing though, it wouldn't be when the next Macbook Pro is coming out, or when we will see the 3G iPhone. Instead, I wish I knew the attentions in the battle of "what can we develop with on the iPhone".

We started out with only being able to use JavaScript, and folks like Joe Hewitt quickly mastered the restrictive tools such as meta viewport and co.

Then we got the final word of the iPhone SDK, and the Cocoa developers rejoiced as they went from being the cool kids to the "now you will pay me to help in the land grab yO".

There was one shoutout to the WebKit lovers. We got ongesture* events.

Now we got a glimpse of new updates for the iPhone Ajaxians:

Safari 3.1 showed us CSS transforms, which are 2D. On the iPhone though, we can now do 3D transforms which means you can do true coverflow through the browser.

The other new thing I found are new touch screen events. We already knew about the ongesture* events, but now there are ontouch* events, and new DOM interfaces Touch, TouchList, and TouchEvent.

This is great progress.

The optimist in me thinks: Wow, WebKit is going to be a first class citizen and Apple will continue to open up more and more of the innards as JavaScript APIs.

The cynic in me thinks: Yeah, they will support it, kinda like how Java is supported on the Mac. One poor bugger has to do all of the work and make people care. In this case, when Apple starts making 30% on all of the native applications, what will their incentive be to help people develop apps using the Web?

The hope is that they realize that the Web is the long term winner, and that they want to win in that market too. Please, Mr. Jobs.

Posted by Dion Almaer at 12:01 am
7 Comments

++++-
4.5 rating from 13 votes

Tuesday, March 25th, 2008

iPhone Optimization Script

Category: JavaScript, Usability, iPhone

iPhone Optimization Script

Bob Buffone has created a tool that can be used to output script and HTML to make your site more usable on an iPhone. He tells us about it here:

I bought an iPhone about six months ago; in that time I noticed that even though it had this part of the Web and that part of the Web. Every page I went to I was only reading this part and in order to do that, I needed to scroll it into view and resize the page the same way every time. When I go www.eng.ajaxian.com on my iPhone I need to scroll the content to the right location and scale it so the middle column fits the screen and then start reading. It’s a real pain in the ass.

This was the case for my blog as well. I didn’t want to rewrite it so I figured out a way to use a little JavaScript to set the scale and position of the page at start up so the main content area completely fills the screen for the iPhone.

Once you input the URL to your site, it gets loaded and you can interact with it to put the box in the right place. For Ajaxian, it then output the following HTML:

HTML:
  1.  
  2. <meta name="viewport" content="width=980; initial-scale=0.631163708086785"/>
  3.  

and JavaScript to do the right thing on the iPhone:

JAVASCRIPT:
  1.  
  2. (function(){
  3.        
  4.         //Variable used to control the zoom and
  5.         //position of the page when it is loaded.
  6.         var viewport = {
  7.                 initialScale: 0.631163708086785,
  8.                 width: 980
  9.         };
  10.         //(-80) is for the navigation bar, otherwise you can't read it
  11.         //until it is fully loaded
  12.         var scrollPosition = {
  13.                 left: 198,
  14.                 top: (188-80)
  15.         };     
  16.         if (/iPhone/i.test(navigator.userAgent)) { // sniff     
  17.                 //write the meta tag for the initial scale.  This should
  18.                 //happen in the <head> section of the html page.
  19.                 document.write('<meta name="viewport" content="width='+
  20.                                         viewport.width+'; initial-scale=' +
  21.                                         viewport.initialScale + '">');
  22.        
  23.                 //This loop will catch the page is loaded with out needing
  24.                 //to use the onLoad event.
  25.                 var _timer = setInterval(function(){
  26.                 if (/loaded|complete|interactive/.test(document.readyState)) {
  27.                         clearInterval(_timer);
  28.                                                                 
  29.                         //This will scroll the content into view,
  30.                         //could be enhanced with animated scrolling but less is more.
  31.                         //if the user started scrolling then let them handle it.
  32.                         if (window.pageXOffset == 0 && window.pageYOffset == 0)
  33.                                 window.scrollTo(scrollPosition.left,
  34.                                 scrollPosition.top);
  35.                 }}, 10);
  36.     }
  37. })();
  38.  

Posted by Dion Almaer at 6:23 am
10 Comments

++++-
4 rating from 16 votes

Wednesday, March 19th, 2008

CiUI: CNET iPhone UI

Category: JavaScript, UI, iPhone

Vladimir Olexa of CNET has released CiUI a iUI inspired iPhone JavaScript libary that mimics the iPhone UI behavior.

It's already being used on CNET¹s iPhone page (http://iphone.cnet.com). It's been greatly inspired by iUI with a few key differences:

  1. AJAX calls are performed after a page slides
  2. DOM doesn't get overloaded with "pages" as they load. Instead, two DIVs are constantly being reused
  3. Page titles are set on the source page, not on the destination page
  4. Only specified "a" tags are assumed a part of the UI.

To create a sliding load you simply annotate the link (iUI takes over automatically, in contrast):

HTML:
  1.  
  2. <a class="go_forward" title="CNET" href="http://www.cnet.com">CNET</a>
  3.  

Check out the source and an enclosed working example or go to iphone.cnet.com to see it in live action. You can download the library from our download page.

Posted by Dion Almaer at 10:52 am
2 Comments

+++--
3.9 rating from 18 votes

Friday, March 7th, 2008

iPhone SDK for Web Developers

Category: iPhone

Man, I was wrong in my post on what about us? and the iPhone SDK. All I knew about was the VP of Phone Software saying "we have stuff coming", but there is a lot more that that, it is just not mentioned in many places.

If you head over to the iPhone DevCenter (registration required) you will find a video titled "iPhone SDK for Web Developers" that goes into detail.

When you watch it you will see a ton of great stuff:

  • Gestures: ongesturestart, ongesturechange, on gestureend
  • Other actions: pinching, rotating, swiping
  • Full screen mode (no more chrome)
  • A lot of the cool stuff from WebKit nightlies (HTML 5 goodness)

Fantastic news. For a minute I worried that Apple would try to lure in us Web folk to learn Objective-C and Cocoa to grow that platform, but it looks like they are giving the mobile Web love as well as the native APIs. You just have to fork up $99.

Posted by Dion Almaer at 5:40 pm
7 Comments

++++-
4.4 rating from 29 votes

iPhone SDK: Great if you like Cocoa, but what about us?

Category: Mobile, iPhone

UPDATE: We got new information on the new functionality in Mobile Safari for developers

There has been a touch of news about the iPhone SDK from Apple. Most of the press believe that the iPhone SDK exceeds developer expectations.

As an iPhone user I am quite happy. I look forward to email / contact / calendar push. I think that the tool chain looked fantastic (debugger, simulator, IDE, GUI-builder) and I am sure that I will be seeing fantastic new applications when June comes around (waiting for June again?????). Skype. IM. You name it (as long as Apple approves!)

There are some that don't like the 30% tax, and Russell Beattie has some thoughts too:

I was right about the sandbox, though there's a bit more access to hardware than I thought, there's no VoIP over cellular or ability to interact with the Dock, no ability to change the UI. So though it's not a technical sandbox, it's an arbitrary Apple approved one instead.

Also right about the Orwellian doublespeak: Jobs called only being able to distribute your apps via the iTunes store "the best deal going to distribute applications in the mobile space." Uh-huh. Who wants to be able to put downloadable install files on their own websites? Exchanging the carrier-only distribution model for an Apple-only one doesn't do much for me. I mean, imagine if you could only install applications on your computer via Apple or Microsoft... it's the same thing, no matter how "convenient" it may sound.

Overall though, I am happy. I would love to see how many people pick up Objective-C and Cocoa now. We should keep an eye on the book sales. James Duncan Davidson will be happy :)

But what about Mobile Safari? What about some Cocoa JS love? Apple started out showing off the Web applications for the iPhone, so how about enabling more in that development stream? Some may enjoy learning something new, but others want to just stay in the growing Ajax universe. With the ability to hide the browser chrome, access to Touch APIs, and a few others.... and we can do a lot.

During the event, the VP of Phone Software told us that the next update will include new features for the web apps, so we will see (Thanks to Arn of MacRumors for letting me know).

At this point though maybe Steve wants to shut down that world a little? This is his chance to get a ton of developers on the full OSX platform. Once they learn Cocoa and the tool chain, some percentage of the developers will go on to build desktop applications too!

Interesting times. What do you think? Getting ready to use those square brackets?

Posted by Dion Almaer at 1:09 am
9 Comments

+++--
3.9 rating from 23 votes

Thursday, February 7th, 2008

iPhone Cachability: Watch your weight

Category: JavaScript, Mobile, Performance, iPhone

Reposted from devphone.

Wayne Shea and Tenni Theurer have continued their performance series by delving into the iPhone and its poor little cache.

I always wonder why the cache is so small. It is typical Apple to not allow an expert mode where you can tweak it. I would rather have a few less songs and have a large cache. But, Steve knows best ;)

The end result of the article is that you should follow this ideal rule:

Reduce the size of each component to 25 Kbytes or less for optimal caching behavior

Given that the wireless network speed on iPhone is limited and the browser cache is cleared across power cycle, it is even more important to make fewer HTTP requests to achieve good performance than in the desktop world. To reduce the number of HTTP requests, Safari on iPhone supports image map, CSS sprites, inline images and inline CSS images. Take advantage of the browser cache whenever possible. If an external component can be shared across multiple pages in the site, remember that each individual component has to be smaller than 25 KB to be cacheable. Also, the maximum cache limit of all components is 475 - 500 KB. Minify all the JavaScript, CSS and HTML. For components that aren’t shared across multiple pages, consider making them inline.

This of course is quite painful if you like to package JavaScript in One Large File for other performance reasons, or if you use a library that is larger than 25KB!

The iPhone can tell us a bunch of things about a site. If I go to TechCrunch for example, it drives me batty as it does a bunch of JavaScript to load in the CrunchBase widgets, and the iPhone keeps thinking it is loading. The blue bar keeps going, and the browser isn't as responsive. I hate those Crunchbase widgets :)

Posted by Dion Almaer at 10:10 am
1 Comment

+++--
3.7 rating from 9 votes

Tuesday, December 25th, 2007

iPhone window.onorientationchange Code

Category: JavaScript, Showcase, iPhone

Re-posted from devphone.com.

iPhone Snow Globe

Apple has put up some sample code that shows off the new window.onorientationchange and window.orientation ability that lets you detect the orientation of the iPhone.

You setup your HTML with a body tag with the class of "portrait" or "landscape" and most of the CSS goes from that. You also put an empty div with the id of currentOrientation that is used for some of the magic.

Below is a simple JavaScript handler:

JAVASCRIPT:
  1.  
  2. window.onorientationchange = function() {
  3.   /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
  4.     left, or landscape mode with the screen turned to the right. */
  5.   var orientation = window.orientation;
  6.   switch(orientation) {
  7.     case 0:
  8.         /* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
  9.            in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
  10.         document.body.setAttribute("class","portrait");
  11.        
  12.         /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events"  */
  13.         document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
  14.         break
  15.        
  16.     case 90:
  17.         /* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
  18.            body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
  19.         document.body<