University of Canberra Faculty of Education, Science, Technology and Mathematics Web Design and Programming (7175 & 6691) Assignment 1 Submission date: Sunday 23:55 25/09/2016 (Week 7) Type: Individual assignment Total mark: 20 Proportion of unit assessment: 20% 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., 1 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 Chadstone 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/2016. Language: C# [-20 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 this is 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. [3 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. [3 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. [3 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. [3 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. [3 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. [2 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 Canberra Restaurants 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. 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, 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. If the user clicks on Italian If the user clicks on Asian If the user clicks on Indian 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: Bootstrap Accordion is applied. If the user clicks on one of the 5 dishes below, it will expand to see restaurants for that dishes. If the user clicks on Pasta If the user clicks on Pizza If the user clicks on Curry If the user clicks on Dumplings If the user clicks on Laksa 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. Note: Bootstrap Accordion is applied. If the user clicks on one of the 3 prices below, it will expand to see restaurants for that price. If the user clicks on Cheap Eats ($) If the user clicks on Mid-Range ($$) If the user clicks on High Price ($$$) 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.