SlideShare uma empresa Scribd logo
1 de 15
Baixar para ler offline
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>com.nokia.forum.accuwidget
                                           </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!
    – http://bit.ly/9LkU9g
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?

       http://www.forum.nokia.com/devices/matrix_webruntime_1.html

  Get more information and resources:

       http://www.forum.nokia.com/wrt
Thank You.

Mais conteúdo relacionado

Mais procurados

Nokia Web-Runtime Presentation (Phong Vu)
Nokia Web-Runtime Presentation (Phong Vu)Nokia Web-Runtime Presentation (Phong Vu)
Nokia Web-Runtime Presentation (Phong Vu)Daniel Appelquist
 
Web Browser Demystified
Web Browser DemystifiedWeb Browser Demystified
Web Browser DemystifiedRohit Joshi
 
Terence Barr - what's new in m&e - 24mai2011
Terence Barr - what's new in m&e - 24mai2011Terence Barr - what's new in m&e - 24mai2011
Terence Barr - what's new in m&e - 24mai2011Agora Group
 
Nokia Developer Offering Series 40
Nokia Developer Offering Series 40Nokia Developer Offering Series 40
Nokia Developer Offering Series 40Mohamad Iqbal
 
The dashboarding problem
The dashboarding problemThe dashboarding problem
The dashboarding problemnuria_ruiz
 
Wired2Win Azure Series- New Open World of Windows Azure-0830
Wired2Win Azure Series- New Open World of Windows Azure-0830Wired2Win Azure Series- New Open World of Windows Azure-0830
Wired2Win Azure Series- New Open World of Windows Azure-0830WinWire Technologies Inc
 
Wired2Win Webinar: Build Enterprise Apps with Live Tiles & Notifications with...
Wired2Win Webinar: Build Enterprise Apps with Live Tiles & Notifications with...Wired2Win Webinar: Build Enterprise Apps with Live Tiles & Notifications with...
Wired2Win Webinar: Build Enterprise Apps with Live Tiles & Notifications with...WinWire Technologies Inc
 
Nokia Qt SDK in action - Qt developer days 2010
Nokia Qt SDK in action - Qt developer days 2010Nokia Qt SDK in action - Qt developer days 2010
Nokia Qt SDK in action - Qt developer days 2010Nokia
 
Qt S60 Technical Presentation Fn Stripped
Qt S60 Technical Presentation Fn StrippedQt S60 Technical Presentation Fn Stripped
Qt S60 Technical Presentation Fn StrippedNokia
 
Connect 2014 - AD202 - Get the best out of bootstrap with bootstrap4 x-pages
Connect 2014 - AD202 -  Get the best out of bootstrap with bootstrap4 x-pagesConnect 2014 - AD202 -  Get the best out of bootstrap with bootstrap4 x-pages
Connect 2014 - AD202 - Get the best out of bootstrap with bootstrap4 x-pagesPhilippe Riand
 
Blackberry Development Environment
Blackberry Development EnvironmentBlackberry Development Environment
Blackberry Development EnvironmentPredhin Sapru
 
Mobile Showcase Moblin2
Mobile Showcase Moblin2Mobile Showcase Moblin2
Mobile Showcase Moblin2Tomas Bennich
 
IBM Connect 2014 - KEY108: IBM Collaboration Solutions Application Developmen...
IBM Connect 2014 - KEY108: IBM Collaboration Solutions Application Developmen...IBM Connect 2014 - KEY108: IBM Collaboration Solutions Application Developmen...
IBM Connect 2014 - KEY108: IBM Collaboration Solutions Application Developmen...IBM Connections Developers
 
WRT Introduction P11 2009
WRT Introduction P11 2009WRT Introduction P11 2009
WRT Introduction P11 2009allanbezerra
 
What’s new for Developers in IBM Domino & Domino Designer 9.0.1
What’s new for Developers in IBM Domino & Domino Designer 9.0.1What’s new for Developers in IBM Domino & Domino Designer 9.0.1
What’s new for Developers in IBM Domino & Domino Designer 9.0.1IBM Connections Developers
 
S60 - Over the air
S60 - Over the airS60 - Over the air
S60 - Over the airNokia
 

Mais procurados (16)

Nokia Web-Runtime Presentation (Phong Vu)
Nokia Web-Runtime Presentation (Phong Vu)Nokia Web-Runtime Presentation (Phong Vu)
Nokia Web-Runtime Presentation (Phong Vu)
 
Web Browser Demystified
Web Browser DemystifiedWeb Browser Demystified
Web Browser Demystified
 
Terence Barr - what's new in m&e - 24mai2011
Terence Barr - what's new in m&e - 24mai2011Terence Barr - what's new in m&e - 24mai2011
Terence Barr - what's new in m&e - 24mai2011
 
Nokia Developer Offering Series 40
Nokia Developer Offering Series 40Nokia Developer Offering Series 40
Nokia Developer Offering Series 40
 
The dashboarding problem
The dashboarding problemThe dashboarding problem
The dashboarding problem
 
Wired2Win Azure Series- New Open World of Windows Azure-0830
Wired2Win Azure Series- New Open World of Windows Azure-0830Wired2Win Azure Series- New Open World of Windows Azure-0830
Wired2Win Azure Series- New Open World of Windows Azure-0830
 
Wired2Win Webinar: Build Enterprise Apps with Live Tiles & Notifications with...
Wired2Win Webinar: Build Enterprise Apps with Live Tiles & Notifications with...Wired2Win Webinar: Build Enterprise Apps with Live Tiles & Notifications with...
Wired2Win Webinar: Build Enterprise Apps with Live Tiles & Notifications with...
 
Nokia Qt SDK in action - Qt developer days 2010
Nokia Qt SDK in action - Qt developer days 2010Nokia Qt SDK in action - Qt developer days 2010
Nokia Qt SDK in action - Qt developer days 2010
 
Qt S60 Technical Presentation Fn Stripped
Qt S60 Technical Presentation Fn StrippedQt S60 Technical Presentation Fn Stripped
Qt S60 Technical Presentation Fn Stripped
 
Connect 2014 - AD202 - Get the best out of bootstrap with bootstrap4 x-pages
Connect 2014 - AD202 -  Get the best out of bootstrap with bootstrap4 x-pagesConnect 2014 - AD202 -  Get the best out of bootstrap with bootstrap4 x-pages
Connect 2014 - AD202 - Get the best out of bootstrap with bootstrap4 x-pages
 
Blackberry Development Environment
Blackberry Development EnvironmentBlackberry Development Environment
Blackberry Development Environment
 
Mobile Showcase Moblin2
Mobile Showcase Moblin2Mobile Showcase Moblin2
Mobile Showcase Moblin2
 
IBM Connect 2014 - KEY108: IBM Collaboration Solutions Application Developmen...
IBM Connect 2014 - KEY108: IBM Collaboration Solutions Application Developmen...IBM Connect 2014 - KEY108: IBM Collaboration Solutions Application Developmen...
IBM Connect 2014 - KEY108: IBM Collaboration Solutions Application Developmen...
 
WRT Introduction P11 2009
WRT Introduction P11 2009WRT Introduction P11 2009
WRT Introduction P11 2009
 
What’s new for Developers in IBM Domino & Domino Designer 9.0.1
What’s new for Developers in IBM Domino & Domino Designer 9.0.1What’s new for Developers in IBM Domino & Domino Designer 9.0.1
What’s new for Developers in IBM Domino & Domino Designer 9.0.1
 
S60 - Over the air
S60 - Over the airS60 - Over the air
S60 - Over the air
 

Destaque (10)

Ovi store ppt_serbia
Ovi store ppt_serbiaOvi store ppt_serbia
Ovi store ppt_serbia
 
Java me introduction
Java me   introductionJava me   introduction
Java me introduction
 
Basics of web runtime
Basics of web runtimeBasics of web runtime
Basics of web runtime
 
Mobile user experience intro
Mobile user experience   introMobile user experience   intro
Mobile user experience intro
 
01 curso de java introducción
01 curso de  java introducción01 curso de  java introducción
01 curso de java introducción
 
Ppt java
Ppt javaPpt java
Ppt java
 
Java an introduction to programming
Java an introduction to programmingJava an introduction to programming
Java an introduction to programming
 
Basics of web runtime
Basics of web runtimeBasics of web runtime
Basics of web runtime
 
Java me introduction
Java me   introductionJava me   introduction
Java me introduction
 
политические партии и движения
политические партии и движенияполитические партии и движения
политические партии и движения
 

Semelhante a Basics of web runtime

Basics of WRT (Web Runtime)
Basics of WRT (Web Runtime)Basics of WRT (Web Runtime)
Basics of WRT (Web Runtime)Andreas Jakl
 
Miha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeMiha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeNokiaAppForum
 
Developing Applications with Nokia WRT
Developing Applications with Nokia WRTDeveloping Applications with Nokia WRT
Developing Applications with Nokia WRTPrashanth GN
 
What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5Vinayak Tavargeri
 
Treinamento S60 WRT - CETELI UFAM INDT
Treinamento S60 WRT - CETELI UFAM INDTTreinamento S60 WRT - CETELI UFAM INDT
Treinamento S60 WRT - CETELI UFAM INDTallanbezerra
 
WRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAirWRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAirpetrosoininen
 
Udvikling af apps til mobile enheder med IBM Worklight, Christina Møller, IBM
Udvikling af apps til mobile enheder med IBM Worklight, Christina Møller, IBMUdvikling af apps til mobile enheder med IBM Worklight, Christina Møller, IBM
Udvikling af apps til mobile enheder med IBM Worklight, Christina Møller, IBMIBM Danmark
 
S60 3rd FP2 Widgets
S60 3rd FP2 WidgetsS60 3rd FP2 Widgets
S60 3rd FP2 Widgetsromek
 
What's New In InduSoft Web Studio 8.1 + SP3
What's New In InduSoft Web Studio 8.1 + SP3What's New In InduSoft Web Studio 8.1 + SP3
What's New In InduSoft Web Studio 8.1 + SP3AVEVA
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersSascha Corti
 
InduSoft Web Studio 8.0 + SP1 + Patch One Review
InduSoft Web Studio 8.0 + SP1 + Patch One ReviewInduSoft Web Studio 8.0 + SP1 + Patch One Review
InduSoft Web Studio 8.0 + SP1 + Patch One ReviewAVEVA
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginnersVineeth N Krishnan
 
Building Multi-Channel Data-Aware Applications
Building Multi-Channel Data-Aware ApplicationsBuilding Multi-Channel Data-Aware Applications
Building Multi-Channel Data-Aware Applicationscjolif
 

Semelhante a Basics of web runtime (20)

Basics of WRT (Web Runtime)
Basics of WRT (Web Runtime)Basics of WRT (Web Runtime)
Basics of WRT (Web Runtime)
 
Miha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeMiha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web Runtime
 
Developing Applications with Nokia WRT
Developing Applications with Nokia WRTDeveloping Applications with Nokia WRT
Developing Applications with Nokia WRT
 
What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5
 
Treinamento S60 WRT - CETELI UFAM INDT
Treinamento S60 WRT - CETELI UFAM INDTTreinamento S60 WRT - CETELI UFAM INDT
Treinamento S60 WRT - CETELI UFAM INDT
 
WRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAirWRT Widgets Masterclass - OverTheAir
WRT Widgets Masterclass - OverTheAir
 
Udvikling af apps til mobile enheder med IBM Worklight, Christina Møller, IBM
Udvikling af apps til mobile enheder med IBM Worklight, Christina Møller, IBMUdvikling af apps til mobile enheder med IBM Worklight, Christina Møller, IBM
Udvikling af apps til mobile enheder med IBM Worklight, Christina Møller, IBM
 
S60 3rd FP2 Widgets
S60 3rd FP2 WidgetsS60 3rd FP2 Widgets
S60 3rd FP2 Widgets
 
DevCon5 (July 2014) - Acision SDK
DevCon5 (July 2014) - Acision SDKDevCon5 (July 2014) - Acision SDK
DevCon5 (July 2014) - Acision SDK
 
Worklight Overview
Worklight OverviewWorklight Overview
Worklight Overview
 
What's New In InduSoft Web Studio 8.1 + SP3
What's New In InduSoft Web Studio 8.1 + SP3What's New In InduSoft Web Studio 8.1 + SP3
What's New In InduSoft Web Studio 8.1 + SP3
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
InduSoft Web Studio 8.0 + SP1 + Patch One Review
InduSoft Web Studio 8.0 + SP1 + Patch One ReviewInduSoft Web Studio 8.0 + SP1 + Patch One Review
InduSoft Web Studio 8.0 + SP1 + Patch One Review
 
Dot Net Nuke
Dot Net NukeDot Net Nuke
Dot Net Nuke
 
Dot netnuke
Dot netnukeDot netnuke
Dot netnuke
 
Html5
Html5Html5
Html5
 
Chinnasamy Manickam
Chinnasamy ManickamChinnasamy Manickam
Chinnasamy Manickam
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
Building Multi-Channel Data-Aware Applications
Building Multi-Channel Data-Aware ApplicationsBuilding Multi-Channel Data-Aware Applications
Building Multi-Channel Data-Aware Applications
 
Html5
Html5Html5
Html5
 

Basics of web runtime

  • 1. Web Runtime Andreas Jakl Senior Technical Consultant Forum Nokia 13 April, 2010
  • 2. 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?
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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>com.nokia.forum.accuwidget </string> the components and <key>MainHTML</key> <string>accuwidget.html</string> features of this specific <key>AllowNetworkAccess</key> widget <true /> ...
  • 7. 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.
  • 8. 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; . . . }
  • 9. 13.04.2010 © 2010 Nokia 10 JavaScript Event handling XMLHttpRequest DOM manipulation UI effects UI tweaking
  • 10. 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
  • 11. 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
  • 12. 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! – http://bit.ly/9LkU9g
  • 13. 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
  • 14. 13.04.2010 © 2010 Nokia 15 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