CSS3 Animations & Transitions with PhoneGap


Published on

Using modern browser features to build webView based apps using phonegap.

Beginner level

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

CSS3 Animations & Transitions with PhoneGap

  1. 1. CSS3 Animations &Transitions with PhoneGap – Mark A R Smith 11/04/13 @mark_a_r_smith mark@mymittens.co.uk
  2. 2. CSS3• Greatly improved set of tools for modern browsers – Selectors – Box Model – Backgrounds and Borders – Text Effects – 2D/3D Transformations – Animations – Multiple Column Layout – User Interface• Hardware acceleration!!!
  3. 3. PhoneGap/Cordova• All platforms have a WebView (iOS/Android/Windows8/etc)• PhoneGap allows rendering to such a WebView with hooks to hardware (i.e. Compass, vibration, Camera)
  4. 4. What we want to do…
  5. 5. What we want to do…
  6. 6. What we want to do…• Build an app. to assist with remembering physio. exercises. – User Story 1: Display exercise to user – User Story 2: Display exercises to user via mobile … – User Story 3: Display specific exercises to user via mobile …let’s write some markup…
  7. 7. …but first some tools!• Android ADT bundle – http://developer.android.com/sdk/index.html• Applaud – http://www.mobiledevelopersolutions.com/home/start/startdet ails• (Sencha SDK/SenchaCMD) – http://www.sencha.com/products/sencha-cmd/download – http://www.sencha.com/products/touch/download/
  8. 8. Android ADT Bundle• Includes… – A code editor (eclipse) preconfigured with the Android Developer Tools (code highlighting, intelli-sense, build tools) – SDK tools. The engine to drive this stuff – Emulator (slow as shit – plug in!)
  9. 9. Applaud• Automates creation of PhoneGap project for Android• Quite out of date (uses PhoneGap 1.9, 2.6 is latest)• Can point to later API’s• Can include other API’s straight into project (Jquery, etc)• Makes creating a new app. completely painless
  10. 10. Sencha Touch• Just what I’m using (great application level JS engine)• You could use JQuery Mobile, or just straight HTML
  11. 11. Back to Physio.• Simple “Hello World”• User Story: Display exercise to user – Task 1: create HTML to display exercise 1 – Task 2: display exercise 1 on mobile device …now let’s really do some markup…
  12. 12. CSS3 Transitions• Doing nothing different, but does it with a cool animation effect. h1{ font-size:26px; transition: font-size 5s; } h1:hover{ font-size: 200px; } …now let’s do some markup…
  13. 13. CSS3 Animations• Two Step – Defining when animation happens and for how long – Defining animation itself h1{ color:red; animation:myfirst 5s; } @keyframes myfirst @keyframes myfirst {background:red { OR 0% {color:red;} from {color:red} 100% {color:yellow;} to {color:yellow;} } } …now let’s do some markup…
  14. 14. Back to Physio.• Transfer to Mobile• User Story: Display exercises to user via mobile – Task 1: create menu system – Task 2: insert created exercises into menu …let’s wrap this up…
  15. 15. End Bit• CSS3 offers some really great performant abilities to your markup• I still forget my physio. Exercises• Questions???• Mark A R Smith MA BEng – mark@mymittens.co.uk