Your SlideShare is downloading. ×
Working and Features of HTML5 and PhoneGap - An Overview
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Working and Features of HTML5 and PhoneGap - An Overview


Published on

Anuj Singh Kanyal from BlazeClan technologies presents an overview of HTML5 and PhoneGap & how the next generation of web/mobile computing is going to change.

Anuj Singh Kanyal from BlazeClan technologies presents an overview of HTML5 and PhoneGap & how the next generation of web/mobile computing is going to change.

Published in: Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. HTML5 & PhoneGap Overview February, 2013 Anuj Singh Kanyal 1
  • 2. Agenda• HTML• XHTML• HTML5 Introduction• HTML5 Feature• HTML5 Future• HTML5 Demonstration• PhoneGap• PhoneGap Build• PhoneGap application DemonstrationBlazeClan 2 Cloud IT Better
  • 3. HTML , XHTML AND HTML5BlazeClan 3
  • 4. HTML• Designed for sharing information in simple format.• Browser were very lenient while rendering HTML.• Internet suffered due to browser war!.• Going to future by turning back on it.• Who suffered it all?• What came of the war? Firefox IE supported supported Netscape supported Need to think of supported browserBlazeClan 4 Cloud IT Better
  • 5. XHTML• Here comes the Hitler of Syntax.• Application of XML.• HTML made more strict.BlazeClan 5 Cloud IT Better
  • 6. HTML5• Forget the past,HTML5 is the bright future for internet.• What it is?• What are all new elements?• Still thinking of backward compatibility?• It is mobile too!.• No new JavaScript.• Browser are moving towards it.• Not a standard now but sure it will be.• What is CSS3??BlazeClan 6 Cloud IT Better
  • 7. CSS3• CSS3 is new and with many new modules.• Box Model• Backgrounds and Borders• Animations• 2D/3D transformations• Text EffectsBlazeClan 7 Cloud IT Better
  • 8. New in HTML5• Canvas• Storage• Geolocation• Web Worker• Drag & Drop• Content Editable• Video/Audio• New elements like legend, footer etc.BlazeClan 8 Cloud IT Better
  • 9. Canvas , Data storage , geo-location• Canvas • Allows to draw graphics • Export data• Geo-location • Gives approximate location of user• Data storage • Data is stored as key value pair • Two types • Session storage Stores data for current window Remains till window is open • Local storage Stores data for current domain Remains till user deletes it or by codeBlazeClan 9 Cloud IT Better
  • 10. Web Worker , Drag & Drop , Content Editable• Web Worker • Runs independent of Browser Web Page current window CSS3 • No access to calling file • Asynchronous Web Worker JavaScript • Heavy task can be achieved (A JavaScript File) without slowing down the DOM browser• Drag & Drop • Feature available in IE from IE 5 ! Web Worker • All elements are drag gable• Content Editable • Every text element is editable BlazeClan 10 Cloud IT Better
  • 11. PhoneGapBlazeClan 11 Cloud IT Better
  • 12. What is PhoneGap?• PhoneGap is an open source platform for building mobile application• PhoneGap Applications are web applications which takes the advantage of PhoneGap framework to access mobile features using JavaScript.• PhoneGap takes care of mobile specific configurations and development.• Applications can be thought of HTML5 web application running in full screen browser.• Many plug-ins are provided with PhoneGap framework like geo Location, File upload ,etc• A JavaScript file communicates with Native Plug-in.• Phonegap build was introduced by Adobe which takes assets folder and a configuration file to build a application.• Custom plug-in not supported with Phonegap Build.BlazeClan 12 Cloud IT Better
  • 13. ArchitectureBlazeClan 13 Cloud IT Better
  • 14. Support for Mobile and API’sBlazeClan 14 Cloud IT Better
  • 15. PhoneGap Build• A compiler on Cloud!• Builds Application for the files uploaded. • Refer to a Git repo or • Assets folder in zip format , config.xml file (optional)• New Features introduced • Hydration • Debugging • Faster CompilationBlazeClan 15 Cloud IT Better
  • 16. Setting up Environment• Requirement for Android • JDK 1.6+ • Eclipse Classic • Android SDK • Android ATD Plug-in for eclipse • Android AVD (Android Virtual Device) • Phonegap SDK• Requirement for iOS • iOS Developer account and certificate • xCode • Phonegap SDKBlazeClan 16 Cloud IT Better
  • 17. Plug-ins• At least two files: • JavaScript file • Native file (Java or C)• JavaScript is a interface between application and Phonegap plug-in.• Plug-ins functionality are accessed by JavaScript using call back functionsBlazeClan 17 Cloud IT Better
  • 18. Important files• Config.xml file in assets folder • Application Icon , Name ,Version etc. • Author name, email address• Cordova-x.x.js in assets folder • Provides a way to connect Native Plugin and Code to communicate with JavaScript(Plugin) and application.• Config.xml file in res/xml folder • List of plug -ins for this application • Access origins• Src folder • Contains all plug-ins for the application.• Libs folder • Contains libraries files for used by application like cordova.jar etc.BlazeClan 18 Cloud IT Better
  • 19. Thank youFor your Mobile Cloud & Enterprise Mobility Requirements, contact us at