SlideShare ist ein Scribd-Unternehmen logo
1 von 64
PhoneGap

                          Nikolai Onken
                             uxebu



Tuesday, June 8, 2010
Tuesday, June 8, 2010
We open the mobile web.




Tuesday, June 8, 2010
Tuesday, June 8, 2010
JavaScript                             AJAX
                                FrontEnd
      Usability                 UserExperience

                        CSS      mobile
       Browser                             Web2.0
                         dojo
                 TouchScroll    OpenSource
Tuesday, June 8, 2010
3.3.1



Tuesday, June 8, 2010
Problem


                    • Native apps fragmentation



Tuesday, June 8, 2010
Solution




Tuesday, June 8, 2010
Solution

                    • PhoneGap




Tuesday, June 8, 2010
Solution

                    • PhoneGap
                    • W3C Widgets



Tuesday, June 8, 2010
Solution

                    • PhoneGap
                    • W3C Widgets
                    • Palm webOS


Tuesday, June 8, 2010
Solution

                    • PhoneGap
                    • W3C Widgets
                    • Palm webOS
                    • ...

Tuesday, June 8, 2010
Simple huh?



Tuesday, June 8, 2010
Support




Tuesday, June 8, 2010
Support
                    • Apple iPhone




Tuesday, June 8, 2010
Support
                    • Apple iPhone
                    • Google Android




Tuesday, June 8, 2010
Support
                    • Apple iPhone
                    • Google Android
                    • RIM Blackberry




Tuesday, June 8, 2010
Support
                    • Apple iPhone
                    • Google Android
                    • RIM Blackberry
                    • Palm webOS



Tuesday, June 8, 2010
Support
                    • Apple iPhone
                    • Google Android
                    • RIM Blackberry
                    • Palm webOS
                    • Symbian


Tuesday, June 8, 2010
Support
                    • Apple iPhone
                    • Google Android
                    • RIM Blackberry
                    • Palm webOS
                    • Symbian
                    • Maemo

Tuesday, June 8, 2010
Support
                    • Apple iPhone
                    • Google Android
                    • RIM Blackberry
                    • Palm webOS
                    • Symbian
                    • Maemo
                    • Windows Mobile
Tuesday, June 8, 2010
Device APIs




Tuesday, June 8, 2010
Device APIs
                    • Geo




Tuesday, June 8, 2010
Device APIs
                    • Geo
                    • Accelerometer




Tuesday, June 8, 2010
Device APIs
                    • Geo
                    • Accelerometer
                    • Camera




Tuesday, June 8, 2010
Device APIs
                    • Geo
                    • Accelerometer
                    • Camera
                    • Vibration



Tuesday, June 8, 2010
Device APIs
                    • Geo
                    • Accelerometer
                    • Camera
                    • Vibration
                    • Contacts


Tuesday, June 8, 2010
Device APIs
                    • Geo
                    • Accelerometer
                    • Camera
                    • Vibration
                    • Contacts
                    • SMS

Tuesday, June 8, 2010
Device APIs
                    • Geo
                    • Accelerometer
                    • Camera
                    • Vibration
                    • Contacts
                    • SMS
                    • ...
Tuesday, June 8, 2010
Augment the
                        browser, hell yea



Tuesday, June 8, 2010
HumanAPI



Tuesday, June 8, 2010
Any other native
                            feature



Tuesday, June 8, 2010
Project structure




Tuesday, June 8, 2010
Project structure

                    • www folder




Tuesday, June 8, 2010
Project structure

                    • www folder
                    • index.html



Tuesday, June 8, 2010
Project structure

                    • www folder
                    • index.html
                    • phonegap.js


Tuesday, June 8, 2010
How the magic happens




Tuesday, June 8, 2010
How the magic happens




                                  Low level APIs

                    Camera Accelerometer Push Notifications


Tuesday, June 8, 2010
How the magic happens


                              Chromeless Browser




                                  Low level APIs

                    Camera Accelerometer Push Notifications


Tuesday, June 8, 2010
How the magic happens


                              Chromeless Browser



                            browser.eval(“alert(1);”)


                                   Low level APIs

                    Camera Accelerometer Push Notifications


Tuesday, June 8, 2010
How the magic happens




                           gap://customurl




Tuesday, June 8, 2010
How the magic happens




                                gap://customurl


                                  Low level APIs

                    Camera Accelerometer Push Notifications


Tuesday, June 8, 2010
How the magic happens


                              Chromeless Browser



                                gap://customurl


                                  Low level APIs

                    Camera Accelerometer Push Notifications


Tuesday, June 8, 2010
JS Libraries




Tuesday, June 8, 2010
JS Libraries


                • Use them but use them with care
                • Most have been designed for desktop
                • Desktop performance vs. Mobile
                        performance are apples vs. oranges



Tuesday, June 8, 2010
Dojo mobile


        • http://github.com/klipstein/dojo-mobile
        • http://github.com/wolframkriesing/dojo-mobile


Tuesday, June 8, 2010
Dojo mobile

        • blackberry.js
        • webkit.js
        • yourplatform.js


Tuesday, June 8, 2010
Device APIs


        • GSOC - Kelly Smith
        • http://gsocblog.innobdesign.com/


Tuesday, June 8, 2010
Lets build an app



Tuesday, June 8, 2010
Mobile secrets



Tuesday, June 8, 2010
Drop your baggage

                • We actually have good browsers
                • CSS3 (flex box anyone?)


Tuesday, June 8, 2010
IE anyone?




Tuesday, June 8, 2010
IE anyone?




Tuesday, June 8, 2010
IE anyone?




Tuesday, June 8, 2010
Do what your runtime
                 can to - not more not
                          less


Tuesday, June 8, 2010
Test on the desktop

                • Firefox - Fennec (Nokia N900)
                • Opera - W3C
                • Webkit - iPhone / Palm


Tuesday, June 8, 2010
Test in the Simulator



Tuesday, June 8, 2010
And only then - test
                             on device


Tuesday, June 8, 2010
Desktop browser
                    consoles are still the
                    best debugging tools


Tuesday, June 8, 2010
Optimize code

                • JS - compress, shrinksafe
                • CSS - one file!
                • Images - sprites


Tuesday, June 8, 2010
Challenge



Tuesday, June 8, 2010
Raphaël can do this!
Tuesday, June 8, 2010
Getting started

                    • PhoneGap - http://phonegap.com
                    • http://blog.uxebu.com
                    • TouchScroll - http://bit.ly/cV27RD


Tuesday, June 8, 2010
Questions?
                          @nonken




Tuesday, June 8, 2010

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (8)

Preso1
Preso1Preso1
Preso1
 
Seguridad informatica
Seguridad informaticaSeguridad informatica
Seguridad informatica
 
Ssc1516 lyrics escolàpies el masnou gun royale - worried
Ssc1516 lyrics escolàpies el masnou gun royale - worriedSsc1516 lyrics escolàpies el masnou gun royale - worried
Ssc1516 lyrics escolàpies el masnou gun royale - worried
 
Ssc1516 lyrics escolàpies llúria 1 a_wewantahappylife
Ssc1516 lyrics escolàpies llúria 1 a_wewantahappylifeSsc1516 lyrics escolàpies llúria 1 a_wewantahappylife
Ssc1516 lyrics escolàpies llúria 1 a_wewantahappylife
 
Ssc1516 lyrics mare del diví pastor sabadell the rockets_locked away
Ssc1516 lyrics mare del diví pastor sabadell the rockets_locked awaySsc1516 lyrics mare del diví pastor sabadell the rockets_locked away
Ssc1516 lyrics mare del diví pastor sabadell the rockets_locked away
 
JST transcript
JST transcriptJST transcript
JST transcript
 
From Teams to Tribes: Creating a One Team culture
From Teams to Tribes: Creating a One Team cultureFrom Teams to Tribes: Creating a One Team culture
From Teams to Tribes: Creating a One Team culture
 
Selección de poemas para declamar
Selección de poemas para declamarSelección de poemas para declamar
Selección de poemas para declamar
 

Ähnlich wie Phone gap nikolaionken-08-06

Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06
Skills Matter
 
Multi Handset Development - ETE 2010
Multi Handset Development - ETE 2010Multi Handset Development - ETE 2010
Multi Handset Development - ETE 2010
Kevin Griffin
 
The New World of Smartphone Security
The New World of Smartphone SecurityThe New World of Smartphone Security
The New World of Smartphone Security
Trevor Hawthorn
 

Ähnlich wie Phone gap nikolaionken-08-06 (20)

Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06Html5 apps nikolaionken-08-06
Html5 apps nikolaionken-08-06
 
Mobile Web and Campus Assistant
Mobile Web and Campus AssistantMobile Web and Campus Assistant
Mobile Web and Campus Assistant
 
HTML5 offline
HTML5 offlineHTML5 offline
HTML5 offline
 
Introduction To Google App Engine
Introduction To Google App EngineIntroduction To Google App Engine
Introduction To Google App Engine
 
Creating New Interaction with the iPhone, Daniel Heffernan, Appschool
Creating New Interaction with the iPhone, Daniel Heffernan, AppschoolCreating New Interaction with the iPhone, Daniel Heffernan, Appschool
Creating New Interaction with the iPhone, Daniel Heffernan, Appschool
 
Libraries + Semantic Web = ?
Libraries + Semantic Web = ?Libraries + Semantic Web = ?
Libraries + Semantic Web = ?
 
Google App Engine - Devfest India 2010
Google App Engine -  Devfest India 2010Google App Engine -  Devfest India 2010
Google App Engine - Devfest India 2010
 
Moobile
MoobileMoobile
Moobile
 
2011 June - Singapore GTUG presentation. App Engine program update + intro to Go
2011 June - Singapore GTUG presentation. App Engine program update + intro to Go2011 June - Singapore GTUG presentation. App Engine program update + intro to Go
2011 June - Singapore GTUG presentation. App Engine program update + intro to Go
 
Building Apps with PhoneGap
Building Apps with PhoneGap Building Apps with PhoneGap
Building Apps with PhoneGap
 
Html5 Apps
Html5 AppsHtml5 Apps
Html5 Apps
 
Debugging your JavaScript
Debugging your JavaScriptDebugging your JavaScript
Debugging your JavaScript
 
Human APIs, the future of mobile
Human APIs, the future of mobileHuman APIs, the future of mobile
Human APIs, the future of mobile
 
20100608sigmod
20100608sigmod20100608sigmod
20100608sigmod
 
Social Network Technologies and Usages
Social Network Technologies and UsagesSocial Network Technologies and Usages
Social Network Technologies and Usages
 
Tomas Grails
Tomas GrailsTomas Grails
Tomas Grails
 
Multi Handset Development - ETE 2010
Multi Handset Development - ETE 2010Multi Handset Development - ETE 2010
Multi Handset Development - ETE 2010
 
Mobile IA Talk for Oz-IA 2009
Mobile IA Talk for Oz-IA 2009Mobile IA Talk for Oz-IA 2009
Mobile IA Talk for Oz-IA 2009
 
The New World of Smartphone Security
The New World of Smartphone SecurityThe New World of Smartphone Security
The New World of Smartphone Security
 
Railsconf 2010
Railsconf 2010Railsconf 2010
Railsconf 2010
 

Mehr von Skills Matter

Oscar reiken jr on our success at manheim
Oscar reiken jr on our success at manheimOscar reiken jr on our success at manheim
Oscar reiken jr on our success at manheim
Skills Matter
 
Russ miles-cloudfoundry-deep-dive
Russ miles-cloudfoundry-deep-diveRuss miles-cloudfoundry-deep-dive
Russ miles-cloudfoundry-deep-dive
Skills Matter
 
I went to_a_communications_workshop_and_they_t
I went to_a_communications_workshop_and_they_tI went to_a_communications_workshop_and_they_t
I went to_a_communications_workshop_and_they_t
Skills Matter
 

Mehr von Skills Matter (20)

5 things cucumber is bad at by Richard Lawrence
5 things cucumber is bad at by Richard Lawrence5 things cucumber is bad at by Richard Lawrence
5 things cucumber is bad at by Richard Lawrence
 
Patterns for slick database applications
Patterns for slick database applicationsPatterns for slick database applications
Patterns for slick database applications
 
Scala e xchange 2013 haoyi li on metascala a tiny diy jvm
Scala e xchange 2013 haoyi li on metascala a tiny diy jvmScala e xchange 2013 haoyi li on metascala a tiny diy jvm
Scala e xchange 2013 haoyi li on metascala a tiny diy jvm
 
Oscar reiken jr on our success at manheim
Oscar reiken jr on our success at manheimOscar reiken jr on our success at manheim
Oscar reiken jr on our success at manheim
 
Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...
Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...
Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...
 
Cukeup nyc ian dees on elixir, erlang, and cucumberl
Cukeup nyc ian dees on elixir, erlang, and cucumberlCukeup nyc ian dees on elixir, erlang, and cucumberl
Cukeup nyc ian dees on elixir, erlang, and cucumberl
 
Cukeup nyc peter bell on getting started with cucumber.js
Cukeup nyc peter bell on getting started with cucumber.jsCukeup nyc peter bell on getting started with cucumber.js
Cukeup nyc peter bell on getting started with cucumber.js
 
Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...
Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...
Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...
 
Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...
Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...
Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...
 
Progressive f# tutorials nyc don syme on keynote f# in the open source world
Progressive f# tutorials nyc don syme on keynote f# in the open source worldProgressive f# tutorials nyc don syme on keynote f# in the open source world
Progressive f# tutorials nyc don syme on keynote f# in the open source world
 
Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...
Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...
Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...
 
Dmitry mozorov on code quotations code as-data for f#
Dmitry mozorov on code quotations code as-data for f#Dmitry mozorov on code quotations code as-data for f#
Dmitry mozorov on code quotations code as-data for f#
 
A poet's guide_to_acceptance_testing
A poet's guide_to_acceptance_testingA poet's guide_to_acceptance_testing
A poet's guide_to_acceptance_testing
 
Russ miles-cloudfoundry-deep-dive
Russ miles-cloudfoundry-deep-diveRuss miles-cloudfoundry-deep-dive
Russ miles-cloudfoundry-deep-dive
 
Serendipity-neo4j
Serendipity-neo4jSerendipity-neo4j
Serendipity-neo4j
 
Simon Peyton Jones: Managing parallelism
Simon Peyton Jones: Managing parallelismSimon Peyton Jones: Managing parallelism
Simon Peyton Jones: Managing parallelism
 
Plug 20110217
Plug   20110217Plug   20110217
Plug 20110217
 
Lug presentation
Lug presentationLug presentation
Lug presentation
 
I went to_a_communications_workshop_and_they_t
I went to_a_communications_workshop_and_they_tI went to_a_communications_workshop_and_they_t
I went to_a_communications_workshop_and_they_t
 
Plug saiku
Plug   saikuPlug   saiku
Plug saiku
 

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
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
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
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
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
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
 
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...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
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
 
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
 
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
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 

Phone gap nikolaionken-08-06