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.

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

No notes for slide

Working and Features of HTML5 and PhoneGap - An Overview

  1. 1. HTML5 & PhoneGap Overview February, 2013 Anuj Singh Kanyal 1
  2. 2. Agenda• HTML• XHTML• HTML5 Introduction• HTML5 Feature• HTML5 Future• HTML5 Demonstration• PhoneGap• PhoneGap Build• PhoneGap application DemonstrationBlazeClan 2 Cloud IT Better
  3. 3. HTML , XHTML AND HTML5BlazeClan 3
  4. 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. 5. XHTML• Here comes the Hitler of Syntax.• Application of XML.• HTML made more strict.BlazeClan 5 Cloud IT Better
  6. 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. 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. 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. 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. 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. 11. PhoneGapBlazeClan 11 Cloud IT Better
  12. 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. 13. ArchitectureBlazeClan 13 Cloud IT Better
  14. 14. Support for Mobile and API’sBlazeClan 14 Cloud IT Better
  15. 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. 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. 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. 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. 19. Thank youFor your Mobile Cloud & Enterprise Mobility Requirements, contact us at