Website designing with suitable matter.
1 COIT 20268 - Responsive Web Design (RWD) (Term 1 – 2019) - Portfolio 1 - Practical Assessment 1 Background Robot Expo, is a government sponsored exhibition. They have contracted you to develop a website for the exhibition. You have been provided with the following initial and technical specifications. Memo: Website Requirements From: Robot Expo, Senior Management To : WIMP Engineering R&D Consultants Specification Design and develop a website. The idea is to provide information to tourists visiting the exhibition. The goal is to allow visitors to obtain an overview of the exhibition layout and to find details of exhibits they would like to visit. Resources Resources such as images and details of opening hours can be found in ProResource.ZIP. The content of the ZIP file is: 1. Four folders named Domestic Robots, Educational Robots, Industry Robots and Military Robots. Each folder contains images relating to the different types of technology indicated by the name of its folder. 2. A text file Item_List.txt contains the names of the artefact corresponding to each of the image from each folder. You need to use these names as the official description of the artefact on your web site. 3. A text file Business_Hours.txt containing the time-table of opening hours and entrance fees to the exhibition. 4. Logo.png – image of the logo of the exhibition. 5. Floor_Plan.jpg – floor layout of the exhibition. 2 General Requirements The managers of Robot Expo insist that the following requirements must be adhered to: 1. Each webpage of the website must display the Robot Expo logo. You can edit this image, but the font style, type and colour must remain as in the original image. 2. Do not change the proper names of the item. Do not rename the filenames of any of the images. 3. All images of each artefact must be presented to the visitor. This can be done within one webpage or distributed across several web pages. The idea is to ensure that visitors are made aware of the complete selection of items available for them to visit. 4. The images are to be used as it is. You can resize the images retaining the original aspect ratio, but do not crop or edit (e.g. re- colour, touch up, sharpen, etc.) or rename the images in any way. 5. Generate a separate page providing the opening and business hours. The details are found in the Business_Hours.txt file. 6. Text description for each item is not provided. You can provide your own ‘dummy’ text (i.e. lorem ipsum) to demonstrate the functionality of your web page design. Example of Users Interacting with the Website The visitor to the website will be greeted by a welcome message and the following layout of the floor plan of the exhibition. The visitor clicks on any of the exhibition hall (circles). It should bring up details of the specific hall selected with relevant artefacts. The visitor clicks on any of the images of the artefacts to obtain further information on that image. In addition, if the visitor selects an option to display opening hours and/or entrance fees, a separate page should appear to provide this information. Note this is the basic requirement, it is up to you to implement other details e.g. instructions, navigational control, etc. (continued next page) 3 What to Submit On the specified due date, you are to submit two assessment items: (1) Portfolio 1, and (2) Practical Assessment 1. End-of-Memo PLAGIARISM CQUniversity regards plagiarism as a serious offence and it can have serious consequences for you as a student. Read more: https://www.cqu.edu.au/student-life/services-and-facilities/referencing/what-is-plagiarism https://www.cqu.edu.au/student-life/services-and-facilities/referencing/what-is-plagiarism 4 Assessment details for: Portfolio 1 (10 marks). What You Need to Do At the end of each week, you will complete a different section of the given project as specified in Background section above. Each of the weekly Individual Case Project, found at the end of each chapter, will contribute progressively toward the completion of the given website project. Each weekly Individual Case Project corresponds with the textbook chapters from each week’s lesson plan. You are to document and report on each of these weekly Individual Case Project, cumulating in a final portfolio (i.e. Portfolio 1). Portfolio 1 should be submitted along with Practical Assessment 1. Weekly Individual Case Project Marks Portfolio 1.1 (Chapter 1) Write up the following project proposal : • Site title—Specify the working title for the site. • Developer—Identify yourself. • Rationale or focus—Explain the content and goals of the site. Planning the Site: • Main elements outline—Describe the main features of the site. • Content—Estimate the number of individual web pages. • Target audience—Describe the typical audience for the site. • Design considerations—List the design goals for the site. • Limiting factors—Identify the technical or audience factors that could limit the design goals of the site. *At this stage, your proposal and planning is primarily a draft. You will have a chance to modify the proposal and supplement the design details at different phases of the project. 1.5 5 Portfolio 1.2 (Chapter 2) Visualise the page design for your site by sketching a number of page layouts for different information levels of the site. For example, sketch the main page, a secondary page, and a content page. You do not have to be concerned with the exact look of the elements, but be prepared to indicate the main components of the pages, such as headings, navigation cues, link sets, text areas, and so on. Start to organize your site. Create a visual diagram that indicates the main page, section pages, content pages, and so on. Indicate the links between the pages. Indicate whether you will provide alternate navigation choices such as a table of contents and site map. * Your figures and sketches can be hand drawn on paper or created using a drawing application. To submit hand drawn sketches, please scan or use a digital camera to capture the originals. 1.5 Portfolio 1.3 (Chapter 3) Write a site specification for the website project. Include as much information as possible from the project proposal you completed at the end of Portfolio 1.1. Make sure to include a mission statement. Determine how you will measure the site’s success in meeting its goals. Include a description of the intended audience. Describe how you will assess user satisfaction with the site. Include technological issues that may influence the site’s development or function. Prepare a detailed flowchart for your site using the preliminary flowchart you created at the end of Portfolio 1.2. Create a filename for each page, using a consistent naming standard. Indicate all links between pages. Write a short summary that describes the flowchart. Describe why you chose the particular structure, how it suits your content, and how it benefits the user. Use the page layouts you sketched in Portfolio 1.2 to create the wireframes. 1.5 Portfolio 1.4 (Chapter 4) Revisit your project proposal and the site specifications you created in Portfolio 1.1. How will you implement Cascading Style Sheets (CSS3) into your project web site? In the next few weeks, you will learn how to control typography, white space, borders, colors, and backgrounds with CSS3. Think 1.5 6 about each of these style characteristics and how you will apply them to your page designs. In addition, make a list of possible class names you might use to identify your content. For example, consider using class names for the following page characteristics, as well as creating some of your own: • Body copy • Header (possibly different levels) • Footer Portfolio 1.5 (Chapter 5) Design the type hierarchy for your web site. Create a type specification HTML5 page that shows examples of the different typefaces and sizes and how they will be used. This can be a mock-up page that uses generic content but demonstrates the overall typographic scheme. Consider the following questions: • What will be the typefaces and styles for the body type and headings? • How many levels of headings are necessary? • What are the different weights and sizes of the headings? • How will text be emphasised? • Will hypertext links be standard or custom colors? • How will you ensure the legibility and readability of your text? • What will your line length be? 1.5 Portfolio 1.6 (Chapter 6) Create the box model conventions for your web site. Build on the typographic classes you created in Portfolio 1.5 . Think about the different spacing requirements for your content, and decide how the legibility can be enhanced using the box properties. Add this information