Downloaded 76 times
![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](https://image.slidesharecdn.com/webruntimeinnokiadevices2009q3maemosummitfinal-091013160629-phpapp02/75/Hands-on-development-with-Nokia-Web-Runtime-9-2048.jpg)
Hands-on development with Nokia Web Runtime
- 1. Hands-on development withNokia Web Runtime Oren Levine (oren.levine@nokia.com) Technology Marketing Nokia
- 2. Agenda Web Runtime:the slides What it is and what’s in it for me Web Runtime: the demo Zero to app in 60 seconds Questions?
- 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 itfor me? Symbian Maemo Desktop Cross-platform apps Reuse Web content Create true cross-platform applications and service clients Reuse Web content in Web applications Rapid prototyping and concept development HTML JavaScript CSS Done!
- 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 Develop web widgets using existing popular development tools WRT plug-in 2.0 for Aptana Studio WRT Extension for Adobe Dreamweaver WRT plug-in for Microsoft Visual Studio Create, develop, test, preview and deploy WRT widgets for millions of Nokia devices Easy transition from web design to widget development Opportunity for designers and developers to collaborate on the same projects WRT plug-ins and extension Widgets Create New widget Import existing widget
- 8. Have 60 seconds? You can cook an egg… Or make a widget Lets make a widget!
- 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. Web Runtime widgetscan access Platform Services through JavaScript extensions Combine web-based data with device context to deliver personalised and relevant services Save critical web-based contacts and events locally to create reliable and dependable reminders Available in Symbian OS, S60 5.0 and selected S60 3.2 devices PS 2.0 Beta adds features, improves syntax Platform Services add context to web content System Messaging Calendar Media Contacts Location Nokia 5800 XpressMusic Camera (beta) var calendarObj= com.nokia.device.load("", "com.nokia.device.calendar", ""); var meetTime = { start: startDateTime, end: endDateTime }; var meetingEntry = { type: "Meeting", summary: “Meeting summary”, time: meetTime, description: “Meeting description” }; var result = calendarObj.addEntry(meetingEntry);
- 11. What do youwant 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
- #2 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
- #4 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
- #5 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
- #6 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.
- #7 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.
- #8 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
- #10 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
- #11 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