Mobilizing the Web
M bili i th W b
 How to reuse what you already know 
   to create mobile applications?
   t      t    b...
About


Inova IT is a professional services and software company based in 
              p f                         f    ...
Agenda

How          started with mobile apps development
H             t t d ith     bil       d l       t


Web Runtime ...
How we got hooked 
on Nokia Web Runtime
Expertise
 We wanted to add 
 We wanted to add                                          mobile to the mix
                ...
Expertise
We have expertise in the following development and communication 
  technologies:
•   Java, including Java Micro...
Mobile Development

How would weby lowlevel t l guys get 
H      ld b             telco
there easiest!?!?!?!




       + ...
Mobile Expertise


              =               WRT
                      (Web Runtime)




Why?
Wh ? Because it’s easy t...
Developing a Product

With WRT we could reuse
  • Development Process
    Development Process
  • Know How
  • Tool Chain
...
Web Runtime Widgets
    in a nutshell
Internet Evolution




Full HTML browser lets 
  mobile consumers 
     experience the
     experience the 
     complete ...
Widget?
Lightweight mobile applications that give users 
 customized access to Web based and other resources
 customized a...
For Who?
Web app runtimes on mobiles?
            a viable runtime for serious app development?

   performance?
         ...
What and Where?
S60 3rd FP2
         menus
  (un)installation
                    icons
                  localization
   ...
How?
It’s HTML / CSS / JS…           :)




     but help is always good
WRT plug in for Aptana
WRT plug‐in for Aptana Stu...
Tell me more!
Tell me more!
Widget “ingredients”


                                     Widget
                                    properties
info.pli...
info.plist

Information about the widget
Information about the widget
             ...
             <plist version="1.0">
...
HTML
                                  <html>
                                   <head>
                                  ...
JavaScript


Event handling
             g
             XMLHttpRequest
                   p q
DOM manipulation
        p
 ...
Platform Services
Framework for abstracting access to a set of services
Runtime specific bindings and security management
...
Home Screen
What it is for the end‐user?                       Home Screen view
   – Add /
     Add / remove home screen c...
It’s all JavaScript but...
               bare in mind that

              Intel® Core™ i7 2 66GHz
                       ...
Thanks!   miha.lesjak@inova.si
Upcoming SlideShare
Loading in...5
×

Miha Lesjak Mobilizing The Web with Web Runtime

1,432

Published on

Mobilizing The Web with Web Runtime/ Miha Lesjak, 5. 3.2010 Hagenberg

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

No Downloads
Views
Total Views
1,432
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • …no clear cut standard as of nowOur interest is to maximize innovation and reduce fragmentationDevice APIsPackagingSigningInteroperability…we will see a lot of progress in the coming months and yearsThe important thing to understand is that we have already deployed WRT to millions of devices.It’s out there; go and execute
  • What we started with3.2 + 3.1 backportsNecessities for app developmentProviding you the ’good sides’ of S60 LAF for your appThe sandbox was quite tightStarting from the high selling N5800Platform ServicesJavaScript and ActionScript access to core APIsPowerful mashupsThe next evolution will provide a much cleaner JavaScript style interfaceExtendable service frameworkPossibility to create your own servicesN97 brings another fantastic iterationVery easy to provide a MiniView to your widget’s live dataPrime locationData from platform servicesCheck out the Accuweather on the video later onThis is a key difference makerWhile the sandbox is tight…Hack-it-babyThe platform is open, go and createHTTP server, Scriptaböe pluginsMiha will share something from his bag of tricks
  • So you understand the boundaries or the lack there-of…How?Well, how do you develop for the web?- Notepad, dreamweaver, custom toolchain (Miha)?What our toolbox currently providesDevicesEmulatorScript debuggingAptana pluginPreviewPackagingDeploymentDebuggingCode completionV2Plat ServMiniViewWe have a nice roadmap for the tool support
  • Transcript of "Miha Lesjak Mobilizing The Web with Web Runtime"

    1. 1. Mobilizing the Web M bili i th W b How to reuse what you already know  to create mobile applications? t t bil li ti ? miha.lesjak@inova.si
    2. 2. About Inova IT is a professional services and software company based in  p f f p y Maribor, Slovenia.  We specialize in custom application development,  systems integration, and the commercialization of next generation mobile  and communication solutions.  Our cutting‐edge tools and applications  and communication solutions Our cutting‐edge tools and applications bridge the mobile, telecom and internet domains, which we believe is the  next generation in mobile and fixed line communications.
    3. 3. Agenda How          started with mobile apps development H t t d ith bil d l t Web Runtime (WRT) Widgets in a Nutshell Web Runtime (WRT) Widgets in a Nutshell Digging Deeper – Utilizing Platform Services Utilizing Platform Services – Adding value with Home Screen
    4. 4. How we got hooked  on Nokia Web Runtime
    5. 5. Expertise We wanted to add  We wanted to add mobile to the mix to the mix + The Future is Mobile We are all keen believers that the next wave in the IT revolution will be driven by mobile services.  These services will reshape the society in the same way  the Internet has utterly transformed it over the last decade.  We believe the mobile world influences nearly every aspect of our lives.  We simply must be  at the forefront of developing new mobile services.
    6. 6. Expertise We have expertise in the following development and communication  technologies: • Java, including Java Micro Edition, Java SE, Java EE, Spring and Hibernate Java, including Java Micro Edition, Java SE, Java EE, Spring and Hibernate • .NET, including Microsoft ASP.NET, ADO.NET, WCF, WWF, WPF, Office Integration • Rich Internet Applications (RIAs) – JavaScript / Ajax i / j • JavaScript libraries: prototype, script.aculo.us, and JQuery • JavaScript widget libraries Ext JS Ext GWT Dojo Toolkit JavaScript widget libraries: Ext JS, Ext GWT, Dojo Toolkit – HTML, DHTML, CSS, XML – Adobe Flash Flex Adobe Flash, Flex – Google’s GWT Framework • C/C++, including BOOST • Qt, Trolltech’s cross‐platform framework • SIP, including SIP application server development for next gen communications (e.g., Voice over IP) • SOA either through Web Services or REST, including mashup applications with internet‐based services  (e.g., Google) and enterprise products (e.g., MS Exchange, OCS, Avaya IP PBX) (e g Google) and enterprise products (e g MS Exchange OCS Avaya IP PBX) • ...
    7. 7. Mobile Development How would weby lowlevel t l guys get  H ld b telco there easiest!?!?!?! + + + =
    8. 8. Mobile Expertise = WRT (Web Runtime) Why? Wh ? Because it’s easy to develop in,  reuse existing knowledge and reuse existing knowledge it fitted well into our existing  g development process
    9. 9. Developing a Product With WRT we could reuse • Development Process Development Process • Know How • Tool Chain A learning curve that I finally like!
    10. 10. Web Runtime Widgets in a nutshell
    11. 11. Internet Evolution Full HTML browser lets  mobile consumers  experience the experience the  complete Web Mobile‐optimized sites  Widgets + Platform  serve specific needs and  Services offer seamless  tasks Widgets offer focused,  integration of the Web  optimized front‐ends to  with personal context Web‐based information and  services
    12. 12. Widget? Lightweight mobile applications that give users  customized access to Web based and other resources customized access to Web based and other resources The easiest way to bring web‐based business to millions of Nokia mobile devices Develop using standards‐based web technologies (e.g. HTML, CSS, Javascript, AJAX) Install and run on Nokia devices like any native application y pp Provide an optimized web experience accessible with a single click Application like delivery Visible in the UI Familiar HTML, Javascript, and CSS Familiar HTML Javascript and CSS
    13. 13. For Who? Web app runtimes on mobiles? a viable runtime for serious app development? performance? super deep drilling?  ok, it s not for everything ok it’s not for everything ‐ yet But...  Resource pool Resource pool Learning curve Community activity Community activity UI richness And with some tweaks  you can do about  And with some tweaks you can do about anything!
    14. 14. What and Where? S60 3rd FP2 menus (un)installation icons localization system interaction S60 5th S60 5th Platform Services l f Home Screen
    15. 15. How? It’s HTML / CSS / JS… :) but help is always good WRT plug in for Aptana WRT plug‐in for Aptana Studio Code completion Preview Debugging Packaging Deployment
    16. 16. Tell me more! Tell me more!
    17. 17. Widget “ingredients” Widget properties info.plist (mandatory) +  [name].html [name] html (mandatory) HTML backbone icon.png [name].css [ ] [name].js PNG icon +  CSS layout Root  + folder! js logic
    18. 18. info.plist Information about the widget Information about the widget ... <plist version="1.0"> <dict> <key>DisplayName</key> <string>AccuWidget</string> <key>Identifier</key> <string>com.nokia.forum.accuwidget</string> <key>MainHTML</key> <string>accuwidget.html</string> <key>AllowNetworkAccess</key> <true /> ... info.plist file defines the widget. It is a XML text file providing  information about the components and features of this specific  information about the components and features of this specific widget.
    19. 19. HTML <html> <head> .. </head> Defines the structure <body id body > id="body"> D fi h <div id=‘mainView’> <span class=‘title’>Front view</span> of the widget. </div> <div id=‘subView1’ class=‘subView’> <p class=‘title’>Back view</p> / Views can be constructed with static  </div> HTML elements or can be dynamically  <div id=‘subView2’ class=‘subView’> created by JavaScript at runtime. <p class=‘title’>Config view</p> </div> / </body> </html> // Class selector to define common CSS style for similar components y .title { font-size: 26px; color: blue; p Style and layout information y y } // Id selector to define a unique – Defines how to display HTML  style for a unique component element: position, color, background  #mainView { color etc. color etc font size: font-size: 16px; color: red; text-align: center; CSS information can be embedded in the HTML } file or imported from an external styleheet // Pseudo-class selector to design pattern style tt t l div.subview div { margin: 10px 0 0 0; padding: 20px 20px 20px 20px; }
    20. 20. JavaScript Event handling g XMLHttpRequest p q DOM manipulation p UI effects UI tweaking UI tweaking
    21. 21. Platform Services Framework for abstracting access to a set of services Runtime specific bindings and security management Runtime specific bindings and security management Access Platform Services 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 Camera Messaging Media Management Calendar  Sensor Communication Logs Contacts System information Location Landmarks
    22. 22. Home Screen What it is for the end‐user? Home Screen view – Add / Add / remove home screen content h t t – Tap content to open widget full screen view Home Screen Widget has 2 views – Home Screen view – Fullscreen view Fullscreen view Interaction while in Home Screen – onload() and onresize() as widget  side interface functions side interface functions – JavaScript code to determine current view  size – correct view rendered
    23. 23. It’s all JavaScript but... bare in mind that Intel® Core™ i7 2 66GHz 2.66GHz (8MB Cache) 3GB Triple Channel 1067Mhz DDR3 500GB - SATA-II, 3Gb/s, 7,200RPM ARM 11  ARM 11 434 MHz 434 MHz processor  128 MB RAM 32 GB storage
    24. 24. Thanks! miha.lesjak@inova.si

    ×