Mobile Webapplikationen mit Widgets
                         Dominik Helleberg
                         Vodafone Internet ...
Client Dev Team




Contact us via http://www.betavine.net/
Follow us on                  http://twitter.com/Mobilewidgets...
Mobile Client Technologien




                                        XHTML
     WAP                                Brows...
Mobile Client Technologien 2009




                   2009

4 Mobile Webapplikationen mit Widgets   Dominik Helleberg   1...
App Stores 2009

                                                                   Nokia Ovi Store
               Windows...
Widgets to the rescue
      based on Web Technologies


  > W3C Widget Spec
     – preference storage, APIs, view modes, s...
Web Technologien


  > ermöglichen schnelle und einfache Entwicklung
  > sind platformunabhängig
  > sind skalierbar
  > p...
Hello Widget
         index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/D...
Hello Widget
       config.xml


  <widget dockable="false">
    <widgetname>HelloWorld</widgetname>
    <width>320</width...
Hello Widget
         packaging




             index.html




             config.xml


                  .wgt




10 Mo...
Mobile Widgets
         Technologien

                                               > HTML 4 | HTML5
                    ...
Mobile Widgets Features
         view modes




12 Mobile Webapplikationen mit Widgets   Dominik Helleberg   12 November 2...
Mobile Widgets Features
         view modes

       config.xml
              <widget dockable=“true” | floatable=“true”>

...
Mobile Widgets Features
         Scalability / portability




14 Mobile Webapplikationen mit Widgets   Dominik Helleberg ...
Mobile Widgets Features
         Scalability / portability



                                                            ...
Mobile Widgets Features
         Scalability / portability



                                                            ...
Mobile Widgets Features
         Scalability / portability
       body, html
       { font-size: 16px; }

       @media al...
Mobile Widgets Features
         Device APIs?




   JIL




18 Mobile Webapplikationen mit Widgets   Dominik Helleberg   ...
Mobile Widgets Features
         Device APIs Location


         var wdev = Widget.Device.DeviceStateInfo;

         wdev....
Mobile Widgets Features
         Device APIs Security?




                                         W3C Digitial Signature...
Mobile Widgets Tools


     > Widget Packager

     > Widget Emulator

     > Desktop debugging

     > On-Device-Debuggin...
Widgets Landscape 2009

   > Vodafone started Widget beta in 9 Ländern
   > Zielplatform Symbian S60v3 und S60v5 – 40 devi...
What‘s next?


    > Mehr devices, mehr Platformen
    > Netzwerk APIs
    > Device APIs
    > Abrechnung von Widgets
    ...
Alles gut?


    > Verschiedene Spec Versionen
    > Funktionalität
             > APIs
             > 3D Grafik
    > Ver...
Widget Bookmarks


   > http://www.jil.org/vodafone/appstar


   > http://developer.vodafone.com


   > http://widget.voda...
Upcoming SlideShare
Loading in...5
×

Dominik Helleberg Widgets Wjax

975

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
975
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Dominik Helleberg Widgets Wjax"

  1. 1. Mobile Webapplikationen mit Widgets Dominik Helleberg Vodafone Internet Services 12 November 2009 1 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  2. 2. Client Dev Team Contact us via http://www.betavine.net/ Follow us on http://twitter.com/Mobilewidgets 2 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  3. 3. Mobile Client Technologien XHTML WAP Browser JME Objective C 1999 / 2000 2002 2005 2008 3 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  4. 4. Mobile Client Technologien 2009 2009 4 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  5. 5. App Stores 2009 Nokia Ovi Store Windows Marketplace BlackBerry App World Apple App Store PocketGear Handmark Sony E/// PlayNow Android Market LG App Store GetJar Samsung App Store SlideME Intel Atom Palm App Catalogue Mobango Java App Store 5 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  6. 6. Widgets to the rescue based on Web Technologies > W3C Widget Spec – preference storage, APIs, view modes, security / signing, automatic upates, internationalization > Basierend auf bekannten Webtechnologien – HTML, CSS, ECMA Script, SVG 6 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  7. 7. Web Technologien > ermöglichen schnelle und einfache Entwicklung > sind platformunabhängig > sind skalierbar > passen in bestehende Infrastrukturen > sind optimal zur Frontend und User Interface Entwicklung > sind auf dem Desktop & mobil verfügbar > erleben eine schnelle Weiterentwicklung > bieten umfangreiche Bibliotheken und Tools > lösen klassische Desktop Applikationen mehr und mehr ab 7 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  8. 8. Hello Widget index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>HelloWorld</title> </head> <body> <div style="color:red" > Hello World! </div> </body> </html> 8 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  9. 9. Hello Widget config.xml <widget dockable="false"> <widgetname>HelloWorld</widgetname> <width>320</width> <height>240</height> </widget> 9 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  10. 10. Hello Widget packaging index.html config.xml .wgt 10 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  11. 11. Mobile Widgets Technologien > HTML 4 | HTML5 > XHTML1.0 | XHTML 1.1 > CSS 1 | CSS 2 | CSS 3 | CSS3 Media Queries > DOM 2 > ECMA Script Version 3 > SVG > XMLHttpRequest 11 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  12. 12. Mobile Widgets Features view modes 12 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  13. 13. Mobile Widgets Features view modes config.xml <widget dockable=“true” | floatable=“true”> CSS @media all and (-o-widget-mode:docked) { #mainView { display: none } #dockedView { display: block !important } } #dockedView { display: none } Script widget.addEventListener('widgetmodechange', function(){ if(widget.widgetMode == "docked") { // } }, false); 13 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  14. 14. Mobile Widgets Features Scalability / portability 14 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  15. 15. Mobile Widgets Features Scalability / portability Samsung H1 (800x480) Nokia N97 (640x360) Samsung M1 (400x240) Nokia N95 (320x240) 15 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  16. 16. Mobile Widgets Features Scalability / portability Samsung H1 (267ppi) Nokia N97 (210ppi) Nokia 6710 (181ppi) Nokia N95 (153ppi) 24inch Desktop, Full-HD'ish (94ppi) 16 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  17. 17. Mobile Widgets Features Scalability / portability body, html { font-size: 16px; } @media all and (min-resolution: 150dpi) { body, html { font-size: 20px; } } @media all and (min-resolution: 200dpi) { body, html { font-size: 25px; } } 17 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  18. 18. Mobile Widgets Features Device APIs? JIL 18 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  19. 19. Mobile Widgets Features Device APIs Location var wdev = Widget.Device.DeviceStateInfo; wdev.onPositionRetrieved = function(posInfo) { mapUi.update({ latitude : posInfo.latitude, longitude : posInfo.longitude }); } wdev.requestPositionInfo("gps"); 19 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  20. 20. Mobile Widgets Features Device APIs Security? W3C Digitial Signatures http://www.w3.org/TR/widgets-digsig/ 20 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  21. 21. Mobile Widgets Tools > Widget Packager > Widget Emulator > Desktop debugging > On-Device-Debugging > On-the-fly editing 21 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  22. 22. Widgets Landscape 2009 > Vodafone started Widget beta in 9 Ländern > Zielplatform Symbian S60v3 und S60v5 – 40 devices > Kostenloser upload über Mobile Widget Platform > App Shop ermöglicht einfache Installation und Suche > zur Zeit ca 1500 Widgets online > Vodafone 360 App Shop gestartet > Widget Competition „App Star“ gestartet > T-Mobile startet Widgets im Sommer 2009 > RIM kündigt Widget Rutime an > Microsoft kündigt Widget Runtime an 22 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  23. 23. What‘s next? > Mehr devices, mehr Platformen > Netzwerk APIs > Device APIs > Abrechnung von Widgets > In-widget Micro Payment 23 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  24. 24. Alles gut? > Verschiedene Spec Versionen > Funktionalität > APIs > 3D Grafik > Verbreitung > Tools 24 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services
  25. 25. Widget Bookmarks > http://www.jil.org/vodafone/appstar > http://developer.vodafone.com > http://widget.vodafone.com > http://twitter.com/Mobilewidgets 25 Mobile Webapplikationen mit Widgets Dominik Helleberg 12 November 2009 Vodafone Internet Services

×