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 http://www.forum.nokia.com/Technology_Topics/Web_Technologies/Web_Runtime/
Decarbonising Commercial Real Estate: The Role of Operational Performance
Hands-on development with Nokia Web Runtime
1.
2.
3. What is a “Web Runtime”? A software development environment that lets developers use standard web technology to create first-class applications
4.
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.
8.
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="style.css" rel="stylesheet" type="text/css"> <link href="style_small.css" rel="stylesheet" type="text/css"> // 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.
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
Editor's Notes
Last modified October 1, 2009 Change log: 1 Oct 2009: Removed device image in slide 8 Reordered slides: “how it works” before PS slide. Removed PS 2.0 slide, added note about beta to PS slide. Replaced background image in last slide, removed Nokia logo. Added roadmap slide
Web content rendering and AJAX programming (HTML, CSS, JavaScript) Handling media content natively or with the help of scriptable plug-ins JavaScript interfaces to on-device functionality with access control (security) Ability to create an application-like experience without browser UI Context aware with platform services (with Symbian OS, S60 5th edition 5.0) Web Runtime = DOM + CSS + JavaScript engine + JavaScript Service API binding + Netscape plug-in RIA (Rich Internet Applications) = Webkit + QT + codecs (platform services) Context Aware with Platform Services (with Symbian OS, S60 5th edition 5.0 ): Location and Landmarks Contacts, Calendar and Messaging Media Management Application Manager, System Info, Logging, and Sensors More about this on slide #25
What’s in it for me as a Maemo developer? For native developers, WRT can be used for rapid prototyping and concept development, as it uses standard HTML and interpreted JavaScript. No need for compilation, just write and deploy. For Web services, you can reuse Web content and Web development skills to create first-class applications
Nokia’s Web Runtime is currently supported in over 30 models of Symbian S60 devices, and not just from Nokia. For example, there are several Samsung and LG devices, built on the same Symbian OS, that support WRT.
S60 and Aptana & Dreamweaver plugin with S60.wgz support available today. Harmattan a.k.a. Maemo 6 will have WRT as a key part of the platform.
We support our WRT with tools, aimed at the needs of existing Web developers. Web developers use Web tools, so we are reaching out to them through the tools they already know and use. Opportunity for designers and developers to collaborate on the same projects: Designers use Dreamweaver and other popular graphic design tools (like Photoshop) to create widget design and user interface. JavaScript developers import those graphics into Aptana Studio and add the application logic
Ref. Janne Heikinen’s keynote about importance of supporting portrait and landscape in Maemo 6 Here’s an example of how HTML, CSS, and JavaScript come together to make a Web application work on devices with different screen sizes Several advantages of this approach: You can write your application independent of the UI design. A professional designer can work on the look and feel in parallel, and just provide the style sheets It’s easy to test different UI options: just modify the style sheet and run the widget. No need to compile the program again. Leaves more time for iterative design Gets very close to “write once, run anywhere”: ship one version of your application that works in a large number of devices
Web Runtime widgets can add device context and other data using JavaScript extensions that link to the underlying platform Platform Services supported in selected Symbian OS, S60 3.2 devices: We’re improving and expanding our support for these Platform Services, and are active in efforts to create common standards for these interfaces in the W3C PS 2.0 supports the W3C Geolocation API: http://dev.w3.org/geo/api/spec-source.html W3C Device APIs and Policy Working Group: http://www.w3.org/2009/05/DeviceAPICharter.html “ The mission of the Device APIs and Policy Working Group is to create client-side APIs that enable the development of web Applications and web Widgets that interact with devices services such as Calendar, Contacts, Camera, etc. Additionally, the group will produce a framework for the expression of security policies that govern access to security-critical APIs (such as the APIs listed previously). “ API’s submitted by Nokia: Calendar Camera Contacts (aka Address Book) Messaging System Information NOTE: Platform Services 1.0 will be deprecated in future releases of Nokia WRT, as Nokia moves to a more standards-compliant framework
![[object Object],[object Object],[object Object],[object Object]](https://image.slidesharecdn.com/webruntimeinnokiadevices2009q3maemosummitfinal-091013160629-phpapp02/85/Hands-on-development-with-Nokia-Web-Runtime-1-320.jpg)
![Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)