Tag Archives: english

Detect Three-Finger Swipe Gestures in Safari with the HTML5 History API

Veröffentlicht am

As I’m only using Mac computers at home, I’m used to the amazing and timesaving  multi-touch gestures on my Macbook and the Magic Mouse. Wouldn’t it be nice to use this type of user interaction as a web developer to make your web app more useful?

Today I’ve made an interesting discovery. Safari uses the three-finger swipe gesture for going back and forth in the browser history. That’s the only gesture in the browser, that affects the content of the displayed site directly. With the use of the HTML5 History API it is possible to manipulate the browser history although you aren’t actually leaving the visited site. So let’s say You’ve a gallery page with 5 different photos and You want to swipe through them like it’s possible in iPhoto or on the iPhone. If you’re on a Mac and using Safari, you can check it out here.

The best way to start is to open a new pop-up window, so it doesn’t contain any previous page in the browsing history. Then you have to create a history entry for all items in your gallery and jump back to the very first one right after the page is loaded. If  you’re now swiping with three fingers, you are going one page forward and it’s easy to catch this change with a simple event handler. The rest is just some fancy javascript trickery.

How to change the iPhone On-Screen-Keyboard in Web Apps

Veröffentlicht am

Nearly three years ago, when Apple introduced the iphone, so-called “Web Apps” were the only way to develop and publish self-made applications on Apple’s new and shiny gadget. With the announcement of the SDK and the launch of the App Store, developers started abandoning web applications and began flocking to native development. But this is not the end of web-based applications: Recently Google declared the end of mobile app stores and with Google Voice, Buzz and GMail, the company started to port their entire range of services to the mobile web. Besides that, HTML5 provides the much-needed technologies (offline access, storage, location awareness) to really make web-based applications great and useful.

On of the biggest problems developers are facing with mobile web applications is the user interface/experience. We have to reach the superior quality GUI of native applications together with all the conveniences they are offering to users. The majority of web sites for example are using the plain old on-screen-keyboard for every text input, no matter what characters will be entered. It isn’t really comfortable to enter an email-address when you have to change to the secondary keyboard to enter a “@”. Just the same as having to change it for entering numbers in an input element that is only ment to contain numbers anyway.

This is probably the most common user interface problem and it is also one of the easiest to fix. The HTML5 specification contains an extension to the type attribute of input elements that is perfectly recognized by Mobile Safari. With just a little change, you are able to make your web-based application more convenient to use. And by the way: Browsers that don’t understand the new type attributes will ignore it and keep displaying a normal input element.

It is as simple as the following code snippet:

Text: <input type="text" /> <!-- display a standard keyboard -->
Telephone: <input type="tel" /> <!-- display a telephone keypad -->
URL: <input type="url" /> <!-- display a URL keyboard -->
Email: <input type="email" /> <!-- display an email keyboard -->
Zip Code: <input type="text" pattern="[0-9]*" /> <!-- display a numeric keyboard -->

Just change to type attribute to either “tel”, “url” or “email”. Additionally you can alter use the new pattern attribute to only allow numbers. I’ve set up a demo page which can be accessed with every iPhone and iPod Touch. Please note, that this feature is only supported in iPhone OS 3.1 or newer.