Web Apps Development Best Practices

Mohamad IqbalNokia Developer Certified Trainer

http://about.me/ciebalhttp://nice.or.id/ciebal

Architecture

WWW

Nokia Browser for Series 40 Proxy

Server

Nokia Browser for Series 40 Client

(Phone)HTML, CSS, Javascript, Images, XML, JSON, etc

Optimised content (HTML, CSS, compressed images)

Platform Services

• Messaging• Location• Telephone

Developer Kit

• Nokia Web Tools 1.0• Nokia Web Tools 1.5• Nokia Web Tools 2.0 (beta)

Comparison Nokia Web Tools

Feature Version 1.0 Version 1.5 Version 2.0

Symbian Applications Supported

Efficient proxy based web apps Supported Supported Supported

MWL support Supported Supported Supported

Modern UI with floating icons Supported Supported

Geolocation API support Supported Supported

Web app image caching Supported Supported

SMS URI support Supported Supported

Full Touch Simulator Supported

Web Technologies

• HTML 4.0• CSS 2.1• Javascript 1.8• DOM Level 1 and 2

Series 40 Web App UX Guidelines

Screen Orientation

240x320 pixels

320x240 pixels

Screen OrientationFull Touch

240x400 pixels

Navigation Controls

The app logo should always be in the top bar

Paging controls should be displayed directly below the app header.

The icon in the top right of the header can be contextual.

Scrolling

Focus on discrete tasks

Start the task Choose a category Choose a sub-category

Browse the results

Align elements

Use a common set of icons

Accommodating Screen Orientation

if (screen.width > 240) { document.write('<link rel="stylesheet" href="../../basicLandscape.css" type="text/css" />'); } else { document.write('<link rel="stylesheet" href="../../basicPortrait.css" type="text/css"/>'); }

SMS URI Scheme

<a href="sms:+62812345678">One number, no body text</a>

<a href="sms:+62812345678?body=hello%20world">One number with body text</a>

SMS URI Scheme

Telp URI Scheme

<a href="tel:+62812345678">Call Me</a>

Image Caching

• All static images used in a web app are included in its .wgt file

• There are no unused images in a web app’s .wgt file

• All images in a .wgt file are scaled to the size used by the web app

Remote Device Access

Thank You!