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.

Hands-on development with Nokia Web Runtime


Published on

Overview of mobile Web widget development using the Nokia Web Runtime (WRT)
Presented at Maemo Summit 2009, followed by a live coding demo of WRT widget creation.

More information about Nokia's WRT at

Published in: Technology
  • Login to see the comments

Hands-on development with Nokia Web Runtime

  1. <ul><li>Hands-on development with Nokia Web Runtime </li></ul><ul><li>Oren Levine ( </li></ul><ul><li>Technology Marketing </li></ul><ul><li>Nokia </li></ul>
  2. Agenda <ul><li>Web Runtime: the slides </li></ul><ul><ul><li>What it is and what’s in it for me </li></ul></ul><ul><li>Web Runtime: the demo </li></ul><ul><ul><li>Zero to app in 60 seconds </li></ul></ul><ul><li>Questions? </li></ul>
  3. What is a “Web Runtime”? A software development environment that lets developers use standard web technology to create first-class applications
  4. What’s in it for me? Symbian Maemo Desktop Cross-platform apps Reuse Web content <ul><li>Create true cross-platform applications and service clients </li></ul><ul><li>Reuse Web content in Web applications </li></ul><ul><li>Rapid prototyping and concept development </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Done! </li></ul></ul>
  5. Available now on over 30 Symbian models Over 30 Symbian devices launched, announced or upcoming Broad-based Device Support on Symbian OS, S60 3.2 and 5.0 devices Latest Firmware Upgrade on Symbian OS, S60 3.1 devices
  6. Available next on Maemo Q4 2009 Q1 2010 Q2 2010 Alpha: Nokia Web Runtime for Maemo 6 Beta: Nokia Web Runtime for Maemo 6 Today: Web Runtime for 10s of millions of Symbian devices
  7. Easy tools turn designers into app developers <ul><li>Develop web widgets using existing popular development tools </li></ul><ul><ul><li>WRT plug-in 2.0 for Aptana Studio </li></ul></ul><ul><ul><li>WRT Extension for Adobe Dreamweaver </li></ul></ul><ul><ul><li>WRT plug-in for Microsoft Visual Studio </li></ul></ul><ul><li>Create, develop, test, preview and deploy WRT widgets for millions of Nokia devices </li></ul><ul><ul><li>Easy transition from web design to widget development </li></ul></ul><ul><ul><li>Opportunity for designers and developers to collaborate on the same projects </li></ul></ul>WRT plug-ins and extension Widgets <ul><li>Create </li></ul><ul><li>New widget </li></ul><ul><li>Import existing widget </li></ul>
  8. Have 60 seconds ? <ul><li>You can cook an egg… </li></ul><ul><li>Or make a widget </li></ul><ul><li>Lets make a widget! </li></ul>
  9. How to: support screen sizes & orientations .button { width: 116px; height: 37px; background: url(images/button_bg.png) no-repeat; color: #ffffff; font-size: 20px; font-weight: bold; margin: 3px; padding-top: 12px; display: inline-block; text-align: center; } <link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <link href=&quot;style_small.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> // Set the correct stylesheet depending on whether // we are running on bigger or smaller screens. applyCorrectStyles: function() { var largeScreen = Helper.isLargeScreen(); document.styleSheets[0].disabled = !largeScreen; document.styleSheets[1].disabled = largeScreen; } .button { width: 80px; height: 25px; background: url(images/small_button_bg.png) no-repeat; color: #ffffff; font-size: 14px; font-weight: bold; margin: 2px; padding-top: 9px; display: inline-block; text-align: center; } 1. Define styles for screen sizes and orientations 2. Add the style sheets to your HTML file 3. Choose the right one based on the screen size CSS CSS HTML JS
  10. <ul><li>Web Runtime widgets can access Platform Services through JavaScript extensions </li></ul><ul><li>Combine web-based data with device context to deliver personalised and relevant services </li></ul><ul><li>Save critical web-based contacts and events locally to create reliable and dependable reminders </li></ul><ul><li>Available in Symbian OS, S60 5.0 and selected S60 3.2 devices </li></ul><ul><li>PS 2.0 Beta adds features, improves syntax </li></ul>Platform Services add context to web content System Messaging Calendar Media Contacts Location Nokia 5800 XpressMusic Camera (beta) var calendarObj=;&quot;, &quot;;, &quot;&quot;); var meetTime = { start: startDateTime, end: endDateTime }; var meetingEntry = { type: &quot;Meeting&quot;, summary: “Meeting summary”, time: meetTime, description: “Meeting description” }; var result = calendarObj.addEntry(meetingEntry);
  11. What do you want in a widget? Want to hear more about Web widgets? 10 tips for Designing Mobile Widgets Rajesh Lal Sunday, 12:30 pm, Room N810