COMP1710/6780

Web Development and Design

1
 Course Team

• Course lecturer and coordinator:

Dr Sabrina Caldwell
Email: [email protected]

• Course lecturer, online HTML/CSS:

Professor Tom Gedeon
Email: [email protected]

• COMP1710 Chief Tutor and lecturer:

David Flores-Condezo
([email protected]):
… and lots of tutors we’ll tell you about next week

We will only contact you via your [email protected] email

2
 MOOC online lab materials

Video lessons

Lab activity (id:1.3)

Lab activity:
Associated lab activities
1 JS Bin If you have never registered for JS Bin before, register
now. Login and open the demo website for this part.
2 Text editor Review the text editors discussed in the video lesson for
this part, or others in which you may be interested, and
choose your preferred text editor. Don't worry, you can
change at any time.
Familiarise yourself with the layout and functionality of
your text editor

3
MOOC online lab materials

JS Bin

4
Who am I? Dr Sabrina Bleecker Caldwell
School of Computing
The Australian National University

BA(Hons)/BSc 2003
1st PhD @ College of Arts & Social Sciences ANU 2008
2nd PhD College of Engineering & Computer Science ANU 2017

Information Technology Background in industry

Digital Equipment Corporation, Jostens Learning Corp,
Wizard Information Services

Sector experience
Private enterprise, community sector, government and academia

Weblog: http://www.thephotographicalist.wordpress.com/
LinkedIn: http://au.linkedin.com/in/SabrinaCaldwell

5
Born
here

6
Grew up
here

7
Met Australian
husband here

8
 Now I teach
and research
here

The Australian National University

My Research & Teaching Areas

---------------------------------------------
Software development management
Web development and design
Image credibility
AI and affective reasoning
Advances in higher education

9
Who are you?

10
 Who are you?

COMP1710 / COMP6780 = 282 students

11
 Who are you?
COMP6780 = 154 students

12
 Who are you?

COMP6780 = 128 students

13
 Who are you?

More about you – a few poll questions

CALDWELL8573

14
What are we all here to do?

15
 Course Overview: Course description

Learn and grow new/more skills!

• This course introduces the construction of web sites

and web interface/interaction design.

• Web development + design

Image https://www.flickr.com/photos/86979666@N00/9077004137
 Course Overview: Learning Outcomes

Upon successful completion of the course, you will be able to:

• Understand and be able to develop and design interactive web sites
including multimedia content by applying current web design
principles, guidelines and user-centered heuristics.
• Apply a user-centred focus to the design and development of web
sites.
• Demonstrate knowledge of accessibility, compliance with standards,
privacy concerns and personalisation for web sites.
• Understand and be able to separately control the content, the
appearance and the behaviour of web sites.
• Understand and report on the nature and practice of human-computer
interaction research in an ethical environment.
 Tools

• Course delivery:
Wattle, Echo360, Zoom, JSBin, Socrative

• Discussion, Q&A:
Piazza
 Course Delivery: Lectures

• Lecture slot 1:
Mondays 4pm-6pm - combination of in person and online
• Lecture slot 2:
Tuesday 1pm-2pm – combination of in person and online

• In the first 6 weeks we will be delivering the MOOC version of the

first half of the course material.

• Many aspects related to building a website will be discussed

(copyright, image credibility, ethics, cybersecurity, etc.)
throughout the semester. These are ALL important contexts
within which web development must be considered.

• Please check the course-schedule in Wattle regularly.

Course Delivery: Lab-tutes

• 9-10 weeks of schedule lab-tutes

• Labs start in week 2 (next week)

• Lab tutorials are of two types: fully online and hybrid.

• The change to hybrid on-campus / Zoom model allows for

more enrolments in existing labs; we are awaiting changes
from the School My Timetabling team.
 CoVID-19 precautions

Please see the following ANU COVID advice (as of 21 June 2022):
•“Some of the most important things you can do to keep the community safe include:
•Wearing a mask indoors
•Keeping your vaccinations up to date
•Staying home and getting tested if you're unwell
•Following any isolation requirements
•Appropriately reporting your result if you test positive to COVID-19 by:
1. Registering your positive result with ACT Health using this online form, or with the state/territory health authority where you
are located;
2. Alerting the University through this online form and;
3. Informing your supervisor or course convenor.
•Washing or sanitising your hands frequently
•Maintain physical distance between yourself and others where possible
•Wiping down surfaces after use” https://www.anu.edu.au/covid-19-advice
 Assessment

• Assignments (30%)
▪ Assignment 1 (10%)
▪ Assignment 2 (10%)
▪ Assignment 3 (10%)

• Communications (25%)
▪ Active participation in Piazza forum (6%)
▪ Active participation in a Continuous Improvement session (4%)
▪ A report on participating in user-studies (15%)

• Examinations (45%)
▪ 8 online quizzes (15%)
▪ Final exam: (30%)
 Assessment
Task Length (Max)/Workload % Due Date (Canberra time) Marks/Feedback Returned

Assignment 1 (30%)
Section 0: Topic 3 preferred topics 0% End of Week 2 End of Week 3 (Friday 12 September)
Submission (Friday 5 August 5pm)

Assignment 1: Website 5 Webpages minimum 10% End of Week 6 TBA

Submission (Friday 4 September 6pm)

Assignment 2: Website 2 Webpages minimum 10% End of Week 8 TBA

Submission
(Friday 2 October 5pm)
Assignment 3: Website Complete Website 10% End of Week 12 TBA
Submission
(Friday 29 October 5pm)

Communication and Participation + Report (30%) INDIVIDUAL

Piazza forum posting + TBA 15% N/A
Continuous improvement
contribution
Report TBA 15%

Examination (45%) INDIVIDUAL

Online Quizlets 15% End of every week On submission

Final Exam 30% TBD TBA

24
 Comp1710/6780

Your website assignment

25
Assignment assessments: 10 + 10 + 10

Assignment (in 3 parts) on Web site construction: 30 marks

Web site appearance design: 10 marks
Website is further developed: 10 marks
Full website with advanced components developed: 10 marks
The assignments are based on the labs, approximately every 3 labs is one assignment

26
 Assignment Part 1 (10 marks)

Comp1710/6780 – Assignment Part 1

Worth 1 mark
From assignment.html Your Me and My Passion
Replace this line with your URL link to this element in your website. Notes:
Provide any notes you may have about this element here.

From Assignment Specification:

Introduce yourself and/or your passion, interest or hobby etc. Write a
mission statement or list of goals similar to the idea of a brief statement
of the mission and list of goals in chapter 1 of the Unusually Useful Web
Book. This section should probably take 200-400 words or so.

What we will be looking for: Thorough description, clear.

27
 Assignment Part 1 (10 marks)

Comp1710/6780 – Assignment Part 1

Worth 1 mark for CSS
From assignment.html CSS
Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

From Assignment Spec:

Create an external (separate) CSS file. Use at least 10 CSS rules. 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.

What we will be looking for: As described in the assignment specifications

28
 Assignment Part 1 (10 marks)

Comp1710/6780 – Assignment Part 1

Worth 1 mark

From assignment.html Site Map

Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

From Assignment Spec:

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.

What we will be looking for: Well developed site map that is easy to
understand and navigate.

29
 Assignment Part 1 (10 marks)

Comp1710/6780 – Assignment Part 1

Worth 1 mark

From assignment.html Source Log

Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

From Assignment Spec:

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.

What we will be looking for: Clear, comprehensive listing of all external

sources with easy access (provide a link) to the source. Also note your own
images, video, etc.

30
 Assignment Part 1 (10 marks)

Comp1710/6780 – Assignment Part 1

Worth 1 mark

From assignment.html Feedback Form

Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

From Assignment Spec:

Create a page which takes feedback from visitors to your site via a form.

What we will be looking for: Easy to use and understand, nice formatting,
relevant to your website.

31
 Assignment Part 1 (10 marks)

Comp1710/6780 – Assignment Part 1

Worth 1 mark

Coherence
We will be looking some sense of flow and unbroken links in your site. This is
only part 1 so your site is still young, but you should have some colour scheme,
some similar usage of fonts, your subject should be obvious and your pages
should work together.

What we will be looking for: Well structured content in your site that ‘hangs
together’ around your theme.

32
 Assignment Part 1 (10 marks)

Comp1710/6780 – Assignment Part 1

Worth 1 mark

Quality
Even in a young site the elements can be visually appealing. We will be looking
for appropriate colour schemes and font strategies, harmonious use of space, a
few relevant and interesting images if appropriate for your site, etc..

What we will be looking for: Visually appealing, well-designed, excellent

readability, no broken links,

33
 Assignment Part 1 (10 marks)

Comp1710/6780 – Assignment Part 1

Worth 1 mark

Coding
We will be looking at your html and css coding. We want to see well structured,
clear coding with appropriate use of indenting and especially good commenting.

What we will be looking for: Well structured code using white space and
indenting, and excellent commenting.

34
 Assignment Part 1 (10 marks)

Comp1710/6780 – Assignment Part 1

Worth 1 mark

Creativity
Although later (assignment part 3) we will be expecting to see good creativity in
your website, even as a young site we expect to see some of the reason why
you chose the subject you chose. We will look for your use of creativity in
presenting the subject (so far) to us.

What we will be looking for: Creativity that displays thought and imagination.

35
 Assignment Part 1 (10 marks)

Comp1710/6780 – Assignment Part 1

Worth 1 mark

Submission
Just submitting your assignment part 1 is an important achievement. If you
have submitted your assignment properly (ie we don’t find only a zip file or just
your student directory with no index.html) and it is on time you will get this full
mark.

What we will be looking for: Properly installed website.

36
 Forum Participation (4 marks)

Worth 4 marks –
2 posts with maximum
of 2 marks each

From assignment.html Student Forum Participation

Replace this line with your URL linking to 1st of 3 nominated 'best posts.'
Replace this line with your URL linking to 2nd of 3 nominated 'best posts.'

From Assignment Spec:

Active Participation: Provide URL links to your three best Piazza posts.

* URL = Uniform Resource Locator 37

 Assignment Part 2 (10 marks)

Comp1710/6780

Assignment Part 2

38
 Assignment Part 2 (10 marks)

Task 2.1: Image Map

Worth 2.5 marks

From assignment.html
Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

From Assignment Spec:

Create a page which displays one or more image maps. Make sure that
there are at least 3 links, with proper labels in your image map.

What we will be looking for: Excellent imagemap with 3 or more well-formed

links and proper labelling

39
 Assignment Part 2 (10 marks)

Task 2.2: Photo Gallery

Worth 2.5 marks
From assignment.html
Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

From Assignment Spec:

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.

What we will be looking for: Excellent photo gallery with 10+ photographs -
integrated into website look and feel – well labelled/commented

40
 Assignment Part 2 (10 marks)

Task 2.3: Storyboard

Worth 2.5 marks

From assignment.html
Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

From Assignment Spec:

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.

What we will be looking for: Excellent storyboard that strongly supports the video

41
 Assignment Part 2 (10 marks)

Task 2.4: Video OR Javascript

Worth 2.5 marks

From assignment.html
Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

From Assignment Spec:

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. (More on this in
Assignment and Report Specification)

What we will be looking for: Excellent inline creative video relevant to

website with high quality titles/transitions

42
 Assignment Part 2 (10 marks)

Task 2.4: Video OR Javascript

Worth 2.5 marks

From assignment.html
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.

From Assignment Spec:

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

What we will be looking for: 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.

43
 Forum Participation (2 marks)

Worth 2 marks –
1 post with maximum
of 2 marks

From assignment.html Student Forum Participation

Replace this line with your URL linking to your nominated 'best post.’

(This of course excludes the two you chose before.)

From Assignment Spec:

Active Participation: Provide URL links to your best Piazza post.

* URL = Uniform Resource Locator 44

Comp1710/6780

Assignment Part 3

45
 Assignment Part 3 (10 marks)

Worth 1.25 marks

3.1 Reflections
Replace this line with your URL link to this
element in your website.
Notes: Provide any notes you may have about
this element here.

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?

What we will be looking for: Excellent reflections that are clear and well-
considered
Image: CC0 Public Domain
Pxhere 1278113 (https://pxhere.com/en/photo/1278113)
Photographer unknown 46
 Assignment Part 3 (10 marks)

Worth 1.25 marks

3.2 Alternative CSS

Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

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.

What we will be looking for: One or more excellent alternative CSS styles for
'look and feel' that transforms the site or that creates high quality print style or ?

47
 Assignment Part 3 (10 marks)

Worth 1.25 marks

3.3 Social Networking Button(s)

Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

3.3 Provide a Social Networking button

Your site could do with more exposure, or at least once you release it into the
wild beyond the ANU limited space of partch/liskov. Please provide a working
button 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.
What we will be looking for: One or more well-placed, working (not just an
href) social networking buttons in your site.

48
 Assignment Part 3 (10 marks)

Comp1710/6780 – Assignment Part 3

Worth 1.25 marks

3.4 Social Networking Feed

Please provide a working social networking feed you have learnt about in the
relevant lab.

If your theme is such that none of this is relevant then please email me and
we may be able to negotiate the alternative (make sure you keep the email in
which I agree to your alternative topic).

What we will be looking for: Relevance to your topic. Gracefully integrated into
your website.

49
 Assignment Part 3 (10 marks)

HTML
Worth 1.25 marks
CSS
3.5 CSS and HTML Validation
Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

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.

What we will be looking for: Proof that you have validated your code, and
explanation of any HTML or CSS that does not pass validation.

50
 Assignment Part 3 (10 marks)

Worth 1.25 marks

Originality
3.6 Something Original
Replace this line with your URL link to this element in your website.
Notes: Provide any notes you may have about this element here.

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.

What we will be looking for: Excellent original element that is relevant to the
theme of your website and well-integrated into your design.

51
 Assignment Part 3 (10 marks)

Worth 2.5 marks

Overall Presentation of your website

What we will be looking for: Overall the finished site is
extensively developed, and reflects a high degree of
excellence, attention to detail and superior design.

52
This week…

No Tuesday lecture this week. Use this time to decide on your

website topic.

Read the course outline

Consider getting a headstart by doing the 1st week of the online

‘MOOC’ lab materials – these will be available from tomorrow.

53