Your SlideShare is downloading. ×
0
Web Runtime
Path of the fast development


Andreas Jakl
Senior Technical Consultant
Forum Nokia

                         ...
18.06.2010   © 2010 Nokia   2




Contents
  – Nokia developer offering in nutshell
  – Web runtime widgets – overview
  –...
18.06.2010   © 2010 Nokia   3




The Developer Offering – Simplification
   Via Cross platform tools, Ovi Services and st...
18.06.2010   © 2010 Nokia   4




Internet Evolution




   Full HTML browser   Mobile-optimized            Widgets offer ...
18.06.2010   © 2010 Nokia   5




What are Widgets?
• Web sites often not suitable for small
  screens
• Widgets are “loca...
18.06.2010   © 2010 Nokia   6




Definition of widget
• Lightweight mobile applications
   – Give users easy access to th...
18.06.2010   © 2010 Nokia   7




WRT Widget Ingredients
                                         Widget
 info.plist (mand...
18.06.2010   © 2010 Nokia   8




info.plist
                                  ...
                                  <plis...
18.06.2010   © 2010 Nokia   9




HTML                       <html>
                            <head>
• Defines the widge...
18.06.2010   © 2010 Nokia   10




CSS                                // Class selector to define common style
           ...
18.06.2010   © 2010 Nokia   11




JavaScript
     Event handling
               XMLHttpRequest
   DOM manipulation
      ...
18.06.2010   © 2010 Nokia   12




Widgets and Platform Services
•   Platform Services
     – Framework for abstracting ac...
18.06.2010   © 2010 Nokia   13




Home Screen
                                                             Home screen vi...
18.06.2010   © 2010 Nokia   14




Guarana UI – jQuery based UI library
• UI Library for your widget
    – Set of customiz...
18.06.2010   © 2010 Nokia   15




Web Developer to Widget Developer
•   Develop web widgets using popular development
   ...
18.06.2010   © 2010 Nokia   16




Device Specifications – Web Runtime

  So how can I find what devices are supporting th...
18.06.2010   © 2010 Nokia   17




Ovi App Wizard
•   Mobilize your web content (RSS / Atom)
    for the Ovi Store
     – ...
Thank You.
Want to learn more?
www.forum.nokia.com/wrt
Upcoming SlideShare
Loading in...5
×

Basics of WRT (Web Runtime)

5,139

Published on

Develop web applications using the Nokia Web Runtime (WRT) technology. Use standard web technology like HTML, JavaScript and CSS to create an app-like experience and also to access platform features like the camera or contacts.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,139
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
101
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Basics of WRT (Web Runtime)"

  1. 1. Web Runtime Path of the fast development Andreas Jakl Senior Technical Consultant Forum Nokia 18 June, 2010 V2.0.0
  2. 2. 18.06.2010 © 2010 Nokia 2 Contents – Nokia developer offering in nutshell – Web runtime widgets – overview – Let’s take a closer look from tech perspective – How to utilize platform services? – Adding value with home screen – Ovi App Wizard – Who’s able to use my widgets?
  3. 3. 18.06.2010 © 2010 Nokia 3 The Developer Offering – Simplification Via Cross platform tools, Ovi Services and strong ecosystem partners Innovation (and transparency) through open source Frameworks Services Platforms
  4. 4. 18.06.2010 © 2010 Nokia 4 Internet Evolution Full HTML browser Mobile-optimized Widgets offer Widgets + Platform lets mobile sites serve specific focused, optimized Services offer consumers needs and tasks front-ends to Web- seamless integration experience the based information and of the Web with complete Web services personal context
  5. 5. 18.06.2010 © 2010 Nokia 5 What are Widgets? • Web sites often not suitable for small screens • Widgets are “local websites” on the device – Rendered using browser – Fetch web data using AJAX (Web 2.0) – Look & feel like native applications – But: easy development with HTML & JavaScript
  6. 6. 18.06.2010 © 2010 Nokia 6 Definition of widget • Lightweight mobile applications – Give users easy access to the web • The easiest way to bring web-based business to millions of Nokia mobile devices Application like delivery Visible in the UI like native apps Standards-based HTML, Javascript, and CSS
  7. 7. 18.06.2010 © 2010 Nokia 7 WRT Widget Ingredients Widget info.plist (mandatory) properties [name].html (mandatory) + icon.png HTML [name].css backbone [name].js PNG icon + CSS layout Root + folder! js logic
  8. 8. 18.06.2010 © 2010 Nokia 8 info.plist ... <plist version="1.0"> • The heart of the widget <dict> – Defines the widget <key>DisplayName</key> <string>AccuWidget</string> – XML text file <key>Identifier</key> – Provides information about <string>com.nokia.forum.accuwidget </string> the components and <key>MainHTML</key> <string>accuwidget.html</string> features of this specific <key>AllowNetworkAccess</key> widget <true /> ...
  9. 9. 18.06.2010 © 2010 Nokia 9 HTML <html> <head> • Defines the widget .. </head> <body id="body"> structure <div id=‘mainView’> <span class=‘title’>Front view</span> – Construct views </div> <div id=‘subView1’ class=‘subView’> with static HTML <p class=‘title’>Back view</p> </div> elements or … <div id=‘subView2’ class=‘subView’> <p class=‘title’>Config view</p> </div> – Create dynamically </body> </html> with JavaScript at runtime.
  10. 10. 18.06.2010 © 2010 Nokia 10 CSS // Class selector to define common style for similar components .title { font-size: 26px; • Style and layout information } color: blue; .subView { – Defines how to display } display: none HTML elements: position, // Id selector to define a unique style for a unique component color, size etc. #mainView { font-size: 16px; – Embed CSS in the HTML file color: red; text-align: center; or import from an external } // Pseudo-class selector to design a stylesheet pattern style div.subview div { margin: 10px 0 0 0; padding: 20px 20px 20px 20px; . . . }
  11. 11. 18.06.2010 © 2010 Nokia 11 JavaScript Event handling XMLHttpRequest DOM manipulation UI effects UI tweaking
  12. 12. 18.06.2010 © 2010 Nokia 12 Widgets and Platform Services • Platform Services – Framework for abstracting access to a set of services – Runtime specific bindings and security management – Access through JavaScript • Example use cases: – Combine Web-based data with local context to deliver personalized, relevant services – Save critical Web-based contacts and events locally to create reliable, dependable reminders
  13. 13. 18.06.2010 © 2010 Nokia 13 Home Screen Home screen view Full screen view • What it is for the end-user? – Add / remove home screen content – Tap content to open widget full screen view • Home screen (HS) enabled WRT widget implements 2 views – Home screen view – Full screen view • HS communicates to widget when end-user interacts with HS – onload() and onresize() as widget side interface functions – JavaScript code to determine current view size – correct view rendered
  14. 14. 18.06.2010 © 2010 Nokia 14 Guarana UI – jQuery based UI library • UI Library for your widget – Set of customizable UI elements, application frameworks, and templates – Based on jQuery – Complete package of components, documentation and examples from Forum Nokia web pages • Go and check out! – http://bit.ly/9LkU9g
  15. 15. 18.06.2010 © 2010 Nokia 15 Web Developer to Widget Developer • Develop web widgets using 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 – Designers and developers collaborate easily WRT plug-ins Widgets and extension
  16. 16. 18.06.2010 © 2010 Nokia 16 Device Specifications – Web Runtime So how can I find what devices are supporting this technology? http://www.forum.nokia.com/devices/matrix_webruntime_1.html Get more information and resources: http://www.forum.nokia.com/wrt
  17. 17. 18.06.2010 © 2010 Nokia 17 Ovi App Wizard • Mobilize your web content (RSS / Atom) for the Ovi Store – Free to use. No registration fee – Open to all businesses and individuals – No programming skills required – Only takes minutes to create – Apps delivered into Ovi Store within 24 hours of submission – Optional: Monetize using included ad feature or through app purchase – Distribute apps that work on nearly every Nokia handset to millions • Currently an open beta – http://ovi.com/appwizard
  18. 18. Thank You. Want to learn more? www.forum.nokia.com/wrt
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×