OverTheAir: Hacking Competition & Presentations

Lots of people stayed up overnight to hack mobile applications and there were some very cool results.

I tried out building a mobile widget using the Nokia Web Runtime. This is an application environment on recent Nokia Series 60 devices that uses the WebKit browser with various extensions. You write widgets for it using JavaScript, XHTML and CSS (just like any other widget, but, as always, slightly different to the other formats). In fact, I started off building the widget using Apple’s DashCode — a web application builder for the iPhone. This comes with an interface builder that allows you to drag and drop controls onto the screen and wire them together.

Getting the control logic to work took a bit of getting used to — as with all interface frameworks, there’s a learning curve where you build up understanding of how the pieces are supposed to fit together. In the DashCode case, this isn’t helped by the lack of any documentation for the interface controls. However, the development environment more than made up for this — there’s a very capable Javascript debugger, complete with an interactive console, and it’s very easy to start and stop your widget in the iPhone emulator.

I used prototype to power up the Javascript side — making the Ajax calls to our server much easier and enabling some mucking around with the results to provide some pretty formatting.

Once I’d got the basic application working in DashCode, I took it across to the Nokia Web Runtime environment. This provided some extra features such as storing preferences between invocations so that the widget could start up straight into showing you the departures that you’d chosen previously.

I found the Web Runtime very effective, and it fills a very useful niche for simple, web-connected apps on recent S60 phones. Development time is fast and you have access to a reasonable amount of the phone features, though nothing quite as useful as location or the address book (as yet).

My hack won special mention in the “Most practical / ready for market” category — runner-up to the SNOB address book picture enricher. I’ve included a movie of the widget in action (within an iPhone environment) below.

Some other hacks were:

• PimPam — social BBC programmes
• 21st Century Fridge Door — text & MMS to a shared web space
• Location-based games w/J2ME — e.g. capture the flag
• Social Tracker — basically just captures where you are to a database…
  • seems to use Google Maps in a browser to capture the current location
• Flat Music Player UX design — zoomed out user experience — see the album art very small and in specific places on the screen
  • uses sense of physical location rather than words
• Twitter client for Windows Mobile today screen
• Browser Sync while ActiveSync’d — nice!
• YourLocal - displays the local transport stops around Imperial College
• FuturePlatforms — Octobastard robot — you have to see it to believe it :-)
• SNOB: Social Network Open Butler — add pictures to your address book from social network avatars (web service outputs XML independent from social network)
• Autowigificationizor (Owen Griffin) — click a firefox button and get a web runtime widget generated for you based on the RSS feeds for that web page
• MixItUp — cocktails in Flash
• Bluetooth + FOAF — unique ID from hash of bluetooth ID & device bluetooth name; can revoke it by changing your device bluetooth name; get a list of all the people you came into contact with at a conference
• Update FireEagle location from command line, then display it on blog
• LastMinute Labs — PhonePhight with motion detection & bluetooth — very cool!
• Torchwood Sweded — again, I think you just had to be there…

OverTheAir: Case Study: PrimeSky -- Bringing Web 2.0 to Mobile (Tom Hume & Bryan Rieger -- FuturePlatforms)

A webservice to let people find out what’s in the sky that night… oh, and it has to work on mobile too! How do you fit Space onto a mobile phone? And we want to open source it at the end of the project.

How do you orientate people? How do you display constellations on a small screen?

design process:

• put stuff on paper first — it’s easy to change
• iterate with real people
• get it on a handset as soon as possible
  • initially simple PNG files (look like a simple web page) to check expectations on single pages
  • then some simple HTML to check out navigation, with SVG images showing constellations and context

development process:

• went through at least 3 iterations of the database schema
  • avoid database-driven design
• needed to present images in a house style, easy for creation and working at different scales
• technologies: Symfony PHP, WURLF+WALL4PHP, ImageMagick all on a LAMP stack
• subjective scaling: manipulating SVG files to keep captions and stars large but overall image small
• rendering SVG to appropriate format for mobile using ImageMagick
  • then cache pre-created images for a while
• added in microformats:
  • events for days — every page on the site has a little API in it
  • transformed to vCal on mobile devices — allows you to bring something direct into your phone calendar
• also provide JSON, YAML, XML, serialized PHP feeds by just adding ?api=xxx on the end of the RESTful URLs (search API is also exposed)

Development took about 7 weeks for one developer.

conclusions and questions

• look for design solutions first (over and above technical solutions)
  • e.g. orientation
• you don’t get a choice of which version you want — it’s always the one for your device
  • e.g. iPhone gets a widescreen mobile version, not a zoomable full web page
  • Tom: “the iPhone has a kind of split personality — it’s billed as full web on a phone, but the big sites all have iPhone-specific versions”

There’s also an SMS and email alerting service for interesting events.

Launch date: soon...

See the whole presentation:

| View | Upload your own

OverTheAir: MIDP3 -- Paul Su (Aplix) & Óscar Gutiérrez Isiégas (Vodafone)

Recommended book: Kicking Butt with MIDP and MSA

Aplix make a MIDP3 implementation.

MIDP 3.0 Expert Group is now looking for feedback from developer community on the specification. You can comment on the specification by logging in to opensource.motorola.com and submitting tickets to the JSR-271 project.

Improvements

• CLDC 1.1.1 — minor improvement, adds permissions classes as used by new framework, also adds some inverse trig functions
• Concurrency now mandatory — spec mandates behaviour: must be able to support at least two MIDlets at once
• Shared libraries — LIBlets
  • LIBlets are executed in the context of the MIDlet
• MIDlets running in the background can request user notification
• Applications can restrict which other apps can make use of it — completely independent from permission model
• Existing permission model still in place for legacy MIDlets, but MIDP 3 has more fine-grained permissions similar to CDC
  • Still held to ransom by certificates on the device being controlled by the operator
• MIDlet can consume and publish events between each other and the system (e.g. power on)
• Auto-start, Screensaver & Idle screen MIDlets
  • Auto-start MIDlets will attempt to restart when they’re shutdown
  • Idle screen MIDlets can define a derivative of a CustomItem and the phone will display it somewhere on the idle screen
• Can interchange Record Store data between phones and to and from the network. Can also encrypt RMS data to protect it
• Image display support now includes mandatory PNG, GIF, JPEG & SVG Tiny 1.?
• Custom OpenType fonts — defined in the JAR or downloaded from the network

There are more details about some of these points in the masterclass session that Paul and Oscar ran previously. Here's the slides:

| View | Upload your own

Schedule

Probably get final draft review completed by Q3 2008…

OverTheAir: Google Gears for Mobile -- Andrei Popescu (Google)

Currently running on Windows Mobile as an ActiveX control. Just launched Picasa Web Album for Mobile with Gears. Works in IE 6 & 7, IE Mobile 5 & 6, Firefox 1 & 2 (3 coming soon). Firefox plugin works on Mac. Safari support being worked on. The Mobile version has the same API as the desktop version. Google have also announced that they are porting Gears to Android (no surprise there…) — this will be a Netscape standard plugin, so will probably come to WebKit at a similar time.

Gears is a browser plugin that provides additional APIs to the browser (local storage in a SQLite database, worker threads, local server for server data offline). See http://code.google.com/apis/gears/ for documentation and samples.

Mobile version also provides a Desktop API, which allows creating an icon shortcut to the app. Can provide multiple resolution icons.

Worker threads cannot access the DOM and the window object, so Gears also provides HttpRequest and Timer APIs for them.

Security: Gears will ask the user if a URL wants to store and access information locally. Thereafter that URL is allowed to use Gears to access data from the same origin (scheme, host, port).

OverTheAir: WICD -- Daniel Herzog (Vodafone)

Two profiles: WICD Full & WICD Mobile. Full gives you SVG full and full XHTML, CSS & EcmaScript.

Mobile requires EcmaScript 3rd edition Compact Mobile (no eval) as well as CSS & XHTML

Browsers that support it:

• Opera 9.5 beta 1
• Safari 3.1
• Firefox 3 beta 5 (though not officially, yet)

Big feature in WICD SVG is rightsizing

• if the browser just defines the width as a percentage
• go ask the SVG for its aspect ratio
• assign the height appropriately

WICD also includes media queries. These include things such as dpi which can be very useful on smaller devices. Opera will update media queries in real-time when resizing the browser window :-)

Can interact with SVG and XHTML — e.g. hover over a link and get the SVG to respond immediately; also create SVG animated circular radius over a clicked point on a google map.

SVG has Javascript within it so can encapsulate functions within. Can then address each object’s methods from javascript in the XHTML page.

SVG:

Object.prototype.myAnim = new animatorClass();

XHTML Javascript:

document.objectOfTypeMyAnim.animatorClassMethod(params)

At the moment, designers have Illustrator to create static images. Animations are harder to create. Debugging is now easier using Firebug. There’s another tool called Inkscape available for Linux, Mac & Windows. It’s getting better all the time.

OverTheAir: Volantis Mobility Server (Adrian Jackson & Julian Ludwikowski)

Has three parts:

1. Multi-Channel Server — content delivery
2. Message Preparation Server — rich messages & text
3. Media Access Proxy — media transcoding

All three have been open-sourced (community edition — released under GPLv3) with professional edition that has regular (weekly) updates to devices — close to 200 devices per month.

Community edition is limited:

• device database updated much less regularly
• no database support from XDIME

Can generate AJAX for higher capabilities and optimize page size for lower end

Content

Content developed in XDIME — XML Device-Independent Markup

• XDIME 1: based on XHTML 1, CSS 2 and early draft of XForms
• XDIME 2: based on DIAL (developed by DIWG), using XHTMLTM 2.0 which includes XForms 1.1 & DISelect.

Can provide XDIME content using a plugin from any source (i.e. dynamic content). There is a webservices plugin built-in. The database plugin is for the pro version only.

Two common ways to set up:

1. servlet filter
2. remote site rewrite (like Apache mod_rewrite)

Device database

• has 530+ attributes including things such as as one-handed use
• repository editor is an Eclipse extension
• covers non-phone devices as well, such as Voice & TV browsers

Doesn’t deal with Novarra gateways by default, but could create a secondary rule to fetch the real device. I didn’t get a useful answer to how this would work — they seemed to say that if the MCS was lied to in the user agent then it wouldn’t know to be clever and look elsewhere.

There’s a wide range of logging options, including an unknown devices log that can be sent back to Volantis. MCS uses log4j, so can extend using the usual methods.

Layouts

How you decide where the content is presented on screen. Includes things such as “dissecting panes” (automatic pagination) and iterators.

There is an Eclipse plugin to edit the layouts — you control their appearance with Themes (CSS styles) that are attached to their class attributes.

Themes

Effectively CSS stylesheets. Also edited with an Eclipse plugin.

MAP image transformation

Can be used by itself to transcode and resize images, but you’ll need to provide the required width yourself.

OverTheAir: Introduction & Keynotes

John Darlington — Director of Internet Centre

• Internet Centre used to be the London eScience Centre
• Presents a slide on “Life Planning: Vortix”
  • Expanding mobile with NFC & touch paradigm
  • Mobile applications can be aware of your context to cut down the information presented to you
  • Also an Imperial College RTIP Demo on business planning — what is there to do in an area within a certain amount of time
  • No mention of Kizoom…

Matthew Postgate — BBC Mobile

Some experimental apps that fell by the wayside up to 2005:

• RadioMate — real-time EPG for radio, complete with text to the studio, etc
• “Come and have a go if you think you’re smart enough”
• Locating Coast material in actual locations

In 2005, chose to put a lot of focus on broadband — iPlayer — but the plan was to follow this up with mobile. So now that iPlayer is done (nearly, anyway), mobile is high on the agenda.

Mobile for the BBC now means: “Any interaction between the BBC and its audience over a portable device or within a mobile situation” — a very wide context with four key platforms:

• Mobile internet — possibly more important than fixed-line internet
• Mobile media
• Mobile messaging
• Out of home — ubicomp, pervasive computing (e.g. the Coast project)

Took 1999-2007 to get to 1.5 million monthly users, and 6 months in 2007-2008 to add another million…

An interesting area is combining within and without — transferring easily between the two, and bringing the advantages and unique capabilities of each together.

Margaret Gold — Vodafone Betavine

Market research often doesn’t generate new ideas. As Henry Ford said — “if I’d asked people what they wanted, I would have ended up with a faster horse”

Idea generation:

• think of any company
• match it against any world problem (global or local)
• think of a new technology
• now put them together and brainstorm

Rudy de Waele — m-trends and Mobile Monday Barcelona

Rudy had some very pretty slides in his presentation -- I've embedded it for you below so you can have a look.

• #12 shows all Nokia mobile phones from 1982 until 2006 -- there are a lot! And Nokia have only expanded their production since then...
• #23 is a graph from m:metrics showing the percentage of handsets in Europe and the US with 3G capabilities -- it's starting to reach 25% in most countries (including the US which is catching up fast, though Italy is way ahead with 30%).
• #28 is another graph, but this time of cellphone activity around a Madonna concert in Rome — showing a big peak over the stadium

| View | Upload your own

Claiming that next frontier is between mobile apps and the browser. He’s just come back from CTIA and the US are thinking everything is going to be browser-based, but he’s not so sure — apps can be more powerful. This could be ‘cos it’s so hard to get an application on a US mobile.

Useful companies & sites:

• Funambol started as sync4j and have now expanded into a mobile messaging platform.
• mobref.com provides live stats from getjar.com and wapalizer.com
• mob4hire - market for mobile testing
• Sample traffic numbers from mobile social networks:
  • itsmy.com: 200m mobile pages a month
  • mig33: 2m sessions a day
  • compares pretty well with Kizoom's c.6m mobile pages a month!
• frengo: open social mobile toolkit
• socialight.com — urban mixtape — create a trip for your friends