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.
Web Apps Development                Best PracticesMohamad IqbalNokia Developer Certified Trainerhttp://about.me/ciebalhttp...
Architecture              Nokia Browser for               Series 40 Proxy                   Server                        ...
Platform Services• Messaging• Location• Telephone
Developer Kit• Nokia Web Tools 1.0• Nokia Web Tools 1.5• Nokia Web Tools 2.0 (beta)
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
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
Thank You!    
Upcoming SlideShare
Loading in …5
×

Web Apps Development Best Pactices | Hackonten

692 views

Published on

Slide for Hackonten (www.hackonten.com)

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

Web Apps Development Best Pactices | Hackonten

  1. 1. Web Apps Development Best PracticesMohamad IqbalNokia Developer Certified Trainerhttp://about.me/ciebalhttp://nice.or.id/ciebal
  2. 2. Architecture 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)
  3. 3. Platform Services• Messaging• Location• Telephone
  4. 4. Developer Kit• Nokia Web Tools 1.0• Nokia Web Tools 1.5• Nokia Web Tools 2.0 (beta)
  5. 5. 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
  6. 6. Web Technologies• HTML 4.0• CSS 2.1• Javascript 1.8• DOM Level 1 and 2
  7. 7. Series 40 Web App UX Guidelines
  8. 8. Screen Orientation320x240 pixels 240x320 pixels
  9. 9. Screen Orientation Full Touch 240x400 pixels
  10. 10. 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.
  11. 11. Scrolling
  12. 12. Focus on discrete tasksStart the task Choose a category Choose a sub- Browse the results category
  13. 13. Align elements
  14. 14. Use a common set of icons
  15. 15. 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"/>);}
  16. 16. SMS URI Scheme<a href="sms:+62812345678">Onenumber, no body text</a><ahref="sms:+62812345678?body=hello%20world">One number with bodytext</a>
  17. 17. SMS URI Scheme
  18. 18. Telp URI Scheme<a href="tel:+62812345678">CallMe</a>
  19. 19. 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
  20. 20. Remote Device Access
  21. 21. Thank You! 

×