SlideShare una empresa de Scribd logo
1 de 29
Who Am I?




                     Steve Gill
            PhoneGap Community Champ
              Black Belt in TaeKwonDo
                    Drinks Beer
                   Loves Hockey
                    @SteveSGill
                steveng@adobe.com
What is
PhoneGap?
Why Cross-
platform?
Smartphone Platform Market Share




                                           • 90 million
                                             people in
                                           the US own
                                           smartphone
                                                      s




 Source: comScore MobiLens, October 2011
The Trend: Smartphone Platform Market Share




 Source: comScore MobiLens, October 2011
Convert from Desktop to Mobile
Benefits


• One code base, multiple platforms
• Reuse existing web developer skills
• Shorter learning curve
• Faster development
• Mobile site and app with same code
• Reusable web code and infrastructure
• Code portable to other environments
• Based on open standards
• Active and growing community
• Open source with multiple large stakeholders
Differentiators


• Runs on more platforms
• Open community & contributors
• Web and App with same code
• Framework and tool support
Supported Platforms


• iOS (iPad, iPod Touch, iPhone)
• Android (Everything)
• BlackBerry (Smartphones, PlayBook)
• WebOS
• Symbian
• Windows Phone
• Bada
Standards Based




                  +    W3C Device APIs and
                      Policies Working Group
                               (DAP)
APIs


• Accelerometer   •   File
• Camera          •   Geolocation
                  •   Media
• Capture
                  •   Network
• Compass
                  •   Notification
• Connection      •   Storage
• Contacts
• Device
• Events
Basics




         Setup the Viewport

<meta name="viewport" content="width=devic
e-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no;" />
Basics




Listen for the Device Ready Event
document.addEventListener("deviceready", onDeviceReady,
false);

function onDeviceReady(){
//Do Stuff
}
Basics




          Accelerometer Example
function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + 'n' +
          'Acceleration Y: ' + acceleration.y + 'n' +
          'Acceleration Z: ' + acceleration.z + 'n' +
          'Timestamp: '      + acceleration.timestamp + 'n');
};
function onError() {
    alert('onError!');
};
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
Plugins


• Push Notifications (Urban Airship)
• Child browser
• Facebook
• Native Controls


•   Many more, and more coming
Free & Open Source
Tools


•   Emulators
    •   Ripple
    •   Any platform emulator
        (iOS Simulator, Android Virtual Devices, etc)
•   Debugging
    •   Weinre (web inspector remote)
•   IDEs
    •   Eclipse
    •   Dreamweaver
    •   Textmate
Javascript Libraries




                       xui
Perceived Risks & Concerns


• Web tech not appropriate for everything
• Many webkits
• Many screens/pixel densities
• There are bugs!


• App store rejections
• Not "native"
• Performance
• Security
http://build.phonegap.com




                            26
Basics




         DEMO TIME
Resources


• Source: github.com/callback
• Bugs: issues.apache.org/jira/browse/CB
• Docs: docs.phonegap.com
• Wiki: wiki.phonegap.com
• Support:
  groups.google.com/group/phonegap
• IRC: irc.freenode.net #phonegap
• Apps: phonegap.com/apps
phonegap.com

             @phonegap

          facebook.com/phonegap




Thanks!

Más contenido relacionado

Destacado

Multimedia student tutorial stacey leeth
Multimedia student tutorial stacey leethMultimedia student tutorial stacey leeth
Multimedia student tutorial stacey leethlaskowski07
 
An introduction to addition final version
An introduction to addition final versionAn introduction to addition final version
An introduction to addition final versionlaskowski07
 
Business Continuity Planning
Business Continuity PlanningBusiness Continuity Planning
Business Continuity PlanningPete DiSantis
 
Coke Worldcup Screenings - Nationally
Coke Worldcup Screenings - NationallyCoke Worldcup Screenings - Nationally
Coke Worldcup Screenings - NationallyMilon Kumar Biswas
 
Multiplication, part 2
Multiplication, part 2Multiplication, part 2
Multiplication, part 2laskowski07
 
Multiplication, part 1
Multiplication, part 1Multiplication, part 1
Multiplication, part 1laskowski07
 
Social calming tech
Social calming techSocial calming tech
Social calming techyiyin7
 
Digital divide pp
Digital divide ppDigital divide pp
Digital divide ppTechined
 
Le parole della lim presentazione del 2° incontro
Le parole della lim   presentazione del 2° incontroLe parole della lim   presentazione del 2° incontro
Le parole della lim presentazione del 2° incontropierky
 
Le parole della lim presentazione del 2° incontro
Le parole della lim   presentazione del 2° incontroLe parole della lim   presentazione del 2° incontro
Le parole della lim presentazione del 2° incontropierky
 
Cos’è la lim presentazione 1° incontro
Cos’è la lim   presentazione 1° incontroCos’è la lim   presentazione 1° incontro
Cos’è la lim presentazione 1° incontropierky
 

Destacado (17)

Introduction scrum
Introduction scrumIntroduction scrum
Introduction scrum
 
Division
DivisionDivision
Division
 
Multimedia student tutorial stacey leeth
Multimedia student tutorial stacey leethMultimedia student tutorial stacey leeth
Multimedia student tutorial stacey leeth
 
An introduction to addition final version
An introduction to addition final versionAn introduction to addition final version
An introduction to addition final version
 
Be a hero today
Be a hero todayBe a hero today
Be a hero today
 
Business Continuity Planning
Business Continuity PlanningBusiness Continuity Planning
Business Continuity Planning
 
Coke Worldcup Screenings - Nationally
Coke Worldcup Screenings - NationallyCoke Worldcup Screenings - Nationally
Coke Worldcup Screenings - Nationally
 
Multiplication, part 2
Multiplication, part 2Multiplication, part 2
Multiplication, part 2
 
Module2 539gcu
Module2 539gcuModule2 539gcu
Module2 539gcu
 
Multiplication, part 1
Multiplication, part 1Multiplication, part 1
Multiplication, part 1
 
Social calming tech
Social calming techSocial calming tech
Social calming tech
 
Digital divide pp
Digital divide ppDigital divide pp
Digital divide pp
 
Le parole della lim presentazione del 2° incontro
Le parole della lim   presentazione del 2° incontroLe parole della lim   presentazione del 2° incontro
Le parole della lim presentazione del 2° incontro
 
Le parole della lim presentazione del 2° incontro
Le parole della lim   presentazione del 2° incontroLe parole della lim   presentazione del 2° incontro
Le parole della lim presentazione del 2° incontro
 
Cos’è la lim presentazione 1° incontro
Cos’è la lim   presentazione 1° incontroCos’è la lim   presentazione 1° incontro
Cos’è la lim presentazione 1° incontro
 
Piano power point
Piano power pointPiano power point
Piano power point
 
Maslow
MaslowMaslow
Maslow
 

Similar a Intro to-phone gap-techwed-14dec2011

PhoneGap Slides from HTML5 Next and Now
PhoneGap Slides from HTML5 Next and NowPhoneGap Slides from HTML5 Next and Now
PhoneGap Slides from HTML5 Next and NowSteve Gill
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
Phonegap facebook plugin - Seoul & Tokyo
Phonegap facebook plugin - Seoul & TokyoPhonegap facebook plugin - Seoul & Tokyo
Phonegap facebook plugin - Seoul & TokyoSteve Gill
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011davyjones
 
PhoneGap at Facebook Mobile Hack
PhoneGap at Facebook Mobile HackPhoneGap at Facebook Mobile Hack
PhoneGap at Facebook Mobile HackPhoneGap
 
PhoneGap talk from Singapore
PhoneGap talk from SingaporePhoneGap talk from Singapore
PhoneGap talk from SingaporeSteve Gill
 
Phonegap facebook- plugin
Phonegap facebook- pluginPhonegap facebook- plugin
Phonegap facebook- pluginSteve Gill
 
The Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java DeveloperThe Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java Developerbalunasj
 
Android development workshop
Android development workshopAndroid development workshop
Android development workshopJeff Sonstein
 
Tech trends - Get some of these skills to stay current
Tech trends - Get some of these skills to stay currentTech trends - Get some of these skills to stay current
Tech trends - Get some of these skills to stay currentSandeep Bhatnagar
 
PhoneGap - Now and the Future
PhoneGap - Now and the FuturePhoneGap - Now and the Future
PhoneGap - Now and the FutureTim Kim
 
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发Zhang Xiaoxue
 
Cross-platform App with PhoneGap - Henri Mägi
Cross-platform App with PhoneGap - Henri MägiCross-platform App with PhoneGap - Henri Mägi
Cross-platform App with PhoneGap - Henri MägiMobileMonday Estonia
 
Developing Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGapDeveloping Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGapAmar Mesic
 
Mobeers waterloo-2011
Mobeers waterloo-2011Mobeers waterloo-2011
Mobeers waterloo-2011Brian LeRoux
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Ryan Cuprak
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?Reto Meier
 
Hybrid application development
Hybrid application developmentHybrid application development
Hybrid application developmentEngin Hatay
 

Similar a Intro to-phone gap-techwed-14dec2011 (20)

PhoneGap Slides from HTML5 Next and Now
PhoneGap Slides from HTML5 Next and NowPhoneGap Slides from HTML5 Next and Now
PhoneGap Slides from HTML5 Next and Now
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Phonegap facebook plugin - Seoul & Tokyo
Phonegap facebook plugin - Seoul & TokyoPhonegap facebook plugin - Seoul & Tokyo
Phonegap facebook plugin - Seoul & Tokyo
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
PhoneGap at Facebook Mobile Hack
PhoneGap at Facebook Mobile HackPhoneGap at Facebook Mobile Hack
PhoneGap at Facebook Mobile Hack
 
Future of Mobile
Future of MobileFuture of Mobile
Future of Mobile
 
PhoneGap talk from Singapore
PhoneGap talk from SingaporePhoneGap talk from Singapore
PhoneGap talk from Singapore
 
Phonegap facebook- plugin
Phonegap facebook- pluginPhonegap facebook- plugin
Phonegap facebook- plugin
 
The Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java DeveloperThe Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java Developer
 
Android development workshop
Android development workshopAndroid development workshop
Android development workshop
 
Tech trends - Get some of these skills to stay current
Tech trends - Get some of these skills to stay currentTech trends - Get some of these skills to stay current
Tech trends - Get some of these skills to stay current
 
PhoneGap - Now and the Future
PhoneGap - Now and the FuturePhoneGap - Now and the Future
PhoneGap - Now and the Future
 
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发
 
Cross-platform App with PhoneGap - Henri Mägi
Cross-platform App with PhoneGap - Henri MägiCross-platform App with PhoneGap - Henri Mägi
Cross-platform App with PhoneGap - Henri Mägi
 
Developing Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGapDeveloping Windows Phone 8 apps using PhoneGap
Developing Windows Phone 8 apps using PhoneGap
 
Mobeers waterloo-2011
Mobeers waterloo-2011Mobeers waterloo-2011
Mobeers waterloo-2011
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
Phone gap
Phone gapPhone gap
Phone gap
 
Hybrid application development
Hybrid application developmentHybrid application development
Hybrid application development
 

Último

social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajanpragatimahajan3
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...fonyou31
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...anjaliyadav012327
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 

Último (20)

social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 

Intro to-phone gap-techwed-14dec2011

  • 1.
  • 2. Who Am I? Steve Gill PhoneGap Community Champ Black Belt in TaeKwonDo Drinks Beer Loves Hockey @SteveSGill steveng@adobe.com
  • 4.
  • 5.
  • 6.
  • 8. Smartphone Platform Market Share • 90 million people in the US own smartphone s Source: comScore MobiLens, October 2011
  • 9. The Trend: Smartphone Platform Market Share Source: comScore MobiLens, October 2011
  • 10.
  • 11.
  • 12. Convert from Desktop to Mobile
  • 13. Benefits • One code base, multiple platforms • Reuse existing web developer skills • Shorter learning curve • Faster development • Mobile site and app with same code • Reusable web code and infrastructure • Code portable to other environments • Based on open standards • Active and growing community • Open source with multiple large stakeholders
  • 14. Differentiators • Runs on more platforms • Open community & contributors • Web and App with same code • Framework and tool support
  • 15. Supported Platforms • iOS (iPad, iPod Touch, iPhone) • Android (Everything) • BlackBerry (Smartphones, PlayBook) • WebOS • Symbian • Windows Phone • Bada
  • 16. Standards Based + W3C Device APIs and Policies Working Group (DAP)
  • 17. APIs • Accelerometer • File • Camera • Geolocation • Media • Capture • Network • Compass • Notification • Connection • Storage • Contacts • Device • Events
  • 18. Basics Setup the Viewport <meta name="viewport" content="width=devic e-width, initial-scale=1.0, maximum- scale=1.0, user-scalable=no;" />
  • 19. Basics Listen for the Device Ready Event document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady(){ //Do Stuff }
  • 20. Basics Accelerometer Example function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + 'n' + 'Acceleration Y: ' + acceleration.y + 'n' + 'Acceleration Z: ' + acceleration.z + 'n' + 'Timestamp: ' + acceleration.timestamp + 'n'); }; function onError() { alert('onError!'); }; navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
  • 21. Plugins • Push Notifications (Urban Airship) • Child browser • Facebook • Native Controls • Many more, and more coming
  • 22. Free & Open Source
  • 23. Tools • Emulators • Ripple • Any platform emulator (iOS Simulator, Android Virtual Devices, etc) • Debugging • Weinre (web inspector remote) • IDEs • Eclipse • Dreamweaver • Textmate
  • 25. Perceived Risks & Concerns • Web tech not appropriate for everything • Many webkits • Many screens/pixel densities • There are bugs! • App store rejections • Not "native" • Performance • Security
  • 27. Basics DEMO TIME
  • 28. Resources • Source: github.com/callback • Bugs: issues.apache.org/jira/browse/CB • Docs: docs.phonegap.com • Wiki: wiki.phonegap.com • Support: groups.google.com/group/phonegap • IRC: irc.freenode.net #phonegap • Apps: phonegap.com/apps
  • 29. phonegap.com @phonegap facebook.com/phonegap Thanks!

Notas del editor

  1. Who has heard of PhoneGap? Who has used PhoneGap?
  2. feel free to tweet me anything
  3. Open source Framework that allows you to build cross platform mobile applications using HTML5, CSS3 and JavaScript.
  4. # Problem you discovered / motivation for creating this company * You need expertise in ObjectiveC, Java, .Net, JavaScript, etc... * Resources are expensive and hard to find * Hire internally or an agency both $$$$! * Maintenance * Mobile website?
  5. # Problem you discovered / motivation for creating this company * You need expertise in ObjectiveC, Java, .Net, JavaScript, etc... * Resources are expensive and hard to find * Hire internally or an agency both $$$$! * Maintenance * Mobile website?
  6. Some of you might be thinking Let me show you one big reason
  7. 90 million people. Google has almost half the share, take that ios only devs Never met a single developer who enjoys developing for BB. PhoneGap and webworks making life better Lets see some trends
  8. microsoft, nokia + xbox integration will help back on topic
  9. Deploy apps to all smartphones Write one HTML5 + JS code base Use existing internal team of web devs Reuse existing code and web services Faster, cheaper development HTML5 and W3C standards compliant
  10. Many people using PhoneGap are converting their websites to mobile applications. Lots of reused code.
  11. Open Source, Based on open standards, Active and growing community
  12. Competitors: Appcelerator, RhoMobile, Corona: They don ’ t do it the same way. We don ’ t do any cross compiling to native code. Just run a web browser instance in a native app and run your web files locally
  13. Mac, Windows, anything with a good web browser
  14. We model the PhoneGap Api based on the standards defined by w3c, DAP, Mozzila Web API. You guys being web devs have to love that. Nobody wants to go back to the ie6 days
  15. Here are some of the API ’ s included with PhoneGap.
  16. As a web developer, what do you need to do.
  17. Wait for the device to be ready.
  18. PhoneGap was submitted to Apache when Nitobi got purchased by Adobe. Currently in incubation phase. Name changed to Callback/Cordova due to legal reasons. This name change only matters to people who actually work on the PhoneGap source code. We will still be calling it PhoneGap in the Community. Source code can currently be found on github. Note: Apache is more about OpenDevelopment than OpenSource.
  19. We are going to be making a big push into making better tools available to you guys this upcoming year
  20. Any Javascript Framework. Recently jQuery Mobile gaining traction
  21. Liquid Layouts Phones get more powerful, performance less of an issue. As secure as your web app. Anyone can view your source. Possibly do server side authentication for sensitive information. Or use a Plugin.