SlideShare ist ein Scribd-Unternehmen logo
1 von 18
Downloaden Sie, um offline zu lesen
Web Runtime
Path of the fast development


Andreas Jakl
Senior Technical Consultant
Forum Nokia

                               18 June, 2010
                                      V2.0.0
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?
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
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
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
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
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
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 />
                                  ...
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.
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;
                                     . . .
                                   }
18.06.2010   © 2010 Nokia   11




JavaScript
     Event handling
               XMLHttpRequest
   DOM manipulation
          UI effects
               UI tweaking
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
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
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
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
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
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
Thank You.
Want to learn more?
www.forum.nokia.com/wrt

Weitere ähnliche Inhalte

Ähnlich wie Basics of WRT (Web Runtime)

Developing Applications with Nokia WRT
Developing Applications with Nokia WRTDeveloping Applications with Nokia WRT
Developing Applications with Nokia WRTPrashanth GN
 
Treinamento S60 WRT - CETELI UFAM INDT
Treinamento S60 WRT - CETELI UFAM INDTTreinamento S60 WRT - CETELI UFAM INDT
Treinamento S60 WRT - CETELI UFAM INDTallanbezerra
 
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
 
S60 3rd FP2 Widgets
S60 3rd FP2 WidgetsS60 3rd FP2 Widgets
S60 3rd FP2 Widgetsromek
 
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
 
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...dbarkoe
 
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
 
Dynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and MobileDynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and Mobilepeychevi
 
WRT Introduction P11 2009
WRT Introduction P11 2009WRT Introduction P11 2009
WRT Introduction P11 2009allanbezerra
 
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
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Adam Lu
 
IBM Worklight - Technical Overview
IBM Worklight - Technical OverviewIBM Worklight - Technical Overview
IBM Worklight - Technical OverviewIIC_Barcelona
 
61850easy Test Tool for IEC 61850 Networks & Systems
61850easy Test Tool for IEC 61850 Networks & Systems61850easy Test Tool for IEC 61850 Networks & Systems
61850easy Test Tool for IEC 61850 Networks & SystemsGE Grid Solutions
 

Ähnlich wie Basics of WRT (Web Runtime) (20)

Basics of web runtime
Basics of web runtimeBasics of web runtime
Basics of web runtime
 
Basics of web runtime
Basics of web runtimeBasics of web runtime
Basics of web runtime
 
Basics of web runtime
Basics of web runtimeBasics of web runtime
Basics of web runtime
 
Basics of web runtime
Basics of web runtimeBasics of web runtime
Basics of web runtime
 
Developing Applications with Nokia WRT
Developing Applications with Nokia WRTDeveloping Applications with Nokia WRT
Developing Applications with Nokia WRT
 
Treinamento S60 WRT - CETELI UFAM INDT
Treinamento S60 WRT - CETELI UFAM INDTTreinamento S60 WRT - CETELI UFAM INDT
Treinamento S60 WRT - CETELI UFAM INDT
 
Nokia Web-Runtime Presentation (Phong Vu)
Nokia Web-Runtime Presentation (Phong Vu)Nokia Web-Runtime Presentation (Phong Vu)
Nokia Web-Runtime Presentation (Phong Vu)
 
S60 3rd FP2 Widgets
S60 3rd FP2 WidgetsS60 3rd FP2 Widgets
S60 3rd FP2 Widgets
 
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
 
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Fram...
 
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
 
Dynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and MobileDynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and Mobile
 
WRT Introduction P11 2009
WRT Introduction P11 2009WRT Introduction P11 2009
WRT Introduction P11 2009
 
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
 
Html5
Html5Html5
Html5
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
Worklight Overview
Worklight OverviewWorklight Overview
Worklight Overview
 
IBM Worklight - Technical Overview
IBM Worklight - Technical OverviewIBM Worklight - Technical Overview
IBM Worklight - Technical Overview
 
61850easy Test Tool for IEC 61850 Networks & Systems
61850easy Test Tool for IEC 61850 Networks & Systems61850easy Test Tool for IEC 61850 Networks & Systems
61850easy Test Tool for IEC 61850 Networks & Systems
 

Mehr von Andreas Jakl

Create Engaging Healthcare Experiences with Augmented Reality
Create Engaging Healthcare Experiences with Augmented RealityCreate Engaging Healthcare Experiences with Augmented Reality
Create Engaging Healthcare Experiences with Augmented RealityAndreas Jakl
 
AR / VR Interaction Development with Unity
AR / VR Interaction Development with UnityAR / VR Interaction Development with Unity
AR / VR Interaction Development with UnityAndreas Jakl
 
Android Development with Kotlin, Part 3 - Code and App Management
Android Development with Kotlin, Part 3 - Code and App ManagementAndroid Development with Kotlin, Part 3 - Code and App Management
Android Development with Kotlin, Part 3 - Code and App ManagementAndreas Jakl
 
Android Development with Kotlin, Part 2 - Internet Services and JSON
Android Development with Kotlin, Part 2 - Internet Services and JSONAndroid Development with Kotlin, Part 2 - Internet Services and JSON
Android Development with Kotlin, Part 2 - Internet Services and JSONAndreas Jakl
 
Android Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - IntroductionAndroid Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - IntroductionAndreas Jakl
 
Android and NFC / NDEF (with Kotlin)
Android and NFC / NDEF (with Kotlin)Android and NFC / NDEF (with Kotlin)
Android and NFC / NDEF (with Kotlin)Andreas Jakl
 
Basics of Web Technologies
Basics of Web TechnologiesBasics of Web Technologies
Basics of Web TechnologiesAndreas Jakl
 
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & More
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & MoreBluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & More
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & MoreAndreas Jakl
 
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?Andreas Jakl
 
Mobile Test Automation
Mobile Test AutomationMobile Test Automation
Mobile Test AutomationAndreas Jakl
 
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...Andreas Jakl
 
WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows Phone
WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows PhoneWinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows Phone
WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows PhoneAndreas Jakl
 
Nokia New Asha Platform Developer Training
Nokia New Asha Platform Developer TrainingNokia New Asha Platform Developer Training
Nokia New Asha Platform Developer TrainingAndreas Jakl
 
Windows Phone 8 NFC Quickstart
Windows Phone 8 NFC QuickstartWindows Phone 8 NFC Quickstart
Windows Phone 8 NFC QuickstartAndreas Jakl
 
Windows (Phone) 8 NFC App Scenarios
Windows (Phone) 8 NFC App ScenariosWindows (Phone) 8 NFC App Scenarios
Windows (Phone) 8 NFC App ScenariosAndreas Jakl
 
Windows 8 Platform NFC Development
Windows 8 Platform NFC DevelopmentWindows 8 Platform NFC Development
Windows 8 Platform NFC DevelopmentAndreas Jakl
 
NFC Development with Qt - v2.2.0 (5. November 2012)
NFC Development with Qt - v2.2.0 (5. November 2012)NFC Development with Qt - v2.2.0 (5. November 2012)
NFC Development with Qt - v2.2.0 (5. November 2012)Andreas Jakl
 
06 - Qt Communication
06 - Qt Communication06 - Qt Communication
06 - Qt CommunicationAndreas Jakl
 
05 - Qt External Interaction and Graphics
05 - Qt External Interaction and Graphics05 - Qt External Interaction and Graphics
05 - Qt External Interaction and GraphicsAndreas Jakl
 

Mehr von Andreas Jakl (20)

Create Engaging Healthcare Experiences with Augmented Reality
Create Engaging Healthcare Experiences with Augmented RealityCreate Engaging Healthcare Experiences with Augmented Reality
Create Engaging Healthcare Experiences with Augmented Reality
 
AR / VR Interaction Development with Unity
AR / VR Interaction Development with UnityAR / VR Interaction Development with Unity
AR / VR Interaction Development with Unity
 
Android Development with Kotlin, Part 3 - Code and App Management
Android Development with Kotlin, Part 3 - Code and App ManagementAndroid Development with Kotlin, Part 3 - Code and App Management
Android Development with Kotlin, Part 3 - Code and App Management
 
Android Development with Kotlin, Part 2 - Internet Services and JSON
Android Development with Kotlin, Part 2 - Internet Services and JSONAndroid Development with Kotlin, Part 2 - Internet Services and JSON
Android Development with Kotlin, Part 2 - Internet Services and JSON
 
Android Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - IntroductionAndroid Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - Introduction
 
Android and NFC / NDEF (with Kotlin)
Android and NFC / NDEF (with Kotlin)Android and NFC / NDEF (with Kotlin)
Android and NFC / NDEF (with Kotlin)
 
Basics of Web Technologies
Basics of Web TechnologiesBasics of Web Technologies
Basics of Web Technologies
 
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & More
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & MoreBluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & More
Bluetooth Beacons - Bluetooth 5, iBeacon, Eddystone, Arduino, Windows 10 & More
 
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?
Which new scenarios are enabled by Windows 10 for NFC, Bluetooth LE & Beacons?
 
Mobile Test Automation
Mobile Test AutomationMobile Test Automation
Mobile Test Automation
 
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
Qt App Development - Cross-Platform Development for Android, iOS, Windows Pho...
 
WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows Phone
WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows PhoneWinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows Phone
WinJS, Apache Cordova & NFC - HTML5 apps for Android and Windows Phone
 
Nokia New Asha Platform Developer Training
Nokia New Asha Platform Developer TrainingNokia New Asha Platform Developer Training
Nokia New Asha Platform Developer Training
 
Windows Phone 8 NFC Quickstart
Windows Phone 8 NFC QuickstartWindows Phone 8 NFC Quickstart
Windows Phone 8 NFC Quickstart
 
Windows (Phone) 8 NFC App Scenarios
Windows (Phone) 8 NFC App ScenariosWindows (Phone) 8 NFC App Scenarios
Windows (Phone) 8 NFC App Scenarios
 
Windows 8 Platform NFC Development
Windows 8 Platform NFC DevelopmentWindows 8 Platform NFC Development
Windows 8 Platform NFC Development
 
NFC Development with Qt - v2.2.0 (5. November 2012)
NFC Development with Qt - v2.2.0 (5. November 2012)NFC Development with Qt - v2.2.0 (5. November 2012)
NFC Development with Qt - v2.2.0 (5. November 2012)
 
06 - Qt Communication
06 - Qt Communication06 - Qt Communication
06 - Qt Communication
 
05 - Qt External Interaction and Graphics
05 - Qt External Interaction and Graphics05 - Qt External Interaction and Graphics
05 - Qt External Interaction and Graphics
 
04 - Qt Data
04 - Qt Data04 - Qt Data
04 - Qt Data
 

Kürzlich hochgeladen

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 

Kürzlich hochgeladen (20)

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 

Basics of WRT (Web Runtime)

  • 1. Web Runtime Path of the fast development Andreas Jakl Senior Technical Consultant Forum Nokia 18 June, 2010 V2.0.0
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 18.06.2010 © 2010 Nokia 11 JavaScript Event handling XMLHttpRequest DOM manipulation UI effects UI tweaking
  • 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. 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. 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. 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. 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. 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. Thank You. Want to learn more? www.forum.nokia.com/wrt