COMP1710/6780 Website Assignment - Semester 1 2024

Summary of submission release deadlines:

· Assignment Release 1: 5pm Thursday Wk 5

· Assignment Release 2: 5pm Thursday Wk 7

· Assignment Release 3: 5pm Thursday Wk 11

Assignment: Make your own website!

The purpose of the overall assignment is to demonstrate what you have learned in this course. You will do this by creating a coherently themed web site using the design ideas and construction techniques you have learnt in the lectures and labs. The assignment is worth a total of 38 marks and will be submitted in three releases. We will mark by looking at the pages linked in your submission on wattle.

The first part of the assignment is: The topic of your website.

What does this mean? Well, here is your chance to build a website introducing yourself or a topic you are interested in. Whether your passion is for model aircraft building, haute couture, quantum physics or underwater pumpkin carving — tell (and/or show) us about it.

The tasks listed below set out the minimum requirements for each part of the assignment. You can always do extra things, and we won't ignore them in marking especially in the last part of the assignment. To make sure we don't miss it, mention these things in the assignment.html page.

Unfortunately, web browsers are still not 100% identical in their behaviour, so web pages may behave differently on different browsers. For this course, please use Chrome, Firefox or Edge for development, and please specify what is the best way to view your website (e.g., Do you use Chrome for the browser? Is your screen resolution 1366 x 768?)

Website Topic (3%)

One of the early steps of the assignment is to download the assignment.html file from the Wattle course page - update the topic section and upload it to your Stuweb account (ahead of the 8th of March due date), you can do this in your labs.

Website Release 1.0 (10%)

1.1 Introduce Your Topic/Passion

Introduce yourself and/or your passion, interest, or hobby etc. Write a mission statement for the website. This can be similar to what is usually found in an about us page of a website. This section should probably take 200-400 words or so.

1.2 Create a Cascading Style. Sheet (CSS)

Create an external (separate) CSS file. Use at least 10 CSS rules that transform. the look-and-feel of your website. Make sure your CSS includes comments that would be useful to someone taking over the maintenance of your site, things like the purpose of each rule, exceptions to its use and the choice you made as to which selector you specified.

If you create more than one CSS make sure they are deployed in a Cascading manner, i.e. there should be at least one default CSS that will be applied to all the pages in your site, with specialised CSS then being applied to specific pages of the web site.

1.3 Build a Site Map

This page should clearly depict the organisation/structure of the web site, possibly using a table or links (or both) or an image map. Make sure you update the site map as you expand your web site in Parts 2 and 3. Note: This Site Map does not refer to a sitemap.xml file instead look to the following link as an example: Site Map - Apple (AU)

1.4 Provide a Source Log

You will need to keep a log. A typical log describes the list of sources you used for your project and the modifications you applied to them. The origin of the source should be given in enough detail to ensure the marker can access the source whenever it is possible (URL, ISBN etc). Make sure you update the source log as you expand your web site in Parts 2 and 3.

1.5 Provide an opportunity for feedback

Create a page which takes feedback from visitors to your site via a webform. Please ensure your form. has at least 5 fields that accept input from the user.

1.6 Separate assignment page from passion pages

The top page of your website is the usual index.html. You will also include an assignment.html file that will be explained to you in the first lab. Use and modify the assignment.html page which lists all the assignment requirements for this assignment, and make sure it provides direct links to your content. E.g. the source log or feedback page may not be relevant to your passion so you can avoid showing it to normal users coming in via the index.html page, but for marking purposes we need to find this content so it should be linked to from your assignment.html page.

The choices you make can be briefly explained in your assignment.html page, but don't write too much there, as we are marking your web pages for your passion and the assignment.html page is mainly to help us find all the components we want to mark.

Website Release 2.0  (10%)

In the second part of your assignment you will add content and possibly enhance your design.

2.1 Provide 2 Call-To-Actions (CTAs)

In your Home page or create a page which displays one primary Call-to-Action in the header and a secondary call to action in the body of your content. Make sure that your primary CTA has some differences to your secondary and that they both provide links to another page on your website.

2.2 Provide a Photo Gallery

Take or select at least 10 relevant photographs. Convert the photographs to *.png format. Use a template or a suitable tool like Galerie to present them with appropriate titles and any comments you wish to make. Your photo gallery should have the same look and feel as the rest of the web site. The easiest way to achieve this is to ensure it uses the same CSS. Or it may be appropriate for you to link to content stored elsewhere on the internet.

2.3 & 2.4 Videos or Javascript

For 2.3 and 2.4, COMP1710 students can choose either to develop a storyboard (2.3a) and a video (2.4a), or write some javascript. to add interactivity (2.3b and 2.4b).  Please note that you WILL NOT get extra marks if you do both so please indicate which components you would like us to assess.

COMP8110 students must write some javascript. to add interactivity.  (You might like to create a video for your something original in part 3 of the assignment.

2.3a Develop a Storyboard (for your video)

Create a storyboard for your video as a comic (see the relevant lab). The key thing is to present your plan of how you intend your video (see 3.1) to look after editing.

The comic and the video (see next task) should represent the same story. It should be possible to understand the video by reading the comic, and understand the comic by watching the video.

2.4a Make an edited, inline video

Shoot (or collect) and edit a video and present it on the website. The video (i.e. about your subject, its the same video) should contain at least one title and one transition. It will be inlined within a web page. Use your creativity and originality to do something interesting, useful or just funny.

For video cameras and especially digital still cameras with movie mode, don't forget to use a tripod or video stabilisation. Keep in mind that video cameras are not the only source of video. For example, many modern digital cameras in movie mode will produce video recording which are fine for web delivery. Then there is video capture from a running program, and so on.

Last year almost everyone had access to a video camera or digital still camera with movie mode from family / friends / church / work / etc. If you end up unable to find someone with one, please e-mail me and I will try and help.

I suggest 5 minutes absolute max for the final video. You should also provide a few words on your site describing what the video is about and/or trying to achieve.

2.3b Javascript. addition （optional INSTEAD of 2.3a）

We will be looking for an excellent JS addition to your website that complements your theme. We expect you to speak with your tutor about your proposed JS element(s) so that you can determine whether your proposed JS addition is ‘right-sized’ for this assignment part.

2.4b Well written Javascript. (optional INSTEAD of 2.4a)

The javascript. code needs to be functional, well structured, properly commented, and clearly indented.

Website Release 3.0 (15%)

3.1 Provide a reflective "About my site" page

This should be a couple of paragraphs reflecting on what you have learnt about website design while actually doing it. E.g. are there things which if you had realised earlier you would have done different?

3.2 Provide an alternative CSS page

Create at least one extra CSS page which transforms the appearance of your website, either in an interesting way or into a more printer-friendly format. Please specify how we can view the two different effects (original and alternative) of your css.

3.3 Provide a Social Networking button or feed(s)

Your site could do with more exposure, or at least once you release it into the wild beyond the ANU limited space of Stuweb. Please provide a working button or feed for a social networking or similar site such as done in the lab or lecture related to this topic. If your theme is such that none of this is relevant then please link to this from your assignment.html file, and of course mention why it was not relevant for you.

3.4 Ensure your website is accessible.

Please ensure that all your website pages are accessible somewhat to a WCAG 2.1 AA standard and follow the following requirements below:

· All media has a descriptive alternative text.

· Proper Headings structure is used.

· All icon sizes are at least 45 x 45 pixels.

· All site elements are accessible using the tab key on your keyboard.

· All href links have an aria-label associated with them.

· Abbreviations in content have an abbr tag associated with them.

3.5 Validate your CSS and your HTML pages

Run your CSS and HTML pages through the W3C validation service. Create a page (or another photo gallery) showing some screenshots (if you're not sure how to take screenshots - google it) of the validation report. If you need to leave some validation errors to achieve the look you want, make a comment in your assignment.html file to explain.

3.6 Provide something original

Get creative and add a component or content which differs from the tasks listed above. It might be an extra page presenting some interesting content you made or wrote yourself, or which provides links to sites you have found useful while making the site, or which are about related or relevant subjects. or it might be something made with a tool you have researched and learnt to use yourself. Don't get stressed - this is meant to allow you to be creative in some way, and get marks for it.

Assessment

Each part will be marked separately and marks will be allocated in the following way:

· Assignment Part 1 is worth 10 marks

· Assignment Part 2 is worth 10 marks

· Assignment Part 3 is worth 10 marks

What will gain (or lose) you marks in the assignment?

50% of your assignment mark will depend on consistency:

· How thoroughly you deliver the requirements listed above.

50% of your assignment mark will depend on coherence and quality:

· How coherent your site is in terms of its stated theme.

· The quality of your presentation:

o Visually.

o Textually (good english/netlish).

o The design does not interfere with the message, or detract from the meaning.

o The site's readability is good across a wide range of window sizes and screen resolutions.

· The quality of your HTML, CSS and commenting, for eg:

o Content and presentation are clearly separated into HTML and CSS.

o The code is well structured.

o The code complies with W3C standards.

o Indentation and commenting have been used to good effect.

o The structure and names of folders and files are simple, clear and meaningful.

· The creativity of your content and presentation.

· Any additional work or research you put into the site.

Late Penalties

Late assessments (assignments and report) will be penalised at the rate of one (1) mark per day, or part thereof, that the assessments is overdue. Assessments more than seven (7) days late will not be accepted. If you have an extension then it’s not late until that extension is over.

If you need to apply for an extension you should contact me and explain your situation before the deadline (e-mail is best). I am quite reasonable about extensions for unforseen or exceptional circumstances. I am not allowed to give extensions for you having too many assignments at the same time, as that is considered *not* unforeseen by the School.

Tips

The assignment is not too difficult technically, but you will need to devote some thought to how it will all fit together. This is because your final product has two potentially contradictory goals. On the one hand you must maximise your marks by meeting all the criteria specified above, but on the other hand you must ensure the thematic coherence of your site.

Virtually all the assignment tasks are based on your lab work (and MOOC materials for part 1). If a task seems unclear, check the related lab sheet again - I didn't want to duplicate everything in the lab sheets here so that may be why the description here is short.

Make sure your content is easily accessible - if the marker can't find something - whether one of the mandatory tasks or something special and unique you have made - you won't get marks for it.

Lastly, an assignment checklist —

· I have constructed my website with index.html as a landing page and assignment.html to direct markers’ attention to the elements of the assignments

· I have my own copy of everything I’m handing in.

· My assignment satisfies all the assessment criteria.

· It all works — I’ve checked it in a variety of circumstances.

· I’ve used CSS, not tables, for page layout.

· I’ve made good use of the available HTML tags to clarify the meaning of the content.

· My id and class attributes have simple, meaningful values.

· All my files are in the right folders and have sensible names.

· It’s going to be useful to me later.