Introducing S40 Web Apps | CodeLabs
•Download as PPTX, PDF•
0 likes•1,270 views
Slide for CodeLabs internal training
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Introducing S40 Web Apps | CodeLabs
Similar to Introducing S40 Web Apps | CodeLabs (20)
More from Mohamad Iqbal
More from Mohamad Iqbal (9)
Recently uploaded
Recently uploaded (20)
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
- 5. Global Reach Statistics Nokia have over 675 million S40 210 million Symbian 180 million QT devices in the market
- 6. Connecting You With The Series 40 Opportunity
- 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
- 9. Platform Services • Messaging • Location • Telephone
- 10. Developer Kit • Nokia Web Tools 1.0 • Nokia Web Tools 1.5 • Nokia Web Tools 2.0
- 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
- 14. Series 40 Web App UX Guidelines
- 15. Screen Orientation 320x240 pixels 240x320 pixels
- 16. Screen Orientation Full Touch 240x400 pixels
- 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.
- 18. Scrolling
- 19. Focus on discrete tasks Start the task Choose a category Choose a sub- Browse the results category
- 20. Align elements
- 21. Use a common set of icons
- 22. 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"/>'); }
- 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>
- 24. SMS URI Scheme
- 25. Telp URI Scheme <a href="tel:+62812345678">Call Me</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
- 28. Basic Skill • HTML • CSS • Javascript • Server side scripting (PHP/ASP/JSP) (optional)
- 29. The Next Billion
- 30. Thank You!
Editor's Notes
- 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.