代做web- fixer-upper

日期：2018-04-17 12:49

 Assignment 1

This assignment is a “fixer-upper” assignment and this document outlines the requirements that must be met in order to obtain full marks.  This document is for both internal and external students.  Your task is to find a dodgy website that is in desperate need of updating to HTML5 standards or a dysfunctional website that is not very user friendly.  The website can be on a favourite topic or anything in general (so long as it is not offensive to others!).  Your task is to re-create part of the website using VisualStudio and make it more usable and modern. Aim to impress!

Requirements

There are several tasks you are required to complete:

1.Create a new Master Page Template and Styles

Some sites don’t bother using a template and this can result in pages with completely different layouts.  Sometimes the site uses a templating mechanism but the developer (or customer!) screws it up.  Your task is to translate the basic layout of the website into a Master Page that makes use of the various HTML5 Semantic tags.  Your layout should improve the overall presentation of the original website.  You need to make the new website utilise a CSS framework such as bootstrap (v4) or one of the other various options out there.  The choice is yours – the requirement is that it is improved in a reasonable way using HTML5 and CSS3 standards. It should look as professional as possible – improvement is the key.

2.Create two new pages with Fixes and a Dynamic component (40%)

You need to create pages that fix a page from the original website.  These new pages must make use of your new Master Page template.

1.1Traditional Data Binding dynamic content (20%)

User experience is everything and is worth a good portion of the marks.  Your new page must demonstrate a clear improvement of an existing page – and it must be valid HTML

?Your new improved page will need to include:

oAn example of dynamic content utilising a template data control (FormView or Repeater) supported by one or more SqlDataSources

oA Custom Database (not just the one grabbed from the practical).  It must have an appropriate name, one or more tables with appropriate columns and test data.  It must be connected by an appropriately named connection string

oAll data elements must be named and styled appropriately.

oIf the dynamic content includes an input form then it must include HTML5 validation and visually appealing (as forms can be!).

oIf a record is inserted, it should be displayed back to the user or appropriate feedback given on a successful save.

oThe data must be presented using a CSS framework such as bootstrap or the one you chose for your masterpage.

1.2Model Binding dynamic content (20%)

This is an exact copy of the above page except it must use the Entity Framework object relational mapper and the data controls must make use of model binding instead of the traditional eval() and bind() expressions.

1.3CSS3 Transition/Animation (10%)

?A CSS3 Transition or Animation on your new dynamic page that fits with the website or is likely to improve user experience.  This must include at least two CSS selectors that incorporate CSS style rules - “bootstrap transitions and effects” are not included and will not receive marks.

?

1.4JavaScript (20%)

To obtain full marks in the assignment you must include some useful JavaScript (not just using the JQuery library).  

1.Implement an event listener using plain JavaScript that modifies an element on your new dynamic page in some constructive way.  It should provide visual feedback to the user that something is about to happen and should toggle a bootstrap style on/off from an element or similar.  It should demonstrate you know how to use basic JavaScript to respond to an event.  You must include at least 4+ lines of JavaScript

2.Implement a JQuery animation using .animate().  This could be some sort of fancy visual feedback such as an animation/transition in response to user interactions.  The script should demonstrate that you know how to select and manipulate specific elements within the HTML document and how to respond to an event using JQuery (clicking on an element, or hover etc).  You must include at least 4+ lines of JQuery JavaScript.

2.Create a Page That Describes the Old Website

Create a web page that explains:

1.How the original website was not HTML5 compliant (including any significant errors including HTML, CSS or other).  Use the W3C HTML Mark-up validation service to help with this.  Present this as a styled HTML5 table with appropriate semantic tags.

2.What made the website hard to use

3.A link to the original website

This can include links with descriptions to any dysfunctional pages.

Marking

Marking will be conducted in class during week 7.  You will need to be able to demonstrate and explain your work and answer any questions.  Marks will be allocated in the following areas:

Layout (15%)

General layout and presentation.  This includes:

?Master Page creation and setup

?Use of HTML5 Semantic tags where appropriate

?Presentation and basic CSS –use of a CSS framework like bootstrap and your own css overrides where appropriate.

HTML Quality (15%)

The quality of your HTML matters since everyone can see it.  This includes:

?The appropriate use of IDs and Class names including consistent naming approaches

?Correct formatting and nesting of elements – when using a CSS framework like bootstrap, your layout should be in accordance with the bootstrap documentation

Dynamic Page with Template Data Control and suitable data source (40%)

The template needs to be setup according to bootstrap recommendations (or according to the selected CSS framework).  It must be HTML5 valid when tested and must work.  You must be able to explain your code to receive marks.

CSS3 Transition or Animation (10%)

The animation should provide user feedback or facilitate the dynamic content in some way where possible.  Again, you must be able to explain your code to receive marks

JavaScript and JQuery Examples (20%)

JavaScript has become a significant factor in modern web design and no page could be considered without it. As above, you must be able to explain your code to receive marks.

Your page must demonstrate that:

3.You know how to select and modify an element – using plain JavaScript AND JQuery

4.How to react to a user/page event like a button click or mouse hover

Due Date 22nd April 11pm

Your completed assignment must be uploaded to the course website by 11pm.  You will need to present your work during the week 7 practical to obtain your marks.   The uploaded website will be used for in class assessment.