{"id":18142,"date":"2015-11-07T05:01:21","date_gmt":"2015-11-06T19:01:21","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=18142"},"modified":"2015-11-07T05:56:06","modified_gmt":"2015-11-06T19:56:06","slug":"android-app-learning-programming-ux-overlay-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/android-app-learning-programming-ux-overlay-tutorial\/","title":{"rendered":"Android App Learning Programming UX Overlay Tutorial"},"content":{"rendered":"
\"Android<\/a>

Android App Learning Programming UX Overlay Tutorial<\/p><\/div>\n

When last talking about our Android App “Learning Programming” we ventured to say, with respect to the “user experience” (UX … which isn’t me burping, but please read more below at Android App Learning Programming UX Primer Tutorial<\/a>) with Android App (or other mobile apps generally) …<\/p>\n

\n… “paring down of functionality” for smaller screen sizes sounds like a bit of a “cop-out” …\n<\/p><\/blockquote>\n

… well, we haven’t changed our mind about this, exactly, but we believe in a tiered thought pattern regarding the “user experience” for a variety of users. What we mean by that is that there are users with vastly differing motives who want to use the Android App “Learning Programming”. We think there would be …<\/p>\n

    \n
  1. users answering quiz questions to learn programming, alone<\/li>\n
  2. users answering quiz questions to learn programming, collaboratively<\/li>\n
  3. users who are just exercising their mind in “play”<\/li>\n
  4. users venturing into a completely unknown world for them, but curious about programming<\/li>\n<\/ol>\n

    The “users answering quiz questions to learn programming, alone” could benefit from a further “pared down” version that gets to the crux of what they aim to achieve without all the scoring and collaboration features. For those users, in particular, but not exclusively, we are adding a dropdown HTML select element titled “Just” sitting to the left of the question mark link (that attributes thanks to sources). So “Just ?” is a piece of functionality we want to encapsulate in an external piece of Javascript.<\/p>\n

    Perhaps you are wondering why the change is “external Javascript” when there are files on a web server involved (this is not rhetorical … there are “files on a web server involved”)? Well, yes, we adjust some PHP serverside code, but so little I’ll show you below … somewhere between <head> and <\/head> we place …<\/p>\n


    \n<script src='just.js' type='text\/javascript'><\/script>
    \n<\/code><\/p>\n

    How can these changes be changing an Android App? Well, the Android App uses a WebView, and the innards of the WebView are what the PHP and Javascript represent … cute, huh?<\/p>\n

    It behoves us to show you the external Javascript code then, there, here … just.js<\/a><\/p>\n

    This external Javascript does some “overlay” work … we’ve gone “high rise” thanks to our usual CSS suspects (for “overlay” work) …<\/p>\n