Bringing your Web investment
to Nokia devices

Kenneth Rohde Christiansen
Bossa Conference, Manaus, March 2010
A LOOK AT QT’S WEB AND HYBRID OFFERINGS
A LOOK AT QT’S WEB AND HYBRID OFFERINGS

WHO AM I?
A LOOK AT QT’S WEB AND HYBRID OFFERINGS

WHO AM I? KENNETH R. CHRISTIANSEN
A LOOK AT QT’S WEB AND HYBRID OFFERINGS

WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
A LOOK AT QT’S WEB AND HYBRID OFFERINGS

WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
2+ YEAR WORKING WITH WEBKIT
A LOOK AT QT’S WEB AND HYBRID OFFERINGS

WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
2+ YEAR WORKING WITH WEBKIT 2+ ...
A LOOK AT QT’S WEB AND HYBRID OFFERINGS

WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
2+ YEAR WORKING WITH WEBKIT 2+ ...
INTRODUCING
THE WORLD WIDE WEB
Looking back at the last 10 years
The impach of Web as a technology




  If somehing has had a huge impact on the
  last ...
Looking back at the last 10 years
The impach of Web as a technology




  If somehing has had a huge impact on the
  last ...
Looking back at the last 10 years
The impach of Web as a technology




  If somehing has had a huge impact on the
  last ...
Looking back at the last 10 years
The impach of Web as a technology




     It is changing how we write applications,
   ...
AJAX, the playfield changer
The impach of Web as a technology




     AJAX was the next big playfield changer
AJAX, the playfield changer
The impach of Web as a technology




     AJAX was the next big playfield changer
             ...
AJAX, the playfield changer
The impach of Web as a technology




     AJAX was the next big playfield changer
             ...
webapps
Missing functionality, lots of
assumptions about being
online, hard to develop for
webapps
JS libraries, the new HTML5 features have made this
easier but at the same time the user requirements for
applicat...
webapps
The fact is that the web has not designed for apps, but
patched for it.

     That said, things are about to chang...
webapps
Apps are different in contents
webapps
Apps are different in contents

  More connected
webapps
Apps are different in contents

  More connected
  Aggregating information
webapps
Apps are different in contents

  More connected
  Aggregating information
  Run unmodified almost everywhere
webapps
Apps are different in contents

  More connected
  Aggregating information
  Run unmodified almost everywhere
  Dep...
webapps
Apps are different in contents

  More connected
  Aggregating information
  Run unmodified almost everywhere
  Dep...
CHROME
  OS                         webapps
                             NOKIA OVI
             PALM            SERVICES
 ...
A phone without a great Web browser is soon to be the
past / Video Games build web services and communities
around their g...
A phone without a great Web browser is soon to be the
past / Video Games build web services and communities
around their g...
SO WHAT ARE
THE NOKIA OFFERINGS?
Today we will look at what you choices are
when targeting Nokia devices
                Right now and in the near future

...
So you have decided to make a web app

       Some common reasons
        - Have existing web service
        - Want to sh...
USING THE DEFAULT BROWSER

     Symbian comes w/ limited WebKit browser
     - S60 Port, not Qt-based

     Maemo comes wi...
Downsides...

      It’s a browser, there’s chrome, yack!
      Test the Ovi store on N900 for yourself

      MicroB does...
What are the competitors doing?

    iPhone WebKit has extensions to hide the chrome


     Still, no fixed elements. Solut...
ROLLING YOUR OWN THING
 To make a web app, you basically need a launcher
 providing a web view + web contents

 Create a w...
...but wait a sec
  Rolling your own thing involves “native code”

  Why would we ever want to go there?
  Isn’t the web a...
...but wait a sec
  Rolling your own thing involves “native code”

  Why would we ever want to go there?
  Isn’t the web a...
Use-Case
Imagine you are a settop box company. Your boxes
has a tv and a web interface, plus a nice web site

Sharing and ...
Introducing the Qt bridge
With Qt WebKit you can expose QObject derived
instances to the JavaScript runtime

Enabling devi...
Want more?
We also allow you to create QGraphicsItem or
QWidget based plugins for the web view.
Want more?
We also allow you to create QGraphicsItem or
QWidget based plugins for the web view.

Together we call this wro...
NON-NATIVE
APPROACH, DOES IT EXIST?
Out of the box Web runtime?
How to go about it




                On the Symbian platform
                WebRuntime prov...
Web Widgets 1.0 in a nutshell
What is it all about



               A Zip file containing resources:
                     ...
So what is the point?
What is it all about




       Widgets 1.0 provides spec on it’s own for adding for
       instance...
View Mode Media Feature
Just an example




     Widgets 1.0 specifies 4 modes

     mini: a docket representation for exam...
View Mode Media Feature
Just an example




  It will also be possible to change mode via JS (a DOM
  event) as well as re...
Widgets 1.0 all in all
A summary




 Provides the launcher for making installable web apps.
 + additional security / vali...
WEB RUNTIME
== WIDGETS 1.0 ?
Back to Web Runtime
Relation to Widgets 1.0




      Web Runtime is based on, but not limited to W 1.0

      - will prov...
Back to Web Runtime
Relation to Widgets 1.0




      Platform Services JavaScript API accessed through
      the nokia.de...
Platform support
Can I use it?




       But this was all Symbian only?


       No... At Maemo Summit ’09 it was announc...
What does this mean?
Qt Webkit based Web Runtime




   it means WebKit!
        Just like the iPhone / Android - all apps...
Mobile WebKit
What to be aware of




  Due to nice working, fast scrolling, zooming etc,
  Mobile WebKit implementations:...
WebKit feature
There are some positive point in using WebKit as wel




  WebKit provides many CSS extensions
  - most pus...
WebKit feature
There are some positive point in using WebKit as wel




   Examples:


   WebDatabase, Local/Session, Web ...
It is all about the UX
The user interface is also quite important today




   For making interfaces the most interesting ...
Want real OpenGL
The user interface is also quite important today




   Qt WebKit supports WebGL, an OpenGL ES JavaScript...
Back to that UI header issue
Fixed elements, a no-go




    The CSS transformations + HW acceleration, or
    actually th...
Back to that UI header issue
Fixed elements, a no-go




  So far the most successful implementation of this is the
  Past...
ROUNDING UP
Rounding up
Nokia devices




  Want do do web apps targeting Nokia Devices?


     Web Runtime is the answer, but
     Sy...
Rounding up
Other devices




  Want to do web apps targeting other kind of devices
  such as custom hardware, settop boxe...
Rounding up
Two good approaches




 Both approaches uses Qt WebKit


      reuse of application code and service is possi...
Qt WebKit
A good WebKit port all around




 Qt WebKit provides a similar
 experience as other desktop and
 mobile ports o...
Qt WebKit
A good WebKit port all around




 ...but we are catching up quickly and our upcoming

        Qt WebKit 2.0 add...
Thanks for listening
I hope the talk provided some insights into the current and
future Nokia Web offerings



KENNETH ROH...
Upcoming SlideShare
Loading in …5
×

Bringing your Web investment to Nokia devices

3,680 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,680
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
56
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Bringing your Web investment to Nokia devices

  1. Bringing your Web investment to Nokia devices Kenneth Rohde Christiansen Bossa Conference, Manaus, March 2010
  2. A LOOK AT QT’S WEB AND HYBRID OFFERINGS
  3. A LOOK AT QT’S WEB AND HYBRID OFFERINGS WHO AM I?
  4. A LOOK AT QT’S WEB AND HYBRID OFFERINGS WHO AM I? KENNETH R. CHRISTIANSEN
  5. A LOOK AT QT’S WEB AND HYBRID OFFERINGS WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
  6. A LOOK AT QT’S WEB AND HYBRID OFFERINGS WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER 2+ YEAR WORKING WITH WEBKIT
  7. A LOOK AT QT’S WEB AND HYBRID OFFERINGS WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER 2+ YEAR WORKING WITH WEBKIT 2+ YEARS WORKING WITH APP DEVELOPMENT USING DECLARATIVE LANGUAGE
  8. A LOOK AT QT’S WEB AND HYBRID OFFERINGS WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER 2+ YEAR WORKING WITH WEBKIT 2+ YEARS WORKING WITH APP DEVELOPMENT USING DECLARATIVE LANGUAGE NOKIA TECHNOLOGY INSTITUTE, INdT
  9. INTRODUCING THE WORLD WIDE WEB
  10. Looking back at the last 10 years The impach of Web as a technology If somehing has had a huge impact on the last decade it has been the Web
  11. Looking back at the last 10 years The impach of Web as a technology If somehing has had a huge impact on the last decade it has been the Web It has changed out lifes, how we aquire information, how we interact with other people, how we share
  12. Looking back at the last 10 years The impach of Web as a technology If somehing has had a huge impact on the last decade it has been the Web It has changed out lifes, how we aquire information, how we interact with other people, how we share It is leaving the desktop machines are moving to all new kind of devices, such as mobile phones, TVs, gaming devices; everything is more connected
  13. Looking back at the last 10 years The impach of Web as a technology It is changing how we write applications, where information is stored, and how we share data
  14. AJAX, the playfield changer The impach of Web as a technology AJAX was the next big playfield changer
  15. AJAX, the playfield changer The impach of Web as a technology AJAX was the next big playfield changer It made web applications a reality, brought new services such as GMail, Google Maps, Facebook, etc
  16. AJAX, the playfield changer The impach of Web as a technology AJAX was the next big playfield changer It made web applications a reality, brought new services such as GMail, Google Maps, Facebook, etc ...but it also left a lot to be desired
  17. webapps Missing functionality, lots of assumptions about being online, hard to develop for
  18. webapps JS libraries, the new HTML5 features have made this easier but at the same time the user requirements for application interfaces HAVE CHANGED
  19. webapps The fact is that the web has not designed for apps, but patched for it. That said, things are about to change...
  20. webapps Apps are different in contents
  21. webapps Apps are different in contents More connected
  22. webapps Apps are different in contents More connected Aggregating information
  23. webapps Apps are different in contents More connected Aggregating information Run unmodified almost everywhere
  24. webapps Apps are different in contents More connected Aggregating information Run unmodified almost everywhere Deployment and updating is costly
  25. webapps Apps are different in contents More connected Aggregating information Run unmodified almost everywhere Deployment and updating is costly Net result: everyone are doing web
  26. CHROME OS webapps NOKIA OVI PALM SERVICES WEBOS GOOGLE MAPS, APPLE PICASA, FLICKR, IWORKS.COM GOOGLE DOCS MICROSOFT OFFICE LIVE
  27. A phone without a great Web browser is soon to be the past / Video Games build web services and communities around their games / Settop boxes get movie review a.o from the internet
  28. A phone without a great Web browser is soon to be the past / Video Games build web services and communities around their games / Settop boxes get movie review a.o from the internet Maybe things have already changed...
  29. SO WHAT ARE THE NOKIA OFFERINGS?
  30. Today we will look at what you choices are when targeting Nokia devices Right now and in the near future Currently, not all that great, but things are about to change
  31. So you have decided to make a web app Some common reasons - Have existing web service - Want to share user interface code - Update user interface on demand - Target many different platforms: could be Android, iPhone, Nokia ...
  32. USING THE DEFAULT BROWSER Symbian comes w/ limited WebKit browser - S60 Port, not Qt-based Maemo comes with MicroB browser - Mozilla engine, desktop like
  33. Downsides... It’s a browser, there’s chrome, yack! Test the Ovi store on N900 for yourself MicroB doesn’t support any of the CSS animations, transformation etc. Scrolling lists feels like scrolling pages
  34. What are the competitors doing? iPhone WebKit has extensions to hide the chrome Still, no fixed elements. Solution? Yes, we get back to that.
  35. ROLLING YOUR OWN THING To make a web app, you basically need a launcher providing a web view + web contents Create a window, add a QWebView, adjust the settings, load the contents That is it!
  36. ...but wait a sec Rolling your own thing involves “native code” Why would we ever want to go there? Isn’t the web all about avoid native code? Remember the
  37. ...but wait a sec Rolling your own thing involves “native code” Why would we ever want to go there? Isn’t the web all about avoid native code? Remember the Use-Cases!
  38. Use-Case Imagine you are a settop box company. Your boxes has a tv and a web interface, plus a nice web site Sharing and reusing web code is a goal So is, not reduced functionality Keywords: HW access Nice, fast UX
  39. Introducing the Qt bridge With Qt WebKit you can expose QObject derived instances to the JavaScript runtime Enabling device access, image manipulation on the native side It’s simple, fast, works well
  40. Want more? We also allow you to create QGraphicsItem or QWidget based plugins for the web view.
  41. Want more? We also allow you to create QGraphicsItem or QWidget based plugins for the web view. Together we call this wrote approach for THE HYBRID APPROACH
  42. NON-NATIVE APPROACH, DOES IT EXIST?
  43. Out of the box Web runtime? How to go about it On the Symbian platform WebRuntime provides exactly this - A runtime for running web apps - An implementation of a recent version of the W3C Widgets 1.0 spec + extensions
  44. Web Widgets 1.0 in a nutshell What is it all about A Zip file containing resources: html, js, images A config.xml providing metadata size, title, icon etc Validation, security in place Samsung also supports the spec
  45. So what is the point? What is it all about Widgets 1.0 provides spec on it’s own for adding for instance an important view mode feature The CSS view mode media feature provides the ability to use custom CSS depending on the current mode @media handheld and (view-mode: mini) { body { background-color: black; } } @media tv and (view-mode: fullscreen) { ... } @media all and (view-mode: floating) { ... }
  46. View Mode Media Feature Just an example Widgets 1.0 specifies 4 modes mini: a docket representation for example in a panel, think Windows Vista, no interactivity, etc floating: the widget representation, floating on the Desktop or phone Home Screen Plus 2 application modes: application and fullscreen
  47. View Mode Media Feature Just an example It will also be possible to change mode via JS (a DOM event) as well as receive notificatings of changes note: using config.xml you can define which modes you support
  48. Widgets 1.0 all in all A summary Provides the launcher for making installable web apps. + additional security / validation + different representation modes + switching + slightly more complicated than the Apple approach if your whole app lives online: You need to create a fake package and install it, Creating a desktop link is not enough
  49. WEB RUNTIME == WIDGETS 1.0 ?
  50. Back to Web Runtime Relation to Widgets 1.0 Web Runtime is based on, but not limited to W 1.0 - will provide more desktop integration (menu integration exists in current public API) - provides JavaScript API’s for accessing device functionality
  51. Back to Web Runtime Relation to Widgets 1.0 Platform Services JavaScript API accessed through the nokia.device object: Contacts Location Messaging Camera Media management This is where the security / trusted Calendar widgets becomes important
  52. Platform support Can I use it? But this was all Symbian only? No... At Maemo Summit ’09 it was announced that Nokia is dedicated to support Web Runtime on the Maemo platform, and that the next release will be Qt WebKit based. ; -)
  53. What does this mean? Qt Webkit based Web Runtime it means WebKit! Just like the iPhone / Android - all apps should work more or less out of the box Issues could be due to a.o port differences, user agent Mobile features: Frame Flattening, Touch JS API, onorientationchange and soon Geolocation and friends.
  54. Mobile WebKit What to be aware of Due to nice working, fast scrolling, zooming etc, Mobile WebKit implementations: Do no support CSS themable scrollbars and normally use scroll indicators instead Prevent any web app from having fixed elements, such as fixed header, footer and scrollable central area Qt WebKit on mobile will behave similarly
  55. WebKit feature There are some positive point in using WebKit as wel WebKit provides many CSS extensions - most pushed to standardization (if of no use: removed) - most of they are currently in draft state It provides many new interesting features from the upcoming DOM, CSSOM and HTML specs Many, foundation for making web apps Unfortunately, we [Qt] do not yet support it all
  56. WebKit feature There are some positive point in using WebKit as wel Examples: WebDatabase, Local/Session, Web Application Cache, CSS Media Types and Features, (Shared) Web Workers
  57. It is all about the UX The user interface is also quite important today For making interfaces the most interesting features are: CSS transitions, animation and transformations Provides ways of transforming and animating elements using CSS or via JavaScript using the CSSOM Specs originate from WebKit Was designed considering hardware acceleration
  58. Want real OpenGL The user interface is also quite important today Qt WebKit supports WebGL, an OpenGL ES JavaScript API for the Web - Basic support is in place, done by Tieto - Obviously require OpenGL (ES)
  59. Back to that UI header issue Fixed elements, a no-go The CSS transformations + HW acceleration, or actually the fact they live outside the DOM, makes it possible to emulate the fixed header + provide fast kinetic lists implementations
  60. Back to that UI header issue Fixed elements, a no-go So far the most successful implementation of this is the PastryKit API from Apple PastryKit provides a mini web toolkit for the iPhone It is used by the iPhone 3.0 user guide Basically impossible to tell that it is not native List scroll like iPhone lists and not like web pages
  61. ROUNDING UP
  62. Rounding up Nokia devices Want do do web apps targeting Nokia Devices? Web Runtime is the answer, but Symbian only for now
  63. Rounding up Other devices Want to do web apps targeting other kind of devices such as custom hardware, settop boxes or the desktop? The Hybrid Approach is a very powerful solution
  64. Rounding up Two good approaches Both approaches uses Qt WebKit reuse of application code and service is possible to a good extend
  65. Qt WebKit A good WebKit port all around Qt WebKit provides a similar experience as other desktop and mobile ports or WebKit It has a great API. We believe it is far the best native and most powerful WebKit API, and so does many of our users It is a bit behind Apple and Google port in terms of feature support and performance (crucial for mobile devices)
  66. Qt WebKit A good WebKit port all around ...but we are catching up quickly and our upcoming Qt WebKit 2.0 add-on for Qt 4.6 additionally distributed with Qt 4.7 will be a game changer - Vastly improved performance - Additional feature compliance/support - Maemo5 support - Mobile experience closer to iPhone / Android - Base for future Web Runtime - Same great API as ever!
  67. Thanks for listening I hope the talk provided some insights into the current and future Nokia Web offerings KENNETH ROHDE CHRISTIANSEN ext-kenneth.christiansen@nokia.com kenneth.christiansen@openbossa.org

×