Framework for cross-platform mobile appsAccess native platform features from JavaScriptSupports most major mobile platform...
Demo
Cloud-based service for compiling HTML5 assetsproduced with PhoneGap into native binaries
Optional build-configuration file
Demo
navigator.notification provides methods forprompting and alerting users        Method                             Descript...
navigator.network.connection.type propertyreveals type of network connectionAlso indicates whether device is connected
window.device properties provide informationabout host device   Property                              Descriptionname     ...
Events fired by PhoneGap for suspending,resuming, back-button presses, and more      Event                                ...
Demo
navigator.accelerometer provides API for gettingacceleration vectors at specified intervals        Method                 ...
<Capability Name="ID_CAP_SENSORS" />
Demo
navigator.compass provides API for gettingcompass headings at specified intervals      Method                             ...
<Capability Name="ID_CAP_SENSORS" />
Demo
Navigator.camera provides API for shootingphotos and choosing photos from the pictureslibrary    Method         Descriptio...
PHOTOLIBRARY
<Capability Name="ID_CAP_ISV_CAMERA" /><Capability Name="ID_CAP_CAMERA" /><Capability Name="ID_CAP_MEDIALIB" />
Demo
navigator.contacts provides API for creating newcontacts and finding existing ones       Method                           ...
options.filter = "Hill";
<Capability Name="ID_CAP_CONTACTS" />
Demo
http://www.wintellect.com/downloads/phonegap.zip
http://aka.ms/mbl-win8                   http://aka.ms/mbl-win8/build                             http://aka.ms/mbl-win8/d...
Building Cross-Platform Mobile Applications with HTML5
Building Cross-Platform Mobile Applications with HTML5
Building Cross-Platform Mobile Applications with HTML5
Building Cross-Platform Mobile Applications with HTML5
Building Cross-Platform Mobile Applications with HTML5
Building Cross-Platform Mobile Applications with HTML5
Building Cross-Platform Mobile Applications with HTML5
Building Cross-Platform Mobile Applications with HTML5
Building Cross-Platform Mobile Applications with HTML5
Building Cross-Platform Mobile Applications with HTML5
Building Cross-Platform Mobile Applications with HTML5
Building Cross-Platform Mobile Applications with HTML5
Upcoming SlideShare
Loading in...5
×

Building Cross-Platform Mobile Applications with HTML5

1,017

Published on

Windows Phone 7 is a great platform, but the greatest challenge facing mobile developers today is writing apps that run on all the popular mobile platforms. With HTML5 and PhoneGap, you can write apps that exploit native features of the operating system and run on a wide range of devices. And the recently released PhoneGap 1.3 makes Windows Phone 7 a first-class citizen in the PhoneGap environment. Join the fun as Jeff explores the world of cross-platform mobile development and demonstrates the pros and cons of going HTML5 versus going native.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,017
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building Cross-Platform Mobile Applications with HTML5

  1. 1. Framework for cross-platform mobile appsAccess native platform features from JavaScriptSupports most major mobile platformsPhoneGap Build builds native packages
  2. 2. Demo
  3. 3. Cloud-based service for compiling HTML5 assetsproduced with PhoneGap into native binaries
  4. 4. Optional build-configuration file
  5. 5. Demo
  6. 6. navigator.notification provides methods forprompting and alerting users Method Descriptionalert Displays an alert box or dialog boxbeep Plays an audible beepconfirm Displays a confirmation dialogvibrate Vibrates the device for the specified number of seconds
  7. 7. navigator.network.connection.type propertyreveals type of network connectionAlso indicates whether device is connected
  8. 8. window.device properties provide informationabout host device Property Descriptionname Device namephonegap PhoneGap versionplatform Operating system nameuuid Device IDversion Operating system version
  9. 9. Events fired by PhoneGap for suspending,resuming, back-button presses, and more Event Descriptiondeviceready Fired when PhoneGap is fully loaded and initializedpause/resume Fired when application is paused (suspended) or resumedonline/offline Fired when network connection status changesbatterylow Fired when battery is low (level is device-specific)batterycritical Fired when battery is critically low (level is device-specific)backbutton Fired when the back button is pressed
  10. 10. Demo
  11. 11. navigator.accelerometer provides API for gettingacceleration vectors at specified intervals Method DescriptiongetCurrentAcceleration Gets current X, Y, and Z acceleration vectorswatchAcceleration Provides acceleration vectors at specified time intervalsclearWatch Cancels a watch created with watchAcceleration
  12. 12. <Capability Name="ID_CAP_SENSORS" />
  13. 13. Demo
  14. 14. navigator.compass provides API for gettingcompass headings at specified intervals Method DescriptiongetCurrentHeading Gets the current heading (heading and magnetic)watcHeading Provides the heading at specified time intervalsclearWatch Cancels a watch created with watchHeading Provides a new heading every time it changes by thewatchHeadingFilter specified number of degreesclearWatchFilter Cancels a watch creates with watchHeadingFilter
  15. 15. <Capability Name="ID_CAP_SENSORS" />
  16. 16. Demo
  17. 17. Navigator.camera provides API for shootingphotos and choosing photos from the pictureslibrary Method Description Snaps a photo with the camera, or returns a photo selected fromgetPictures the pictures library
  18. 18. PHOTOLIBRARY
  19. 19. <Capability Name="ID_CAP_ISV_CAMERA" /><Capability Name="ID_CAP_CAMERA" /><Capability Name="ID_CAP_MEDIALIB" />
  20. 20. Demo
  21. 21. navigator.contacts provides API for creating newcontacts and finding existing ones Method Descriptioncreate Creates a contactfind Queries the contacts database and returns matching contacts
  22. 22. options.filter = "Hill";
  23. 23. <Capability Name="ID_CAP_CONTACTS" />
  24. 24. Demo
  25. 25. http://www.wintellect.com/downloads/phonegap.zip
  26. 26. http://aka.ms/mbl-win8 http://aka.ms/mbl-win8/build http://aka.ms/mbl-win8/devprev http://aka.ms/mbl-win8/store
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×