TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Introducing S40 Web Apps | CodeLabs
1. Introducing Series 40 Web Apps
Mohamad Iqbal
Nokia Developer Certified Trainer
http://about.me/ciebal
2. The Developer Offering –
Simplification
Framework Services Platform
Qt Nokia Mail Meego
Java Nokia Store
Symbian
WRT Nokia Maps
Windows Phone
Silverlight Nokia Music
XNA Etc Series 40
4. Global Reach Statistics
Nokia Store attracts more than
15 million downloads a day
411 developers have reached 1million
downloads
There are 120 million registered users
choosing among 120000 apps in Nokia
Store
7. Cloud-assisted web apps
beauty with efficiency
Nokia Browser for
Series 40 Proxy
Server
Nokia Browser for
WWW Series 40 Client
HTML, CSS, Optimised
content (HTML,
(Phone)
Javascript,
Images, XML, CSS,
JSON, etc compressed
images)
8. Series 40 Web Apps
Ingredients
config.xml Widget Properties
Icon.png Application Icon
[name].html HTML backbone
[name].css Layout
[name].js Logic
Resource (optional) Files, images, etc.
Package .wgt
11. 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
12. Web Technologies
• HTML 4.0
• CSS 2.1
• Javascript 1.8
• DOM Level 1 and 2
13. Nokia Series 40 Web Apps
Development
Best-Practice
Mohammad Iqbal
Nokia Certified Trainer
http://about.me/ciebal
17. Navigation Controls
The app logo should Paging controls should The icon in the top right
always be in the top bar be displayed directly of the header can be
below the app header. contextual.
23. SMS URI Scheme
<a href="sms:+62812345678">One
number, no body text</a>
<a
href="sms:+62812345678?body=hell
o%20world">One number with body
text</a>
26. 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
Nokia is offering some great technologies to the developer through frameworks, services, and platforms which simplify the development process and enhance the experience. But in next discussion, we will talk about specifically just for the S40 platform.
Instead of the smartphone hype which is usually targeting the mid-to-high class. The bottom line has bigger potential if we talked about the number of installed based Which is by far, the number of users in mid-to-high class is not really significant if we compared to the bottom line even if they were combined. Think of an ice berg, which describe the best analogy of how big the low end market potential. With almost 700 million device activation, developers can reach the world’s biggest installed based with skill that you already know on web technology like HTML/ CSS or javascript
Whether you own a global brand or service consumers in your community, series 40 web apps will enable you to engage with them more readily. By offering a rich UX you can create stickiness in ways that have not been possible before.
Traditionally, proxy-based browsing has offered users a very limited experience, because such browser typically do nothing more than paint content provided by proxy. This has changed, with the Nokia Browser for Sewries 40’s support for Series 40 web apps.
Using the Mobile Web Library, the Nokia Browser for Series 40 client can execute JavaScript code in web apps on a phone. This code makes it possible to create interactive user interfaces and graphical transistions to deliver users beautiful web experiences.Now web designers and developers can deliver compelling application experiences to users at low cost – both in terms of development effort and user data charges.
S40 web app provide these features and can access platform service like native apps. With the latest version of Series 40 browser, Series 40 web apps can now go even further by offering users location aware web apps, file upload and download, and password management.You can take the advantage of these new features, by using Nokia Web Tools.
Nokia Web Tools delivers the tools you need to crate rich Series 40 web apps. Built on the eclipse platform, web Developer Environment delivers all the key features you need to author web content. In addition, custom features to enable the creation, editing, debugging, packaging, and deployment of Series 40 web apps are included , along with the latest Mobile Web Library APIs.
Nokia WDE tools has been iterated through several versions providing some of the best features like MWL support, Geolocation API, Image Caching and many more.
Series 40 web apps enables you to leverage your web properties like HTML 4.0, CSS 2.1 JavaScript 1.8, as well as DOM level 1 and 2 and deliver them in a network-efficient way to a wide audience of series 40 owners.
In addition, the unique features of series 40 web apps enable you to offer a rich user experience, with the ability to manipulate aspects of the user interface on the phone. Now let’s talk about some of the best practice.
A good apps web apps should be adapted to various screen resolution for both screen orientation portrait and landscape. This can be achieved with the proper layout executing in Cascading Style Sheet technique like made all size to 100% or something like that
And it that design process works well too for nokiaasha full touch series
In designing navigation control there is some useful guideline too.. like these three examples the first one… the second one.. And the third one.. This all really good for consistency in design
When page content exceeds the size of the screen, its content can extend outside the screen, however it should extend below the screen only.
As we can see in the screenshot, we can understand how to implement control in a way that focus on discrete task
Element margins, sizes, and spacing should be aligned and consistent throughout a web app. For example, margins on the left and right of a content area should be consistent.
One icon should be used to convey the same concept, for example, use the same icon to indicate refresh on all screens.
this is the code snippet of how we accommodate the screen orientation
And this one is the code snippet of how we can access the sms service through a simple line of HTML code.
This is how it looks like on simulator
If we want to access the telepon function, you just have to changet the keyword parameter like what is shown on the slide
Remote Device Access (RDA) is a Nokia Developer’s Free service that enables you to access a wide range of Series 40 series phones ovver the internet, including the latest full touch Nokia Asha line up like Asha 305, 306, and 311. Once you have booked a phone , just run your web apps using the short URL provided by the deplyment feature in Nokia Web Tools, and then test your web app, RDA provides a range of additional features, such the ability to take screenshot.