web apps development best pactices | hackonten
DESCRIPTION
Slide for Hackonten (www.hackonten.com)TRANSCRIPT
Web Apps Development Best Practices
Mohamad IqbalNokia Developer Certified Trainer
http://about.me/ciebalhttp://nice.or.id/ciebal
Architecture
WWW
Nokia Browser for Series 40 Proxy
Server
Nokia Browser for Series 40 Client
(Phone)HTML, CSS, Javascript, Images, XML, JSON, etc
Optimised content (HTML, CSS, compressed images)
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 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
Web Technologies
• HTML 4.0• CSS 2.1• Javascript 1.8• DOM Level 1 and 2
Series 40 Web App UX Guidelines
Screen Orientation
240x320 pixels
320x240 pixels
Screen OrientationFull Touch
240x400 pixels
Navigation Controls
The app logo should always be in the top bar
Paging controls should be displayed directly below the app header.
The icon in the top right of the header can be contextual.
Scrolling
Focus on discrete tasks
Start the task Choose a category Choose a sub-category
Browse the results
Align elements
Use a common set of icons
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"/>'); }
SMS URI Scheme
<a href="sms:+62812345678">One number, no body text</a>
<a href="sms:+62812345678?body=hello%20world">One number with body text</a>
SMS URI Scheme
Telp URI Scheme
<a href="tel:+62812345678">Call Me</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’s .wgt file
• All images in a .wgt file are scaled to the size used by the web app
Remote Device Access
Thank You!