\n

\n PhoneGap allows developers to work with essentially the same tools (HTML, CSS, and JavaScript) used for creating and maintaining websites. When Adobe supported the PhoneGap framework, an installation file would be downloaded which made the setup process simple. However, Adobe announced discontinuance of PhoneGap as of October 1, 2020 (see www.phonegap.com\/start). PhoneGap is now a free and open source, but\u00a0unsupported product.\u00a0This makes our usage and preview of PhoneGap this week somewhat limited. I want to again start with the\u00a0user interface\u00a0for building (simulate building) a PhoneGap application (see pp. 330-331).\u00a0The requirements for this Derby app\u00a0is to provide\u00a0two screens; one that lists all of the teams\/leagues and one that lists all the players. When a league\/team is selected, the application shows the roster (screen) for the team. When a player is selected, it shows which team (screen) the player belongs to and his\/her number.For our assignment this week (\u00a0Assignment 5), you will need to simulate\u00a0two screens\/interfaces;\u00a0one screen list the Derby teams\/header added (\u00a0Figure 11:29, p. 334 bottom) and one screen list is a Derby roster search\/header added (\u00a0Figure 11:30, p. 335 bottom) – refer to our previous lesson on User Interface Design, chapter 4, also see a YouTube video in this week’s\u00a0Learning Materials\u00a0on using Figma for modeling. There must be navigation between these screens\/pages. With PhoneGap every screen is another HTML page. So you will create your screens as HTML pages then embed the necessary UI elements onto the screen\/page. On a website, the “index file” holds the HTML content for the main page. Different tags (head, anchor, page, Div, numbered and unnumbered list, etc.) are wrapped within HTML\/BODY code to give the page its features and functionality. Cascade Style Sheets (CSS) can be embodied within the HTML to give dynamic customization\/style to pages, and JavaScripts provide animation or interactive functions. Our authors provide examples of\u00a0 HTML script, CSS and useful JavaScript Libraries from which you can leverage for your understanding and simulation. Your goal is to:\n <\/p>\n

\n
1. \n Download and install Figma\u00a0(can use comparable SW of your choice) on your computer. This is same as used in previous simulation assignments.\n <\/li>\n
2. \n Model each screen using Figma\u00a0– from the Figma widgets\/icons library, select figures (circles, rectangles, ovals, call-outs, etc) to\u00a0represent\u00a0the UI elements needed for your two screens,\n <\/li>\n
3. \n Place these figures onto a two design canvas that reflect the two screens that you are modelling.\n <\/li>\n<\/ol>\n

   \n Make one screen shot here\u00a0that shows you have\u00a0install the Figma modelling\/wireframing tool\u00a0(or a comparable tool of your choice)\u00a0and did some modelling*\u00a0You are ready to start simulating your app (two screens\/interfaces that match\u00a0Figure 11:29\u00a0and\u00a0Figire 11:30\u00a0above). First, state what platform (iOS, Android, Windows, etc.) you are simulating.\n <\/p>\n

   \n
   1. \n Select two mobile app templates appropriate for the platform that you are simulating – one for each prototype screen.\n <\/li>\n
   2. \n From the Figma widgets\/icons library convert figures from your model; carefully size and position these as UI elements (icons, Button, View, Tablelayout, etc.) that follow the (Figure 11:29, p.334) – list of Derby teams\u00a0(first prototype screen)\n <\/li>\n
   3. \n From the Figma widgets\/icons library convert figures from your model and carefully size and position as UI elements (icons, Button, View, Tablelayout, etc.) that follows the (Figure 11:30, p.335) –\u00a0a Derby roster search\u00a0(second prototype screen)\n <\/li>\n
   4. \n Place each of your prototype screens onto a mobile app template that you selected above. (I suggest here that you identify\/label EACH UI element used on each prototype screen)\n <\/li>\n<\/ol>\n

      \n Make a second screen shot here\u00a0that shows\u00a0two screens with placement of UI content provided by HTML, CSS, and JavaScript\u00a0(this is your simulated mobile app)Your app is using HTML, CSS, and JavaScript coding, but must conform to native features for whatever platform you are simulating.\u00a0Write an explanation for\u00a0each UI element that you used\u00a0– that provides functionality for your mobile app; mostly ( HTML, CSS, and\/or JavaScript)\u00a0(No coding; just explanations required).* Remember with PhoneGap each screen is an html page\/screen (a UI element); UI elements are generated and embedd within each screen using HTML, JavaScripts,and CSS to achieve the native platform look\/feel. Also remember – ensure that the JavaScript function\u00a0onDeviceReady\u00a0is fired (p.324)\n <\/p>\n

      \n
      1. \n For your first prototype screen –\u00a0list of Derby teams, explain Each UI element describing what\/how it gives functionality to your simulated app.\u00a0Hint: there must be a\u00a0scroller,\u00a0a query, and\u00a0storage function\u00a0like lawnchair\u00a0in order for this to work.\n <\/li>\n
      2. \n For your second prototype screen –\u00a0a Derby roster search, explain Each UI element describing what\/how it gives functionality to your simulated app.\u00a0Hint: need a textbox, a search button and\u00a0onDeviceReady\u00a0function.\n <\/li>\n
      3. \n Describe\/explain 4 principles of mobile interface design that are employed in your simulated app (see chapter 4 and the article: “Principles of mobile interface design” left in this week’s\u00a0Learning Materials\u00a0section\n <\/li>\n
      4. \n Explain native features that are peculiar – must exist for the platform you are simulationg (example: BackStack and 4 fundamentals for Android; basic functions of iOS apps (see chapter 6 – Androd; chapter 7 – IOS).\n <\/li>\n<\/ol>\n

         \n When you are ready to post, click the\u00a0\u00a0Week 13 – Assignment 5 (Building (simulating)\u00a0a Derby app with PhoneGap)\u00a0assignment link, then\u00a0\u00a0Either\u00a0click the ”\u00a0Write Submission” link and directly paste your screen shots into this assignment box\u00a0\u00a0OR\u00a0\u00a0\u00a0Browse your\u00a0Computer\u00a0and\u00a0add\u00a0the entire Microsoft Word document as an attachment (Mac users, please remember to append the “.docx” extension to the filename).\n <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

         PhoneGap allows developers to work with essentially the same tools (HTML, CSS, and JavaScript) used for creating and maintaining websites. When Adobe supported the PhoneGap framework, an installation file would be downloaded which made the setup process simple. However, Adobe announced discontinuance of PhoneGap as of October 1, 2020 (see www.phonegap.com\/start). PhoneGap is now a […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_joinchat":[]},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/posts\/241851"}],"collection":[{"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/comments?post=241851"}],"version-history":[{"count":1,"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/posts\/241851\/revisions"}],"predecessor-version":[{"id":241852,"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/posts\/241851\/revisions\/241852"}],"wp:attachment":[{"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/media?parent=241851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/categories?post=241851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qualityassignments.net\/wp-json\/wp\/v2\/tags?post=241851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}