Tag Archives: mobile

HTML5, JavaScript, webdev

HTML5 On Mobile

This slideshow requires JavaScript.

It’s all about reading the map and see what other big gorillas are doing.

In the past few months, we saw that ‘web gorillas’ like Netflix, Facebook, Microsoft and others are putting their money on HTML5 for mobile. If you want to build an application that will run ‘everywhere’ – HTML5 is your best friend. Yesterday, jQuery Mobile moved to Beta, which is a great news for web developers. In a nutshell, jQuery Mobile is a touch optimized framework for smart phones (iPhone, Android, Palm, Windows phones and even Blackberry) & tablets (iPad, Android and others). It gives out of the box a unified user interface system across all popular mobile device platforms, built on jQuery and jQuery UI foundation. Since ‘Touch’ is the major way to interact with mobile web apps, here is a short summary of ‘the touch state of the union’:

What browsers are out there? well, you can use compatibility sites like: caniuse.com and PKK – quirksmode.org. In short, apple pushing their mobile Safari and just after them we have android browser. Opera mobile browser is also huge and you will want to check your app there as well. All these browsers should work with touch events web standard. Here are the main parts of the standard:
  • Core: touchstart touchmove touchend
  • Not: touchenter touchleave touchcancel
  • Touch lists: touches targetTouches changedTouches
  • Touch: target identifier x y

Some pro tips for mobile web developers:

    • Set a fixed viewport so when the user is double clicking we won’t have the zoom gesture. Here is the meta tag you need in the top of your page. However, I would recommend to leave the ability to zoom… it’s important feature that a lot of users want to have. In order to let them have it – remove: “user-scalable=no” from the tag.

<meta name="viewport"
content="width=device-width, height=device-height,
initial-scale=1.0, user-scalable=no">

    • If you need a custom hold & press event, override the default one

mySelector {
-webkit-touch-callout: none;
}

    • Hide the address bar. It will give your app a nice touch of ‘native’. Pss… jquery mobile is doing it for you by default.

setTimeout(function () {
window.scrollTo(0, 1);
}, 1000);


Other good sources:
Touch Gesture ref. guide and a great presentation my friend Boris created.
Standard
webdev

Some Interesting APIs

In the past few months, we (=HighGearMedia.com) have been thinking a lot about mobile and APIs. It’s no secret that the mobile spaces is growing very fast. In fact, we think more and more users will consume most of their ‘web’ using their mobile devices in the (near) future. On top of the ‘mobile movement’ we want to create creative mash-ups that harness other features in order to build new cool tools. Here is a list of APIs I would like to keep an eye on:

Any other good/great APIs I’ve missed here?
This week there are lots of update about Google APIs,  watch what is going on tomorrow LIVE at Google I/O (lots of great APIs)

last but not least, there are these 2 frameworks  that any one that is going to take seriously her mobile front should keep a close eye on:

  1. http://jquerymobile.com – this is probably the best framework today to build modern mobile apps that will work on lots of phones (iOS, Andriod, PalmOS and even Windows).
  2. http://www.phonegap.com – the framework that let you take your JS,CSS,HTML5 and compile from them a native application.

Standard