List and describe the particular UI content - the HTML, CSS, and JavaScript libraries, you used that creates the functionality simulared in your app model.

List and describe the particular UI content – the HTML, CSS, and JavaScript libraries, you used that creates the functionality simulared in your app model.

Week 14 – Assignment 6: Building (simulating) a Derby app using PhoneGap

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 unsupported product. This makes our usage and preview of PhoneGap this week somewhat limited. I want to again start with the user interface for building (simulate building) a PhoneGap application (see pp. 330-331). The requirements for this Derby app is to provide two 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 ( Assignment 6), you will need to simulate two screens/interfaces; one screen list the Derby teams/header added ( Figure 11:29, p. 334 bottom) and one screen list is a Derby roster search/header added ( Figure 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 Learning Materials on 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 HTML script, CSS and useful JavaScript Libraries from which you can leverage for your understanding and simulation. Your goal is to:

first model each screen using Figma; place necessary UI elements onto each screen as desired,
place this model onto a template appropriate for the platform that you are building (iOS, Android, etc.),
then write an explanation describing the HTML/CSS/JavaScript code of each UI element and the functionality it provides for your app.

Download and install Figma (can use comparable SW of your choice) on your computer. This is same as used in previous simulation assignments.

Make one screen shot here that shows you have install the Figma wireframing tool (or a comparable tool of your choice)

* You are ready to start simulating your app (two screens/interfaces that match the two figures above).

First, state what platform (iOS, Android, Windows, etc.) you are simulating. Then be certain to mention any particulars that must exist for that platform (see chapters 6 and 7)
From the Figma widgets/icons library create a mock interface/screen that follows the (Figure 11:29, p.334) – list of Derby teams (Hint: Need to uss CCS and, there must be a scroller, a query, and a storage function like Lawnchair in order for this to work).
From the Figma widgets/icons library create a mock interface/screen that follows the (Figure 11:30, p.335) – a Derby roster search (Hint: Need a text box, a search button and onDeviceReady function)
Place each of these screens onto a mobile app template appropriate for the platform of which you are building (iOS, Android, etc.)

Make a second screen shot showing two screens with placement of UI content provided by HTML, CSS, and JavaScript (this is your final app)

Your app is using HTML, CSS, and JavaScript coding, but you ARE NOT required to do/show any coding for this assignment. Look at the appropriate coding that the authors provide and describe the functionality. Remember – ensure that the JavaScript function onDeviceReady is fired (p.324)

List and describe the particular UI content – the HTML, CSS, and JavaScript libraries, you used that creates the functionality simulared in your app model. Explain each UI element; what code/script provides what functionality for your app.

Make a third screen shot showing placement of content provided by HTML, CSS, and JavaScript (No coding is required)

When you are ready to post, click the Week 14 – Assignment 6: Building (simulating) a Derby app with PhoneGap assignment link, then Either click the ” Write Submission” link and directly paste your screen shots into this assignment box OR Browse your Computer and add the entire Microsoft Word document as an attachment (Mac users, please remember to append the “.docx” extension to the filename).