Basics of web runtime
Upcoming SlideShare
Loading in...5

Basics of web runtime






Total Views
Views on SlideShare
Embed Views



1 Embed 3 3



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Basics of web runtime Basics of web runtime Presentation Transcript

  • Web Runtime Andreas Jakl Senior Technical Consultant Forum Nokia 13 April, 2010
  • 13.04.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 – Who’s able to use my widgets?
  • 13.04.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
  • 13.04.2010 © 2010 Nokia 5 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
  • 13.04.2010 © 2010 Nokia 6 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
  • 13.04.2010 © 2010 Nokia 7 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> </string> the components and <key>MainHTML</key> <string>accuwidget.html</string> features of this specific <key>AllowNetworkAccess</key> widget <true /> ...
  • 13.04.2010 © 2010 Nokia 8 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.
  • 13.04.2010 © 2010 Nokia 9 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; . . . }
  • 13.04.2010 © 2010 Nokia 10 JavaScript Event handling XMLHttpRequest DOM manipulation UI effects UI tweaking
  • 13.04.2010 © 2010 Nokia 11 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.04.2010 © 2010 Nokia 12 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
  • 13.04.2010 © 2010 Nokia 13 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! –
  • 13.04.2010 © 2010 Nokia 14 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
  • 13.04.2010 © 2010 Nokia 15 Device Specifications – Web Runtime So how can I find what devices are supporting this technology? Get more information and resources:
  • Thank You.