This document discusses using CSS3 animations and transitions with PhoneGap. It provides an overview of CSS3 capabilities like selectors, box model, and animations. PhoneGap allows building apps that render to a mobile device's WebView and access native features. The document demonstrates simple CSS3 transitions and animations, and discusses tools for Android development like the ADT Bundle and Applaud. It proposes using these techniques to build a mobile app to help users remember physiotherapy exercises.

1. CSS3 Animations &
Transitions with PhoneGap
– Mark A R Smith 11/04/13
@mark_a_r_smith
mark@mymittens.co.uk

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. 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. What we want to do…

5. What we want to do…

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. …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. 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. 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. Sencha Touch
• Just what I’m using (great application level JS engine)
• You could use JQuery Mobile, or just straight HTML

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. 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. 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. 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. 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