CCT360编程语言代做、HTML/CSS程序设计代写、代做HTML/CSS代写编程

日期：2020-10-22 10:49

CCT360

LEARNING FROM A

PROFESSIONAL WEBSITE TO

BUILD YOUR OWN SITE

Design objectives

This projects helps you build skills in organizing,

structuring, labeling, designing and coding web content

for a professional website. In the 1st phase of the project

you will choose a Wikipedia article as the base of your

content, and build a content strategy and Information

Architecture which will inform your interface and

interaction design of your website. In the 2nd phase of

this project you will choose an existing major website

from a Canadian public university or college to learn and

model from, and rebuild the HTML5/CSS3 front-end from

scratch with the Wikipedia article content.

Scope of work

You will select an open Wikipedia information page on

your topic of choice with sufficient volume and

complexity of at least 8 subsections of content. Images

and other media used must be either your own work or

open-licensed and even if you create your own, you

must provide references for all media. Your website

should be comprised of 3 pages:

- Landing homepage (modeled after homepage)

- Inner page (modeled after an inner page of the site)

- Process page (based on overall design of the site)

Your project should include the following preparation

steps, all of which must be reflected in the inner page:

1. IA: Map the Wikipedia content to the Information

Architecture and show it as a Node-Link Tree

diagram that represents the network of content as

provided: research the content and choose the topic

with purpose.

2. Navigation: Identify, clearly label and discuss all

types of navigations for your IA: Structural,

Associative, Utility – explain your design process

3. Major website: Take any Canadian public

university/college website that is suitable for your

content, and that you personally like, and rebuild the

HTML5/CSS3 front-end, on your own, from scratch,

with reference for your Wikipedia article content:

a. Select a website that appropriate for your

content and choose the site carefully

b. Ensure that the homepage and one inner

page is mocked up and your process page

follows a matching template.

c. DO NOT copy code, rather recreate the

design using your own understanding of

wireframes, information architecture, HTML

and CSS. (Copied and pasted code directly

from the model site will not be accepted)

4. Coding and programming: Use HTML/CSS to

develop a finalized standalone website which works

on a recent version of Firefox, Chrome and Safari on

a desktop computer. You are not required to make

the site mobile responsive.

5. Image assets: All image assets should be produced

from downloaded (with permission) assets,

referenced and licensed for use/reuse as discussed

and demonstrated in class, and included in the

packaged website (do not set absolute src attributes

to the image locations with “http://...”)

Submission requirements

1. Final website: A compressed zip file of your

HTML/CSS along with the digital media assets such

as images and documents included in such a way

that the uncompressed file is fully viewable in a local

browser on any computer other than your own

2. References: In-page/in-code/process-page citation

of model website, all photographs or media used

with permission

3. Note: The links to the home/inner pages should

work, however the links to other pages and/or

external pages do not have to work (you can link

them back to the homepage or an “under

construction” page

4. Accessibility and usability: Refer to guides and

lectures discussed in class.

5. Process page design and length: This is

determined by identification of genuine need for

quality design and discussions of details presenting

thinking, planning and execution of the project and

could range between 3-6 pages in length.

6. File formats: The compressed site file must be in

ZIP format and no larger than 25MB.

Learning outcomes

? Apply the foundational process for planning a

standalone professional website

? Demonstrate applied understanding of front-end web

development and design using HTML/CSS

Evaluation criteria includes:

? [20%] Quality of the process presentation and

discussion with rationale for choosing the model

website in relation to the open content, design

decisions, IA and interface design considerations

? [80%] Quality of the matched model website (design

and development); use of proper HTML/CSS

standards-based coding techniques based on

learnings in class; semantic markup and adherence

to best practices of development; organization and

structure of code and assets

Note: A+ is reserved for projects that exceed all criteria,

demonstrating significant effort in going above and

beyond default project requirements.