University of Canberra
Faculty of Education, Science, Technology and Mathematics
Web Design and Programming (7175 & 6691)
Assignment 1
Submission date: Sunday 23:55 24/09/2017 (Week 7)
Type: Individual assignment
Total mark: 15
Proportion of unit assessment: 15%
Submission: A .zip file that contains your web project and a Word file for your name and your student ID. Submit this file via Moodle (report is not required).
Late submission: 5% of the total mark (i.e., 0.75 mark) per day. Information on how to apply for extension is in the unit outlines.
Tasks: Implement a web site for visitors to explore restaurants in your area (Canberra city for UC Bruce campus, or Sydney city for Sydney Liverpool campus, or Melbourne city for Melbourne campus). Users are able to find at least 6 restaurants grouped according to cuisine (at least 3, e.g. Australian, Italian, Thai) or dishes (at least 3, for example fish & chips, pasta, and dumplings), or price (at least 3, for example cheap eats, mid-range and fine dining). Users are able to find all of these restaurants on a Google map and access to the web page for a chosen restaurant from this map.
Requirements:
1. Template, language, Bootstrap and semantic HTML5:
a. ASP.NET Core Web Application in Visual Studio 2015. Language: C# [-15 marks if this template and C# language are not used].
b. Use Bootstrap in ASP.NET Core Web Application and media query for responsive web design [-10 marks if Bootstrap and media query are not used].
c. Use semantic HTML5 elements whenever possible [-5 marks if no semantic HTML5 element is found].
2. Web Site:
a. [5 marks] Home page: to introduce your web site and 6 restaurants. Brief information on cuisine, dishes, price and location is found on this home page. Details are shown below.
b. [2 marks] Restaurants page: to list the 6 restaurants found on the restaurants page. Brief information on cuisine, dishes, price and location is found on this restaurants page. Details are shown below.
c. [2 marks] Cuisine page: to list the 6 restaurants found on the home page in different cuisines (at least 3, e.g. Australian, Italian, and Thai). Details are shown below.
d. [2 marks] Dishes page: to list the restaurants found on the home page in different dishes (at least 3, for example fish & chips, pasta, and dumplings). Details are shown below.
e. [2 marks] Price page: to list the restaurants found on the home page in different prices (at least 3, for example cheap eats, mid-range and fine dining). Details are shown below.
f. [2 marks] Location page: to display a Google map with markers for all restaurants. Each marker provides name, image and excerpt for the selected restaurant and a hyperlink to the web page for this restaurant. Details are shown below.
g. Handle all exceptions that may occur at runtime (– 1 mark for each exception found). Make sure your web site provides the same display in the following web browsers: Firefox, Chrome and Internet Explorer (– 2 marks if not the same).
Details
• Below are 6 restaurants in Canberra, students in Sydney or Melbourne are required to change them to restaurants in Sydney or Melbourne city. You can choose other restaurants in your city as long as those restaurants have their own website and location on Google Map.
• The design must be the same as you see on the screenshots below. You can replace (but not delete) the images below with your own images but their design (image size, position, margin, etc. remain the same). You can also replace (but not delete) the text contents below with your own text contents but their design (font type, font size, position, margin, etc. remain the same).
• Review page: not required. You will implement this page in Assignment 2.
a. [5 marks] Home page: to introduce your web site and 6 restaurants. Brief information on cuisine, dishes, price and location is found on this home page. Details are shown below.
When you run your project, the home page below will be displayed on your web browser. The user can also click on Canberra Restaurants on the menu bar to open this home page:

Note: Parallax scrolling technique is applied to this dark background image, you can see it from the second screenshot below when you scroll down a bit.
Keep scrolling down you will see the following

Note: Bootstrap Carousel technique is applied to the last screenshot above, you can see other 5 images from the screenshots below. If the user clicks on one of these 6 images, the restaurant’s own website will be displayed on your web browser.

Responsive design: If you resize the width of your web browser to a tablet size, this web page has to be changed as seen below

Responsive design: If you resize the width of your web browser to a mobile phone size, this web page has to be changed as seen below

b. [2 marks] Restaurants page: to list the 6 restaurants found on the restaurants page. Brief information on cuisine, dishes, price and location is found on this restaurants page. Details are shown below.
Note: If the user clicks on Click here (see below), the corresponding restaurant’s own website will be displayed on your web browser.

c. [2 marks] Cuisine page: to list the restaurants found on the home page in different cuisines (at least 3, e.g. Australian, Italian, and Thai). Details are shown below.
Note: Bootstrap Accordion is applied. If the user clicks on either Italian or Asian or Indian, it will expand to see restaurants for that cuisine.
(note the blue part on the right in the screenshots below: leave it blank, you will implement it later for Assignment 2)

If the user clicks on Italian (note the blue part on the right: leave it blank,you will implement it later for Assignment 2)

If the user clicks on Asian (note the blue part on the right: leave it blank,you will implement it later for Assignment 2)

If the user clicks on Indian (note the blue part on the right: leave it blank,you will implement it later for Assignment 2)

d. [2 marks] Dishes page: to list the restaurants found on the home page in different dishes (at least 3, for example fish & chips, pasta, and dumplings). Details are shown below.
Note: If the user moves the mouse over one of the 6 square images for restaurants below, the name of that restaurant and a button More Details will appear. If the user clicks on that image, a window containing an image and text about that restaurant will appear below that square image.

If the user moves the mouse over the first image, the user will see the restaurant’s name (Jamie’s Italian) and the blue button labeled More Details appear.

If the user clicks on the More Details button

If the user clicks on Pasta then moves the mouse over the image and clicks on the More Details button

If the user clicks on Pizza (with the same effect for mouse over and mouse click as seen above for Pasta)

If the user clicks on Curry (with the same effect for mouse over and mouse click as seen above for Pasta)

If the user clicks on Dumplings (with the same effect for mouse over and mouse click as seen above for Pasta)

If the user clicks on Laksa (with the same effect for mouse over and mouse click as seen above for Pasta)

e. [2 marks] Price page: to list the restaurants found on the home page in different prices (at least 3, for example cheap eats, mid-range and fine dining).
You will design this web page yourself. The requirement is that this web page has to be consistent with other pages of this website, and a jQuery method is applied.
f. [2 marks] Location page: to display a Google map with markers for all restaurants. Each marker provides name, image and excerpt for the selected restaurant and a hyperlink to the web page for this restaurant. Details are shown below

If the user clicks on a marker (note: if the user clicks on the link Click Here below, the restaurant’s own website will be displayed on your web browser.