Introducing S40 Web Apps | CodeLabs


Published on

Slide for CodeLabs internal training

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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.
  • Introducing S40 Web Apps | CodeLabs

    1. 1. Introducing Series 40 Web AppsMohamad IqbalNokia Developer Certified Trainer
    2. 2. The Developer Offering – SimplificationFramework Services Platform Qt Nokia Mail Meego Java Nokia Store Symbian WRT Nokia Maps Windows Phone Silverlight Nokia Music XNA Etc Series 40
    3. 3. Why Nokia S40?
    4. 4. Global Reach StatisticsNokia Store attracts more than15 million downloads a day411 developers have reached 1milliondownloadsThere are 120 million registered userschoosing among 120000 apps in NokiaStore
    5. 5. Global Reach StatisticsNokia have over 675 million S40 210 million Symbian 180 million QT devices in the market
    6. 6. Connecting You With The Series 40 Opportunity
    7. 7. Cloud-assisted web apps beauty with efficiency Nokia Browser for Series 40 Proxy Server Nokia Browser forWWW Series 40 Client HTML, CSS, Optimised content (HTML, (Phone) Javascript, Images, XML, CSS, JSON, etc compressed images)
    8. 8. Series 40 Web Apps Ingredients config.xml Widget Properties Icon.png Application Icon [name].html HTML backbone [name].css Layout [name].js LogicResource (optional) Files, images, etc. Package .wgt
    9. 9. Platform Services• Messaging• Location• Telephone
    10. 10. Developer Kit• Nokia Web Tools 1.0• Nokia Web Tools 1.5• Nokia Web Tools 2.0
    11. 11. Comparison Nokia Web ToolsFeature Version 1.0 Version 1.5 Version 2.0Symbian Applications SupportedEfficient proxy based web apps Supported Supported SupportedMWL support Supported Supported SupportedModern UI with floating icons Supported SupportedGeolocation API support Supported SupportedWeb app image caching Supported SupportedSMS URI support Supported SupportedFull Touch Simulator Supported
    12. 12. Web Technologies• HTML 4.0• CSS 2.1• Javascript 1.8• DOM Level 1 and 2
    13. 13. Nokia Series 40 Web Apps Development Best-PracticeMohammad IqbalNokia Certified Trainer
    14. 14. Series 40 Web App UX Guidelines
    15. 15. Screen Orientation320x240 pixels 240x320 pixels
    16. 16. Screen Orientation Full Touch 240x400 pixels
    17. 17. Navigation Controls The app logo should Paging controls should The icon in the top rightalways be in the top bar be displayed directly of the header can be below the app header. contextual.
    18. 18. Scrolling
    19. 19. Focus on discrete tasksStart the task Choose a category Choose a sub- Browse the results category
    20. 20. Align elements
    21. 21. Use a common set of icons
    22. 22. Accommodating Screen Orientationif (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. 23. SMS URI Scheme<a href="sms:+62812345678">Onenumber, no body text</a><ahref="sms:+62812345678?body=hello%20world">One number with bodytext</a>
    24. 24. SMS URI Scheme
    25. 25. Telp URI Scheme<a href="tel:+62812345678">CallMe</a>
    26. 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
    27. 27. Remote Device Access
    28. 28. Basic Skill• HTML• CSS• Javascript• Server side scripting (PHP/ASP/JSP) (optional)
    29. 29. The Next Billion
    30. 30. Thank You! 
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.