introducing s40 web apps | codelabs

Introducing Series 40 Web Apps

Mohamad IqbalNokia Developer Certified Trainer

http://about.me/ciebal

The Developer Offering – Simplification

Framework

Qt

Java

WRT

Silverlight

XNA

Services

Nokia Mail

Nokia Store

Nokia Maps

Nokia Music

Etc

Platform

Meego

Symbian

Windows Phone

Series 40

Why Nokia S40?

Low End

Middle End

High End

Global Reach Statistics

Nokia Store attracts more than million downloads a day

411 developers have reached 1million downloadsThere are 120 million registered users choosing among 120000 apps in Nokia Store

15

Global Reach Statistics

Nokia have over 675 million S40210 million Symbian180 million QTdevices in the market

Connecting You With The Series 40 Opportunity

Cloud-assisted web appsbeauty with efficiency

WWW

Nokia Browser for Series

40 Proxy Server

Nokia Browser for Series

40 Client(Phon

e)

HTML, CSS, Javascript, Images, XML, JSON, etc

Optimised content (HTML, CSS, compressed images)

Series 40 Web AppsIngredients

Widget Properties

Application Icon

HTML backbone

Layout

Logic

Files, images, etc.

config.xml

Icon.png

[name].html

[name].css

[name].js

Resource (optional)

Package .wgt

Platform Services

• Messaging• Location• Telephone

Developer Kit

• Nokia Web Tools 1.0• Nokia Web Tools 1.5• Nokia Web Tools 2.0

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

Nokia Series 40 Web Apps DevelopmentBest-Practice

Mohammad IqbalNokia Certified Trainer

http://about.me/ciebal

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

Basic Skill

• HTML• CSS• Javascript• Server side scripting (PHP/ASP/JSP) (optional)

The Next Billion

Thank You!