SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler offline
Mobile Widgets


    Presented by Jochen Cichon @dh1jc
    30 September 2009




1   Mobile Widgets
    22 September 2009   v0.1
Contents


            1. Mobile Applications

            2. Features

            3. View Modes

            4. Resize

            5. Layout

            6. Failsafe




2   Mobile Widgets
    22 September 2009       v0.1
Mobile Applications 1/3

Classic Mobile Applications
•   Programming Language C++; Java; C#
•   Pro
           –          Performance
           –          Device Api's
           –          Security Model

•   Con
           –          Low (No) portability
           –          High learning curve
           –          Layout (complicated)




3    Mobile Widgets
     22 September 2009               v0.1
Mobile Applications 2/3

Browser “Applications”
•   Programming Language Javascript; HTML; SVG; WML
•   Pro
           –          Web technology
           –          Low learning curve
           –          Device API's
           –          Easy to Layout

•   Con
           –          No device API's
           –          Performance
           –          No offline content
           –          Security Model (Server side)
           –          Connection / latency



4    Mobile Widgets
     22 September 2009               v0.1
Mobile Applications 3/3

Mobile Widgets
•   Programming Language Javascript; HTML; SVG; ZIP
•   Pro
           –          Web technology
           –          Low learning curve
           –          Portable
           –          Easy to Layout
           –          Offine content store
           –          One Package

•   Con
           –          No device API's (yet)
           –          Performance (yet)
           –          Security Model (yet)



5    Mobile Widgets
     22 September 2009             v0.1
Features


•   One Package for installation
•   Multiple instances of a widget
•   Different view modes e.g. active icon
•   Web Technologies
            –          HTML; CSS2/3; Javascript; Media Queries
            –          SVG; Canvas; image formats (png, jpg, gif)
            –          XSLT; DOM3

•   Cross domain xmlHttpRequests
•   Content store (content / credentials...)
•   Cross Platform (Linux, Windows, Mac, S60 mobiles, LiMo, ...)



6     Mobile Widgets
      22 September 2009             v0.1
View Modes


•   Icon (not a real mode)
•   Active Icon / Docked mode
•   Extended / Floating mode
•   Widget mode
•   Application mode




           W3C not yet final with mode specicification
              http://dev.w3.org/2006/waf/widgets-wm/Overview.src.html




7     Mobile Widgets
      22 September 2009      v0.1
View Modes in Detail 1/3

Example Icon vs. Active Icon (Docked)
•   Limited size
•   Content updateable
•   No interaction
            Icon Mode                   Docked Mode




8     Mobile Widgets
      22 September 2009   v0.1
View Modes in Detail 2/3

Example Active Icon vs. Extended / Floating Mode
•   Greater size than icon / docked mode
•   Content updateable
•   No interaction
            Docked Mode                       Floating Mode




9     Mobile Widgets
      22 September 2009   v0.1
View Modes in Detail 3/3

Example Application / Widget Mode
•    Chrome / Non-Chrome
•    Default actions (minimize, close) / self made actions


             Application Mode                          Widget Mode




10     Mobile Widgets
       22 September 2009        v0.1
View Modes Coding 1/3

JS Code example


function myMode() {

     if (widget.widgetMode === “docked”) {

           …      // e.g. set update interval to different value

     }

}

// Register the EventListener

widget.addEventListener(“widgetmodechange”, myMode, false);




11       Mobile Widgets
         22 September 2009    v0.1
View Modes Coding 2/3

Media Queries


<div id=”dockedView”> … </div>

<div id=”widgetView”> … </div>



#dockedView { display: none; }

@media all and (-o-widget-mode:docked) {

     #dockedView { display: block }

     #widgetView { display: none }

}




12    Mobile Widgets
      22 September 2009   v0.1
View Modes Coding 3/3

Media Queries


<img id=”closeButton” src=”img/close.png”/>



#closeButton{ display: none }

@media all and (-o-widget-mode:widget) {

     #closeButton { display: block }

}




13    Mobile Widgets
      22 September 2009   v0.1
Resize

Why to resize?
•      Different view modes
•      Different screen sizes on mobiles (width/height)
•      Portrait / Landscape (maybe in different modes)




                         Do the math yourself...




14   Mobile Widgets
     22 September 2009     v0.1
Resize

JS Resize
function myResize () {

     if (widget.widgetMode !== “widget”)

        window.resizeTo(screen.availWidth, screen.availHeight);

}



// register ResolutionChange Event

widget.addEventListener(“resolution”, myResize, false);



// call initially

myResize();



15    Mobile Widgets
      22 September 2009   v0.1
Layout

Trouble in detail
•    DPI Values
             –          Screen reports 96dpi (which is mostly wrong!)
             –          Handsets with same screen dimensions have different dpi values
                           •    Nokia N96, 2.8inch display 240x320 = 142ppi
                           •    Nokia 5800 music, 3.2inch display 640x360 = 229 ppi

•    Fonts may become unreadable
•    Touch buttons are maybe too small / large




16     Mobile Widgets
       22 September 2009             v0.1
Layout

Fonts
•    Use media queries to set base font size
body { font-size: 16px }
@media all and (min-resolution: 200dpi) {
     body { font-size: 22px }
}


•    reference base font size
#header { font-size: 1.2em }

div { font-size: .8em }




17     Mobile Widgets
       22 September 2009   v0.1
Layout

Images
•    You don't want to scale up
             –          Even downscaling may look bad

•    Use appropriate image format (jpg, png, gif, svg)
•    Use SVG e.g. for Logo / Splash screen
             –          If possible (svg restriction based on renderer)

•    When you don't know your image
img {

     max-width: 95%;

}




18     Mobile Widgets
       22 September 2009             v0.1
Layout

UI-Elements
•    UI-Elements are often made of images
•    Suddenly 100px very small on high ppi-displays
             –          Use absolute size e.g. “ 1cm “ for button on touch devices

#closeButton { width: 64px }

@media all and (-o-touch) {

     #closeButton { width: 1cm }

}

•    Adapt to different ppi with different images




19     Mobile Widgets
       22 September 2009             v0.1
Layout

UI-Elements
•    Use SVG and stay scalable
             –          Remember to have a fallback pixel-image

<object type=”image/svg+xml” data=”busy.svg”>

      <img src=”fallback-busy.png”/>

</object>

•    Don't forget that an “onClick” is given to the underlying SVG!




20     Mobile Widgets
       22 September 2009            v0.1
Failsafe


•    Use try - catch blocks
try {

     ...

} catch (err) {

     // React on error

     widget.showNotification (“Can't update content”);

}

•    use timeout for XHR requests




21     Mobile Widgets
       22 September 2009      v0.1
Thank you




22   Mobile Widgets
     22 September 2009   v0.1

Mais conteúdo relacionado

Destaque (13)

Leslie And Phoenix
Leslie And PhoenixLeslie And Phoenix
Leslie And Phoenix
 
Image N Media Portfolio
Image N Media PortfolioImage N Media Portfolio
Image N Media Portfolio
 
Coneixer Windows
Coneixer WindowsConeixer Windows
Coneixer Windows
 
How to Offset my Carbon Footprint
How to Offset my Carbon FootprintHow to Offset my Carbon Footprint
How to Offset my Carbon Footprint
 
Avançar Amb Excel
Avançar Amb ExcelAvançar Amb Excel
Avançar Amb Excel
 
G20 report-english
G20 report-englishG20 report-english
G20 report-english
 
Començar amb Writer
Començar amb WriterComençar amb Writer
Començar amb Writer
 
Avançar Amb Word
 Avançar Amb Word Avançar Amb Word
Avançar Amb Word
 
Començar Amb Word
Començar Amb WordComençar Amb Word
Començar Amb Word
 
MECKids: Who Are We?
MECKids: Who Are We?MECKids: Who Are We?
MECKids: Who Are We?
 
Free gmat-flashcards
Free gmat-flashcardsFree gmat-flashcards
Free gmat-flashcards
 
Que Es Un Porta Folis
Que Es Un Porta FolisQue Es Un Porta Folis
Que Es Un Porta Folis
 
Thirukkural project madurai
Thirukkural project maduraiThirukkural project madurai
Thirukkural project madurai
 

Semelhante a Workshop Fo Wa

Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo Mobile
Andrew Ferrier
 
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Bala Subra
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
Patrick Lauke
 
Android platform
Android platformAndroid platform
Android platform
maya_slides
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
Chris Morrell
 
Synapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationSynapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile application
saritasingh19866
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworks
Sasha dos Santos
 

Semelhante a Workshop Fo Wa (20)

Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo Mobile
 
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
 
Top Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web DevelopmentTop Ten Tips for HTML5/Mobile Web Development
Top Ten Tips for HTML5/Mobile Web Development
 
Mobile applications development
Mobile applications developmentMobile applications development
Mobile applications development
 
Mobile Widgets Development
Mobile Widgets DevelopmentMobile Widgets Development
Mobile Widgets Development
 
Inside Mobile Widgets Publish
Inside Mobile Widgets PublishInside Mobile Widgets Publish
Inside Mobile Widgets Publish
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)
 
Android platform
Android platformAndroid platform
Android platform
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 
Mobility today & what's next. Application ecosystems.
Mobility today & what's next.Application ecosystems.Mobility today & what's next.Application ecosystems.
Mobility today & what's next. Application ecosystems.
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape
 
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
 
Synapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationSynapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile application
 
Real World Lessons in jQuery Mobile
Real World Lessons in jQuery MobileReal World Lessons in jQuery Mobile
Real World Lessons in jQuery Mobile
 
An overview of mobile html + java script frameworks
An overview of mobile html + java script frameworksAn overview of mobile html + java script frameworks
An overview of mobile html + java script frameworks
 
Developing a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&CordovaDeveloping a native mobile apps using Ionic&Cordova
Developing a native mobile apps using Ionic&Cordova
 
Android quick talk
Android quick talkAndroid quick talk
Android quick talk
 
JavaScript on the Desktop
JavaScript on the DesktopJavaScript on the Desktop
JavaScript on the Desktop
 

Último

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 

Workshop Fo Wa

  • 1. Mobile Widgets Presented by Jochen Cichon @dh1jc 30 September 2009 1 Mobile Widgets 22 September 2009 v0.1
  • 2. Contents 1. Mobile Applications 2. Features 3. View Modes 4. Resize 5. Layout 6. Failsafe 2 Mobile Widgets 22 September 2009 v0.1
  • 3. Mobile Applications 1/3 Classic Mobile Applications • Programming Language C++; Java; C# • Pro – Performance – Device Api's – Security Model • Con – Low (No) portability – High learning curve – Layout (complicated) 3 Mobile Widgets 22 September 2009 v0.1
  • 4. Mobile Applications 2/3 Browser “Applications” • Programming Language Javascript; HTML; SVG; WML • Pro – Web technology – Low learning curve – Device API's – Easy to Layout • Con – No device API's – Performance – No offline content – Security Model (Server side) – Connection / latency 4 Mobile Widgets 22 September 2009 v0.1
  • 5. Mobile Applications 3/3 Mobile Widgets • Programming Language Javascript; HTML; SVG; ZIP • Pro – Web technology – Low learning curve – Portable – Easy to Layout – Offine content store – One Package • Con – No device API's (yet) – Performance (yet) – Security Model (yet) 5 Mobile Widgets 22 September 2009 v0.1
  • 6. Features • One Package for installation • Multiple instances of a widget • Different view modes e.g. active icon • Web Technologies – HTML; CSS2/3; Javascript; Media Queries – SVG; Canvas; image formats (png, jpg, gif) – XSLT; DOM3 • Cross domain xmlHttpRequests • Content store (content / credentials...) • Cross Platform (Linux, Windows, Mac, S60 mobiles, LiMo, ...) 6 Mobile Widgets 22 September 2009 v0.1
  • 7. View Modes • Icon (not a real mode) • Active Icon / Docked mode • Extended / Floating mode • Widget mode • Application mode W3C not yet final with mode specicification http://dev.w3.org/2006/waf/widgets-wm/Overview.src.html 7 Mobile Widgets 22 September 2009 v0.1
  • 8. View Modes in Detail 1/3 Example Icon vs. Active Icon (Docked) • Limited size • Content updateable • No interaction Icon Mode Docked Mode 8 Mobile Widgets 22 September 2009 v0.1
  • 9. View Modes in Detail 2/3 Example Active Icon vs. Extended / Floating Mode • Greater size than icon / docked mode • Content updateable • No interaction Docked Mode Floating Mode 9 Mobile Widgets 22 September 2009 v0.1
  • 10. View Modes in Detail 3/3 Example Application / Widget Mode • Chrome / Non-Chrome • Default actions (minimize, close) / self made actions Application Mode Widget Mode 10 Mobile Widgets 22 September 2009 v0.1
  • 11. View Modes Coding 1/3 JS Code example function myMode() { if (widget.widgetMode === “docked”) { … // e.g. set update interval to different value } } // Register the EventListener widget.addEventListener(“widgetmodechange”, myMode, false); 11 Mobile Widgets 22 September 2009 v0.1
  • 12. View Modes Coding 2/3 Media Queries <div id=”dockedView”> … </div> <div id=”widgetView”> … </div> #dockedView { display: none; } @media all and (-o-widget-mode:docked) { #dockedView { display: block } #widgetView { display: none } } 12 Mobile Widgets 22 September 2009 v0.1
  • 13. View Modes Coding 3/3 Media Queries <img id=”closeButton” src=”img/close.png”/> #closeButton{ display: none } @media all and (-o-widget-mode:widget) { #closeButton { display: block } } 13 Mobile Widgets 22 September 2009 v0.1
  • 14. Resize Why to resize? • Different view modes • Different screen sizes on mobiles (width/height) • Portrait / Landscape (maybe in different modes) Do the math yourself... 14 Mobile Widgets 22 September 2009 v0.1
  • 15. Resize JS Resize function myResize () { if (widget.widgetMode !== “widget”) window.resizeTo(screen.availWidth, screen.availHeight); } // register ResolutionChange Event widget.addEventListener(“resolution”, myResize, false); // call initially myResize(); 15 Mobile Widgets 22 September 2009 v0.1
  • 16. Layout Trouble in detail • DPI Values – Screen reports 96dpi (which is mostly wrong!) – Handsets with same screen dimensions have different dpi values • Nokia N96, 2.8inch display 240x320 = 142ppi • Nokia 5800 music, 3.2inch display 640x360 = 229 ppi • Fonts may become unreadable • Touch buttons are maybe too small / large 16 Mobile Widgets 22 September 2009 v0.1
  • 17. Layout Fonts • Use media queries to set base font size body { font-size: 16px } @media all and (min-resolution: 200dpi) { body { font-size: 22px } } • reference base font size #header { font-size: 1.2em } div { font-size: .8em } 17 Mobile Widgets 22 September 2009 v0.1
  • 18. Layout Images • You don't want to scale up – Even downscaling may look bad • Use appropriate image format (jpg, png, gif, svg) • Use SVG e.g. for Logo / Splash screen – If possible (svg restriction based on renderer) • When you don't know your image img { max-width: 95%; } 18 Mobile Widgets 22 September 2009 v0.1
  • 19. Layout UI-Elements • UI-Elements are often made of images • Suddenly 100px very small on high ppi-displays – Use absolute size e.g. “ 1cm “ for button on touch devices #closeButton { width: 64px } @media all and (-o-touch) { #closeButton { width: 1cm } } • Adapt to different ppi with different images 19 Mobile Widgets 22 September 2009 v0.1
  • 20. Layout UI-Elements • Use SVG and stay scalable – Remember to have a fallback pixel-image <object type=”image/svg+xml” data=”busy.svg”> <img src=”fallback-busy.png”/> </object> • Don't forget that an “onClick” is given to the underlying SVG! 20 Mobile Widgets 22 September 2009 v0.1
  • 21. Failsafe • Use try - catch blocks try { ... } catch (err) { // React on error widget.showNotification (“Can't update content”); } • use timeout for XHR requests 21 Mobile Widgets 22 September 2009 v0.1
  • 22. Thank you 22 Mobile Widgets 22 September 2009 v0.1