​​ Design a website for a Running Club targeted to the needs of existing and new club members. The site must be able to do the following: Race results: Display all race results. Occasionally an error is made recording the time or finishing position of a member who took part in a race. The application should provide the ability to correct the recorded result for the member. Race events: The calendar of race events which allows admins to add a new race event by providing a title, location, date, and an optional reference to a Google map that will display the route of the race. It must be possible to change the details of an event after it has been created in case an error occur. Other events: this type of event is a social event and does not have to be in the calendar. The application should be able to create new events by providing the title, date, and location and correct existing events in the case errors were made. Membership/Registration: A way for an admin to register a member, Although self-registration is possible I have decided that this could be open to abuse by 'spammers', so new members must be registered manually by an admin. The minimum information necessary to register a new member is the member's full name, their email address and their decision regarding consent to receive automated emails. All members are responsible and must be able to update their own information via the client website. Any member who has yet to engage with the club (i.e. not yet taken part in a race or yet to updated their membership) for more than 24 months should be removed from the active members list automatically. So there should be a section for Non-active members. News items: A panel for race related news. When a news item is added to the database the record must include the ID of the user posting the item, which can be derived from the log-on credentials. Mailings: An option to send announcements as emails to the entire membership, but only to those members who have given their prior consent, so some members can disable mailings if they wish. The messages will be plain text with the option of a single file attachment. The application should provide the admins to create the message, select an attachment, and specify the date the email should be sent. Authorisation: The application must be protected to ensure that only members of the admin team, or other designated club members, can access the application. The admin panels much be only visible for admins, and regular members has only the option to view their profile and edit them however they want. (Full name, their email address and their decision regarding consent to receive automated emails.) Browsers: The admin team has decided that given the small number of users they can ignore all browsers prior to IE 9, Firefox 30, and Chrome 30. Create an interactive wireframe. The wireframe should demonstrate how the different parts of the application are organised, how navigation functions, what information is displayed on each page, and so on. Pages returned by a server in response to user input should not be included. The wireframe model must be submitted as a set of HTML and CSS files. Should you decide to use different applications (e.g. Pencil) to create the wireframe you must export the wireframe as a 'Single web page' so that I can review the wireframe without the need to install any application. Wireframe should be a simple version of the finish design of the website, with working navigations and links, it doesn't require images, and its purpose is to show the structure of the site. The wireframe must not have PHP, JavaScript, colours, and graphics. Feel free to use any of the images provided in wireframeresources.zip. Create a visual design of an HTML template of the wireframe The task is to design and validate a web page. The page must be consistent with the wireframe model you have created and should be validated against the XHTML 'strict' and CSS 2.1 or CSS 3 'strict'. The page must, illustrate an actual realisation of the corresponding wireframe component and not simply be a repetition of a part of the wireframe itself. The validation reports should be saved using the browser's 'save as' feature and included to the folder. Please do not include copies of the validation reports as image files, DOC files, or PDFs. The visual design does not require any JavaScript for client-side validation. You may use JavaScript for navigation elements. Mobile accessible Your task is to create a single CSS file that will control the display of a generic form on a mobile device. To this end you have been provided with: • An HTML form that should be displayed in a mobile device. You should not need to edit the HTML page itself, but should aim to display the page in a device such as 'Generic – WVGA (480x800)'. This is one of the 'standard' devices supported by Ripple (which you used earlier in Block 3). • a style sheet 'styles.css' which displays the web page with styling suitable for display in a browser, or other device, with a width greater than 480 pixels. • An empty style sheet file 'mobilestyles.css' which you should use to hold your style declarations. • a JavaScript file that is loaded as an external script file by the form and that switches between 'styles.css' and 'mobilestyles.css' according to the width in pixels of the device displaying the form. You should not need to edit this file. • A directory of images which are used in the form. You may add your own images if you wish. Note: Wireframes All the files that make up your wireframe solution should be collected together into a single Zip archive, so as to retain any folder structure that you may have created. Name the archive 'Wireframes.zip'. Template page The template page files and the W3C validation reports should be collected together into a single Zip archive so as to retain any folder structure you may have created. Name the archive 'Template.zip'. Mobile solution Collect the files 'ourcForm.htm', 'styles.css', 'mobilestyles.css', 'changeStyle.js' and the folder 'images' into a Zip archive named 'Mobile.zip'.