Slippery Rock University Dr. Deborah Whitfield Go Browns!
Phone Gap Chapter 3: Mobile Frameworks
Cross-Platform Mobile App Development
CpSc 215

From index.html: 

    <meta charset="utf-8" />
<!-- unicode 1 to 4 Bytes -->
    <meta name="format-detection" content="telephone=no" />
<!-- don't look for telephone numbers in the page -->
    <meta name="msapplication-tap-highlight" content="no" />
<!-- turn off “tap” highlighting -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- Use device’s full width and disable scaling -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />
<!-- Use this one for iOS… -OR- -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' 'unsafe-eval' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" />
<!-- Use this one for Android (TalkBack, the screen reader, needs ssl.gstatic.com) -->
    < rel="stylesheet" type="text/css" href="css/index.css" />
<!-- Your CSS, if external -->
How to include media queries
https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation Event Handler for Device orientation (portrait/landscape) & Motion

Capturing an image, sound or video
Base64 strings – images

You should be concerned with app size at this point. How much memory will app use? If it links to images, they should be as small as is reasonable for the app.
That also means you have to be online, potential delays, and it may impact user’s data charges.

Base64 is a way of encoding the image and including it in the web page itself (not a separate call to a server) – for us that means that it is part of the app downloaded & installed. There is a pretty good, simple description here: Base64 encoding images. (Interesting side note – by now you should be able to figure out the source code for this web page, including the embedded images.)

There are a lot of frameworks out there for developing nice looking apps.
By all means, select one you like (Of course, document its source).
However, for class examples, we will use JQuery Mobile

In class today, do Time for Action beginning on page 45 of your text.
Instead of finding, downloading and updating the jquery js and css files, use these:

Make sure you have a folder named "images" within the www/css folder and it contains these images: