Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introducing Series 40 Web AppsMohamad IqbalNokia Developer Certified Trainerhttp://about.me/ciebal
The Developer Offering –         SimplificationFramework       Services      Platform      Qt        Nokia Mail       Meeg...
Why Nokia S40?
Global Reach StatisticsNokia Store attracts more than15     million downloads a day411 developers have reached 1milliondow...
Global Reach StatisticsNokia have over   675 million S40                  210 million Symbian                  180 million...
Connecting You With The Series 40          Opportunity
Cloud-assisted web apps      beauty with efficiency              Nokia Browser for               Series 40 Proxy          ...
Series 40 Web Apps        Ingredients    config.xml                       Widget Properties     Icon.png                  ...
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 ToolsFeature                          Version 1.0   Version 1.5   Version 2.0Symbian Applications    ...
Web Technologies•   HTML 4.0•   CSS 2.1•   Javascript 1.8•   DOM Level 1 and 2
Nokia Series 40 Web Apps                   Development                   Best-PracticeMohammad IqbalNokia Certified Traine...
Series 40 Web App UX      Guidelines
Screen Orientation320x240 pixels                 240x320 pixels
Screen Orientation    Full Touch      240x400 pixels
Navigation Controls  The app logo should      Paging controls should   The icon in the top rightalways be in the top bar  ...
Scrolling
Focus on discrete tasksStart the task   Choose a category   Choose a sub-   Browse the results                            ...
Align elements
Use a common set of icons
Accommodating Screen            Orientationif (screen.width > 240) {document.write(<link rel="stylesheet"href="../../basic...
SMS URI Scheme<a href="sms:+62812345678">Onenumber, no body text</a><ahref="sms:+62812345678?body=hello%20world">One numbe...
SMS URI Scheme
Telp URI Scheme<a href="tel:+62812345678">CallMe</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...
Remote Device Access
Basic Skill•   HTML•   CSS•   Javascript•   Server side scripting (PHP/ASP/JSP) (optional)
The Next Billion
Thank You!    
Upcoming SlideShare
Loading in …5
×

Introducing S40 Web Apps | CodeLabs

2,161 views

Published on

Slide for CodeLabs internal training

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

  • Be the first to like this

Introducing S40 Web Apps | CodeLabs

  1. 1. Introducing Series 40 Web AppsMohamad IqbalNokia Developer Certified Trainerhttp://about.me/ciebal
  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 Trainerhttp://about.me/ciebal
  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! 

×