Reference no: EM132289755

Question 1: Wireframes

This question is about the admin application.

1(a) Navigable wireframes

Online Solutions have produced wireframes for the club website. The admin team feel that these wireframes helped to clarify the overall structure and navigation of the club website, and they would like to see something similar for the admin application. They are keen to know if the requirements they have identified can be rationalised into a coherent set of web pages that illustrate how the various features of the application will be presented to an admin user.

Your task is to create "interactive" (i.e. navigable) wireframes of your proposed solution for the administration application as it might appear on a laptop or desktop screen. The wireframes should demonstrate how the different parts of the application are organised, what information is displayed on each page, how navigation works between the pages, and so on. Pages returned by a server in response to specific user input are not required.

The wireframes must be submitted as a set of HTML, CSS, and image files. You can use Pencil, a text editor, or any other tool with which you are familiar to create these files.

Should you decide to use Pencil, you must use the ‘Export Document' option to export your wireframe as a ‘Single web page' using the ‘Default HTML Template'. This requirement ensures that the client can review your wireframe without the need to install the Pencil application. Submitting your wireframes in a non-HTML format will result in a penalty being applied.

Collect the files that make up your wireframes into a single ZIP archive, retaining any folder structure that you may have created. Please name the file using your own OUCU ‘OUCU_Q1.zip'.

It is essential to keep in mind that a wireframe illustrates successful capture of an application's requirements by means of content and information architecture. It is not about implementation or branding, so should not include coloured text or images. The file emaWireframeResources.zip contains simple placeholder images (bars, squares and rectangles) and a file of ‘Latin' text that you can use to illustrate how content will be displayed on a page. You can set the image width and height attributes to the size required.

You may find the following pointers useful:
• Consider the application from an admin user's perspective to see how information might be organised or functionality grouped. There may not be an exact match between pages and features.
• Consider how users will navigate around the admin application.
• Think about the screen layout and the use of ‘white-space' to separate content.
• Read the requirements carefully to ensure the admin team has not omitted important functionality (e.g. it should be possible to edit or update an item after it has been added)

1(b) Explanation
Provide a description of the role of wireframes in web development and explain how the design demonstrated by your wireframes fulfils the requirements outlined by the admin team.

Hint: Imagine that you meet with the admin team and walk them through your solution - this is not simply an explanation of what you have done, it is an explanation of why your design is appropriate. You have a maximum of 400 words.

Question 2: Responsive design
This question is about the admin application.

2(a) "Add walk" form for laptop screen

The admin team is keen to see some ideas for the visual design of the admin application. Given that the application is not accessible to the public, the design need not be constrained by the OU ICE guidelines but must be standards-compliant.

Your task is to create and validate a web page containing a form to allow a member of the admin team to add a walk event. The page should be consistent with your wireframes and be valid HTML and CSS. The page must, of course, be an actual realisation of the corresponding wireframe component and not simply a repetition of a part of the wireframe itself.

• The form should include a hidden field. The field should be named ‘sessionID' and should contain the value ‘12345678-09ab-1111-cdef''.
• The page should use a CSS style sheet.
• As with the wireframe, the page should be easy to use on a laptop or desktop screen (1024px wide).
• The page and form should be accessible.
• The form may use HTML5 input types described in Block 2 Part 3, but validation of input data is not required.
• The web page and any related files should be clearly named e.g. q2a.html, q2a.css.
Validate your HTML using the validator

You can validate the file by uploading it directly to the validator service. Make sure that you are using the HTML5 option. There should be no errors reported.

In your solution document, provide a screenshot of the part of the page that shows the line ‘Document checking completed' and the tags within the <head> tag of your source code just below.

2(b) Responsive form
This question is about the admin application.
Some members of the admin team are interested in the possibility of carrying out some admin tasks using a mobile device; for example, while they are on a walk. They would like to see how the admin application might be presented on a mobile device.

Your task is to copy your solution to 2(a) and amend the CSS and HTML as appropriate to present the same form on a smartphone-sized screen.

• Use techniques you have learnt in Block 3 to allow the page layout to respond to screen width, such that the form is also usable on a 375px wide screen.
• No changes to functionality are required, but you may consider HTML5 inputs even if you did not use these in your 2(a) solution.
• The page and form should continue to be accessible.
• Take care not to change your 2(a) solution files.
• The web page and any related files should be clearly named e.g. q2b.html, q2b.css.
Your 2(b) solution should work at two screen widths: 375px and 1024px ("Mobile M" and "Laptop" in Chrome's Device Toolbar); your solution need not respond to widths between the two.

Hint: Page layout on screens of this size are typically a single column, with the most useful or commonly used content or functionality presented sooner. For forms, labels are often presented above inputs rather than to their left. The file emaMobileResources.zip provides an example of some HTML and CSS that responds in this way which you can adapt if you wish.
Validate your HTML using the validator
In your solution document, provide a screenshot of the part of the page that shows the line ‘Document checking completed' and the tags within the <head> tag of your source code just below.

Collect the files that make up your 2(a) and 2(b) solutions into a single ZIP archive, retaining any folder structure that you may have created. Please name the file using your own OUCU ‘OUCU_Q2.zip'.

2(c) Explanation and recommendation
This question is about the admin application and the club website.
First, describe the changes you made to the page design between 2(a) and 2(b). Explain any choices or compromises you made or difficulties you encountered in making the page and form responsive to and usable on a mobile screen.

Next, given this experience, and drawing on your view of the likely needs of club members and the admin team, discuss whether the admin team should focus on making either or both of the club website and the admin application responsive to mobile devices, or whether they should consider another approach. You have a maximum of 400 words.

Question 3: Authentication and authorisation
This question is about the admin application and the club website.
Write a briefing for the admin team exploring authentication and authorisation requirements for both the club website and the admin application, and proposing solutions to meet those requirements. The admin team are not very familiar with these two similar-sounding terms, so you will need to explain them.

First, define authentication and identify two different ways in which users could be authenticated with the club website and admin application. Recommend which of these is more appropriate for the walking club, and briefly justify your recommendation.

Next, identify any steps that should be taken to secure authentication data while in transit over a network and in storage in a database and briefly describe what risks these steps mitigate.

Finally, define authorisation and propose the different levels of authorisation that would be required across the club website and admin application. Explain the importance of having different levels of authorisation and the potential consequences of getting this wrong.
You have a maximum of 600 words.

Question 4: Acceptance tests
This question is about the admin application.
The admin team will need to undertake the final acceptance testing before signing-off the project, so they have asked for some examples of what is required. Your task is to prepare four acceptance tests to verify the functionality of those parts of the admin application that add a new walk event and edit an existing walk event (i.e. two tests for each part).

Each test should take the form of a set of scripted actions, as described in Block 4 Part 5, and provide details of the setup requirements, the instructions to the tester, and the expected outcomes of each action. The tests should be presented in a tabular form and include instructions covering both good data leading to a successful outcome, and bad data leading to an unsuccessful outcome. No word limit has been set for this question.
Question 5: Version control

5(a) Advice on version control
This question is about the admin application.

The admin team are aware that the application development must be carefully managed and that some form of version control must be put in place from the outset of the project.

Write a short briefing for the admin team explaining the purpose and value of version control for development of the admin application and proposing how version control should be used. You have a maximum of 300 words.

5(b) Evidence of version control
Create a version control repository and use it as you develop your solutions to questions 2(a) and 2(b). You can use TortoiseSVN or equivalent macOS software, as described in Block 4, or an equivalent version control system with which you are familiar (e.g. git).

As evidence of your use of version control for your EMA files, you should provide:
• two screenshots of the Repository Browser window (or equivalent) to show the internal structure of the project's folder, the first taken about half way through your EMA development, and the second towards the end of your EMA development (see Figure 23 of Block 4 Part 4).
or
• two different screenshots of the Log Messages window (or equivalent) to show content changes over time, the first taken about half way through your EMA development, and the second towards the end of your EMA development. (see Figure 39 of Block 4 Part 4).
Please ensure that your evidence is self-explanatory by providing captions to images. Failure to clearly identify what the ‘evidence' shows will lose you marks.

Question 6: Work plan reflection
Assess the effectiveness of your planning for the EMA. You have a maximum of 500 words:
• Explain which aspects of your planning were the most useful and which the least useful.
• Did you identify an appropriate set of tasks? Did the tasks you identified take more or less time than expected? Was the risk assessment useful?
• Did you keep your plan up-to-date with your progress?
• Did the planning help with completing the EMA?
• Most importantly, how would you approach the planning of another EMA or similar amount of work in the future? What are your lessons learnt?

Attachment:- EMA questions.rar