Web Apps Development Best Pactices | Hackonten

Uploaded on

Slide for Hackonten (www.hackonten.com)

Slide for Hackonten (www.hackonten.com)

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • When page content exceeds the size of the screen, its content can extend outside the screen, however it should extend below the screen only.
  • 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.


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