Feeds:
Posts
Comments

Archive for February, 2010

iPhone Web Keyboards

Mobile Safari supports multiple new input types, and displays separate keyboards for each.

I found the following image on twitpic, posted there by Remi Grumeau.

I think that the image speaks for itself as a reference for the different input types supported.

Advertisements

Read Full Post »

Touch Carousel Widget

Many sites use carousel widgets to display images, videos, and headlines. For a long time these widgets were the domain of Flash but today JavaScript and CSS can be used to create similar experiences. What’s missing is the ability to interact with the widgets like you would any other UI component in a touch environment.

This led me to create a configurable standalone widget that responds to touch commands. I’m calling it the Touch Carousel. It works well both in traditional pages as well as the iPhone and iPad (through the simulator). Best of all, the widget is not tied to any library and weighs in at under 23kb uncompressed.

Navigation can be done with a left or right swipe, or by hitting the left or right arrows.  Using the touch Safari extensions this was relatively easy. Below is the code attached to the center scroll pane of the widget.  It detects a left or right touch event using a combination of the ontouchstart and ontouchmove events.

_widget.node.ontouchstart = function( e ) {
    _widget.touches = [];
    e.preventDefault();
};
_widget.scrollpane.ontouchmove = function( e ) {
    var targetEvent =  e.touches.item(0);
    _widget.touches.push( targetEvent.clientX );
    if ( _widget.touches.length >= 2 ) {
        if ( _widget.touches[0] > _widget.touches[1] ) {
            _widget.getNext();
        } else {
            _widget.getPrevious();
        }
        delete _widget.touches;
    }
};

The key is code is :

_widget.touches.push( targetEvent.clientX );
    if ( _widget.touches.length >= 2 ) {
        if ( _widget.touches[0] > _widget.touches[1] ) {
            _widget.getNext();
        } else {
           _widget.getPrevious();
    }
};

This looks at two touch events and determines if the slide was to the right or left on the X axis.

One other thing to note is that the ontouchmove handler does not prevent the events from bubbling up to the page. You’ve got to be careful with this.  When I coded this originally, users were not able zoom in our around, or worse they were getting stuck because the widget was gobbling up the events.

Another quirk was that the mouse down events on the left and right navigation arrows were not going through very easily. It takes a lot more effort to get a onclick event to register. I found myself firmly pressing the left and right navigation links or lightly clicking it 2-3 times to get the event to fire. An easy solution was to detect a touch event on both navigation arrows using a ontouchstart handler. After I added this code the navigation on the iPhone and iPad simulator worked much more smoothly.

_prevLink.ontouchstart = function( e ) {
    _widget.pause();
    _widget.getNext();
    e.preventDefault();
};

The Touch Carousel widget and a working examples can be found here. While the example works well with the iPad simulator I would suggest giving it a try with a iPhone so you can really do the touch gestures, until you get an iPad. Let me know what you think.

Read Full Post »

iPhone Web Frameworks

When I see a new platform, I’m the kind of guy that looks for tools first thing.

Here’s a list of existing tools for iPhone web development… Sadly, many aren’t suitable for iPad web development (and I’m sure some would argue that some’re not even suitable for iPhone web development).

So – what I’m looking for in a framework:

  1. Small enough to be stored in the safari cache (<24kb)
  2. Provide native look and feel (I may not use it, but it’s always nice to have)
  3. Provide basic functionality for Ajax (I could write my own, but why not?)

Here’s a list of the frameworks I’ve found. I haven’t looked at most of them yet, I’ll update this page as I do.

  • iUI
  • A simple library designed to mimic native look and feel in iPhone web apps. Joe Hewett, the initial designer, has a blog post describing it in general terms. The focus on iPhone behavior means that it’s either going to have to be rewritten for iPad, or folks will just have to put up with a very blocky interface.

  • BaseJS
  • A small, focused library that provides mostly non-visual helper methods

  • PhoneGap
  • XUI
  • PastryKit
  • jQTouch
  • iWebkit
  • WebApp.net
  • UiUIKit
  • Apples provided Dashcode app builder (not a framework per se, of course)

Read Full Post »

Here’s a few useful links for learning HTML5:

Read Full Post »

Touch events on the iPad work like they do on the iPhone. You can attach event listeners two DOM elements and have listeners called when an event occurs. Apple has provides this resource which provides a nice example which I thought might be good to simplify.

Basically what you need to do is :

1) Attach a listener to an element

 <div id="_mcePaste">
   <div id="box" style="height:225px;width:225px;background:red;position:absolute"</div>
   <div>ontouchmove="touchMove(event)"</div>
   <div>ontouchstart="touchStart(event)"</div>
 </div>

2) Do something when an event occurs

function touchStart( e ) {
 var box = document.getElementById("box");
 box.style.background = "green";
 e.preventDefault();
 return false;
}
function touchMove( e ) {
 var targetEvent =  e.touches.item(0);
 var box = document.getElementById("box");
 box.style.background = "yellow";
 box.style.left = targetEvent.clientX + "px";
 box.style.top= targetEvent.clientY + "px";
 e.preventDefault();
 return false;
}

It is important to have the  e.preventDefault(); in the  the event handler to prevent the event from being propagated to the browser and causing unwanted scrolling events.

I have created a full working example with source here. You will need an iPhone or iPad simulator to test this code.

Read Full Post »

iPad Inline HTML 5 Video

The beta 2 update of the iPhone 3.2 SDK now has a browser. For those that wonder about the video experience, it is much like you would have in a regular browser.

Video plays inline in a web page. The Google videos may be played in high definition, and the samples look great.

Google still has not made all it’s video available in HTML 5 but there are many samples to try.

As of the latest SDK release Quicktime videos now also play inline and you can also play them in horizontal full screen mode by simply rotating the iPad and clicking the full screen button.

iPad Inline Quicktime

iPad Full Screen

iPad Full Screen

Read Full Post »

Debugging Mobile Safari

Most folks certainly already know this one, but if you haven’t already, turn on debugging on Mobile Safari.

To do so, select:

Settings -> Safari -> Developer -> Debug Console (on)

Handy.

Read Full Post »

Older Posts »