ASP.NET HTML5代业代写代调试、ASP.NET代编码代写web开发|代写ASP.NET JavaScript 语言程序

日期：2018-09-16 02:23

University of Canberra

Faculty of Science and Technology

Web Design and Programming (7175 & 6691)

Assignment 1

Submission date: Sunday 23:59 23/09/2018 (Week 7)

Type: Individual assignment

Total mark: 15

Proportion of unit assessment: 15%

Submission: A .zip file that contains all files in your web project and a Word file for your report. Submit this .zip file on the Canvas site of this unit.

Late submission: 5% of the total mark (i.e., 0.75 mark) per day. Information on how to apply for extension can be found in the unit outline available on the Canvas site of this unit.

Topic: Industry 4.0 – also known as the fourth industrial revolution – and 6 emerging technologies: Artificial Intelligence (AI), Internet of Things (IoT), Cognitive Services, Cloud Computing, Robotics, and Blockchains.

Tasks: Design and implement a responsive website for the above topic using the following:

1.ASP.NET Core Web Application template in Visual Studio Community 2017. Language: C#

2.HTML5, CSS3, Bootstrap and media query in ASP.NET Core Web Application for responsive web design.

3.JavaScript and jQuery for interactive website.

Requirements:

1.Website: full-width layout, responsive design, having 5 pages including home page, a page for companies and organisations, a page for emerging technologies, a page for world map, and a page for contact and about. Links to those pages are available on the menu.

2.Home page: to introduce Industry 4.0, the 6 emerging technologies, and 6 web sites about Industry 4.0. Use parallax scrolling and bootstrap carousel sliding techniques. Details are shown below.

3.Page for companies and organisations: to introduce 6 companies and organisations which are IBM, Amazon, Google, Microsoft, CSIRO, and Department of Industry Innovation and Science. Details are shown below.

4.Page for emerging technologies: to introduce the 6 core technologies: Artificial Intelligence (AI), Internet of Things (IoT), Cognitive Services, Cloud Computing, Robotics, and Blockchains. Use jQuery elastic grid to list 24 web sites in square blocks related to the 6 technologies. These 24 square blocks are grouped into 6 groups of 4. Details are shown below.

5.Page for world map: to display a Google world map with 6 markers for locations of the 6 companies and organisations listed above. Each marker provides name, image and excerpt for the selected company or organisation and a hyperlink to the web page of this company or organisation. Details are shown below.

6.Page for contact, about and other useful information: to present contact details, information about this website, copyright, and other useful information on Industry 4.0. Details are shown below.

7.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

The design must be the same as you see on the screenshots below. You can replace the images  with your own images but their design (image size, position, margin, padding, etc. remain the same). You can also replace the text contents with your own text contents but their design (font type, font size, position, margin, etc. remain the same).

1.Website: full-width layout, responsive design, having 5 pages including home page, a page for companies and organisations, a page for emerging technologies, a page for world map, and a page for contact and about. Links to those pages are available on the menu.

•Example of full-width layout website: https://www.ibm.com/services/artificial-intelligence

•Example of boxed-design layout website (not used for this assignment): https://www.headland.com.au/industry-4-0-cheat-sheet-industry4-0-cloud-computing-smart-factory-internet-of-things/

•Example of responsive website: https://www.microsoft.com/en-us/ai/default.aspx

•Example of non-responsive website (not used for this assignment): http://www.fordperformanceact.com/

•Menu: should have the following links

2.Home page: to introduce Industry 4.0, the 6 emerging technologies, and 6 web sites about Industry 4.0. Use parallax scrolling and bootstrap carousel sliding techniques. Below are the layouts required for this page on different devices.

•T1, T2, …, T6 are for 6 emerging technologies: Artificial Intelligence (AI), Internet of Things (IoT), Cognitive Services, Cloud Computing, Robotics, and Blockchains.

oEach of these T1, T2, …, T6 blocks is designed as a rectangular block. No space between these blocks as seen in the example below.

oWhen the user moves the mouse over on a block (e.g., Artificial Intelligence), the information for this block appears. If the user clicks READ MORE on this block, the website will navigate to the corresponding block on Emerging Technologies page (i.e., the Artificial Intelligence block on this page). For example,

•Example of parallax scrolling technique: https://www.ibm.com/au-en/industries/manufacturing

•Example of boostrap carousel sliding technique: https://www.canberra.edu.au/

•6 websites about Industry 4.0: Wikipedia, Forbes, IBM, Industry 4.0 news, Infochips and Department of Industry, Innovation and Science

3.Page for companies and organisations: to introduce 6 companies and organisations which are IBM, Amazon, Google, Microsoft, CSIRO, and Department of Industry Innovation and Science. Below are the layouts required for this page on different devices.

•Title and subtitle: your choice

•C1, C2, …, C6 are for 6 companies and organisations: IBM, Amazon, Google, Microsoft, CSIRO, and Department of Industry Innovation and Science. These blocks are designed using the template below (source https://ai.google/)

•Feedback: leave this one blank. You will implement this one in Assignment 2.

•Footer: use the following template (source https://www.industry.gov.au/)

4.Page for emerging technologies: to introduce the 6 core technologies: Artificial Intelligence (AI), Internet of Things (IoT), Cognitive Services, Cloud Computing, Robotics, and Blockchains. Use jQuery elastic grid to list 24 web sites in square blocks related to the 6 technologies. These 24 square blocks are grouped into 6 groups of 4. Below are the layouts required for this page on different devices.

•Title and subtitle: your choice

•Example of jQuery elastic grid technique (move the mouse over each cell then click on it): https://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/demo_responsive.html.

•24 websites grouped into 6 groups of 4 are as follows

oAI: IBM, Microsoft, CSIRO, Amazon

oIoT: IBM, Microsoft, Amazon, CIO

oCognitive Services: IBM, Microsoft, Google, Forbes,

oCloud Computing: Google, Microsoft, IBM, Amazon

oRobotics: Forbes, ZDNet, I-Scoop robots cobots, Automation World

oBlockchains: Blockchain, PC Magazine, Forbes, CSIRO

•Feedback: leave this one blank. You will implement this one in Assignment 2.

•Footer: use the following template (source https://www.industry.gov.au/)

5.Page for world map: to display a Google world map with 6 markers for locations of the 6 companies and organisations listed above. Each marker provides name, image and excerpt for the selected company or organisation and a hyperlink to the web page of this company or organisation. Below are the layouts required for this page on different devices.

•Title and subtitle: your choice

•Example of Google map with marker and info window

•Feedback: leave this one blank. You will implement this one in Assignment 2.

•Footer: use the following template (source https://www.industry.gov.au/)

6.Page for contact, about and other useful information: to present contact details, information about this website, copyright, and other useful information on Industry 4.0. Below are the layouts required for this page on different devices.

•Title and subtitle: your choice

•Examples of contact and about pages

ohttp://www.ibm.com/ibm/us/en/?lnk=fab

ohttps://www.einfochips.com/contact-us/

ohttps://www.industry.gov.au/topic/about-us

ohttps://www.industry.gov.au/about-us/contact-us

•Footer: use the following template (source https://www.industry.gov.au/)

Marking

Please explain in your report how you achieve the following goals (the marks are for report and your website project)

•[2 marks] Responsive Design using Bootstrap and Theme

•[2 marks] Colour, Font and Typography

•[2 marks] Space and using Padding and Margin

•[2 marks] Parallax Scrolling

•[2 marks] Bootstrap Carousel

•[2 marks] jQuery Elastic Grid

•[2 marks] Google Map

•[1 mark] Overall

Lectures on Thursdays and Tutorials/Labs from Week 2 to Week 7 will help you implement similar design templates and pages. Your assignment will be marked by your tutor. Please contact your tutor for further information on your mark. Visit Discussion forum on Canvas site for more information from lecturers and other students.