introducing s40 web apps | codelabs
DESCRIPTION
Slide for CodeLabs internal trainingTRANSCRIPT
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!