CITS3403/5505 Agile Web Development

Home

Welcome to the website for CITS3403 Agile Web Development. The Internet is continuing to grow, with a shift from the knowledge provision that typified the Web of the early 2000's, to highly interactive sites and user generated content. This has led not only to some remarkable business opportunities but also to profound changes in the way people relate to each other. This unit explores technologies, programming languages and environments that underpin development for the modern Internet. It builds on students' previous programming experience to develop and demonstrate technologies in action.

CITS3403/5505 Agile Web Development will cover the foundations of the web and internet, fundamental browser techbnologies including HTML, CSS and javascript, the development process for large applications, and full-stack web development using Flask, AJAX and SQLite.

This unit will share material between CITS5505 and CITS3401, although there will be some differences in assessment and class. The handbook entry and general unit policies are all available from the online LMS and we will use MSTeams (CITS3403 and CITS5505) for discussion and class management.

Contact Hours

Each student should attend (or view) the two hour lecture, complete a two hour lab and attend or view the workshop every week. Attendance will not be taken. Online labs will be conducted via MSTeams.

Type	Time	Day	Location
Combined Lecture	2:00 - 4:00 pm	Wednesday	Wilsmore Lecture Theatre
Combined Workshop	9:00-10:00am	Friday	Murdoch Lecture Theatre
CITS5505 Lab	2:00-4:00pm	Monday	MCL net C Face to Face
CITS3403 Lab	10:00-12:00pm	Tuesday	MCL net B Face to Face
CITS3403 Lab	10:00-12:00pm	Tuesday	Microsoft Teams
CITS5505 Lab	10:00-12:00pm	Tuesday	Microsoft Teams
CITS3403 Lab	12:00-2:00pm	Tuesday	MCL net B Face to Face
CIT3403 Lab	2:00-4:00pm	Tuesday	Microsoft Teams
CITS3403 Lab	11:00-1:00pm	Wednesday	Microsoft Teams
CIT3403 Lab	4:00-6:00pm	Wednesday	CSSE Lab 2.03 Face to Face and Teams
~~CITS3403 Lab~~	~~8:00-10:00am~~	~~Thursday~~	Lab cancelled
CIT3403 Lab	10:00-12:00pm	Thursday	CSSE Lab 2.03
CITS3403 Lab	2:00-4:00pm	Thursday	MCL net D
CIT3403 Lab	4:00-6:00pm	Thursday	MCL net D
CIT5505 Lab	10:00-12:00pm	Friday	MCL net D
Consultation	10:00-12:00pm	Wednesday	CSSE Rm 2.14 and MS Teams

Assessment

The assessment for CITS3403 consists of a mid-semester test, a group project and an examination.

The assessment for CITS5505 consists of an individual project, a group project and an examination.

Assessment	% of Final Mark	Due Date
CITS3403 Mid-semester Test	20	08-04-2022
CITS5505 Individual Project	20	14-04-2022
Group Project	30	23-05-2022
Final Exam/Take Home Test	50	31-05-2022

Unit Schedule

PDF files of the individual lectures will be made available from here as the semester progresses, as well as the files used for demonstrations. Lecture recordings are also available via LMS

The Lab Exercises will be available on Fridays of the week before the scheduled lab.

Week	Date	Lecture (Wed Wilsmore, 2-3pm)	Lecture (Wed Wilsmore 3-4pm)	Lab Various	Workshop (Murdoch Fri 9am)
1	Feb 28	Introduction	HTML	No lab, but set up your Dev Environment	Visual Studio Code.
2	Mar 7	CSS	Bootstrap	Getting Started, and HTML5	CSS & Bootstrap
3	Mar 14	Javascript	Javascript	CSS and Bootstrap	Javascript
4	Mar 21	Document Object Model	Document Object Model	Javascript	Document Object Model
5	Mar 28	JQuery	AJAX	Document Object Model	Midsemester Test Revision
6	Apr 4	Agile Development	GIT	AJAX	Midsemester Test
7	Apr 11	Flask Web Development	Server Side Rendering	Git Basics	Good Friday 5505 project due
Non Teaching Study Break
8	Apr 25	MVC Architecture	Object Relational Model	First Flask App	Setting up Flask
9	May 2	REST APIs	REST APIs	Adding a Database	Adding a DB
10	May 9	Authentication	Testing	Testing	Testing
11	May 16	Client Side Rendering	Sockets	Deploying to Heroku	SPAs
12	May 123 Project due	Going to Production	Future of the web	Project demos	Revision

Old Node/MEAN Lectures

MEAN, MEAN Project, Mongo, ORM, REST, Sockets, Authentication, Testing, Angular, SPA.

Project

CITS5505 Project 1: HTML, CSS & JavaScript Website

Due 5pm, April 14, 2022

This project is worth 20% of your final grade and must be done individually. It is for CITS5505 students only.

The project description, instructions and marking scheme is available here.

CITS3403 and CITS5505 Web Project Specification: Online Daily Puzzle

Due 12noon, May 23, 2022

This project is worth 30% of your final grade in the unit must be done in groups of two to four for CITS3403 students. For CITS5505 students, it should be done in pairs, and both students must be CITS5505, unless special permission has been granted.

A Marking Criterion is now available

Project Description

For this project you are required to build an online daily puzzle, operating in a similar manner to Wordle. The app should have a short daily exercise that users do; the users recieve a score, or a rank, or some kind of feedback; they can share their performance with others through social media or similar mechanisms; and they can track their progress and statistics. It should also be convenient and easy to play via mobile devices, and engaging enough for the users to want to return regularly. The application should be written using HTML, CSS, Flask, AJAX, JQuery, and Bootstrap. (Any additional technologies not mentioned in lectures will require special approval from the unit coordinator).

It is not expected that you produce an exact Wordle clone, and this approach will not recieve high marks. Any daily puzzle or challenge is good: guess the secret sound, number games, sudoko like puzzles, programming challenges, hotter/colder games. You are encouraged to link it to things your are interested in: the puzzle could be to identify a sports person from their statistics, or a common supermarket product from its carbon footprint.

There are a number of Wordle clones already available:

Absurdle which keeps changing the word.
Lewdle which is just like wordle, but only uses bad words (NSFW).
Semantle which uses NLP and semantic similarity rather than syntactic similarity to match words.

as well as many other daily puzzle sites like this one.

Think carefully about the design of the application. It should be:

Engaging, so that it looks good and a user wants to play it every day.
Challenging, so the user feels a sense of achievement
Intuitive, so that it is easy for a user to access
Effective, (optional) so that it promotes a positive message or modifies a users behavior in a positive way.

The web application should be styled to be interesting and engaging for a user in the selected context. It should offer several views including:

A game/puzzle view where the user can attempt the puzzle
A results/statistics view, where a user can see their recent statistics, and aggregate statistics of friends or the general population.

In addition to the web application, you should create a private GitHub project that includes a readme describing:

the purpose of the web application, explaining the design of the game
the architecture of the web application.
describe how to launch the web application.
describe some unit tests for the web application, and how to run them.
Include commit logs, showing contributions and review from both contributing students

Group Registration is via this application, which also include a feature for requesting to be assigned to a group and booking demonstration times in week 12..

Getting Started: Select Application Purpose and Style

Find a partner(s) with (ideally with common interests) and come up with a theme for your application. Discuss styling, how the application is likely to be used, and precisely what functaionality it should offer.

Criteria: Front-end (50%)

The web application must be functional so that the user can easily access the puzzle.
The webpage must be implemented using HTML5, CSS and Javascript (or a subset thereof).
All resources used (inlcuding pictures, javascript libraries, css) must be full referenced.
The website must use HTML5, and CSS. The HTML and CSS must pass this validator.
The website must work on Chrome, Firefox and Microsoft Edge, and render well on mobile devices.
The website should have at least three pages/views:
- one promoting the theme and purpose to users, and explaining the rules;
- one presenting the puzzle/game;
- one page showing aggregate results and usage statsitics
- optionally it may also have registration and login pages. If registration and login aren't used, some other mechanism should be used to track return users;
- there should also be a mechanism for administrators to upload new puzzles, or vet generated puzzles. These maybe through command line operations, etc, but they should be robust so that administrators will not cause the app to crash.
There must be a consistent style (via css file) for all pages yet each page should be easily identifiable.

Marking Scheme

HTML5 - style, maintainability, validation 10%
CSS -style, maintainability 10%
Javascript-code quality, validation of user generated data, execution 15%
Style - look and feel, usability 10%
Content - coherence, effectiveness 5%

Criteria: Backend functionality (50%)

The second part of the project criteria is the back end functionality of web application. The web application should be implmented using Flask (any additional libraries/modules require unit coordinator approval), and provide at least the following functionality:

A user account and tracking feature.
A method to store puzzles and results.
A method to update and vet puzzles.
A mechanism for users to share their achievements.

Marking Scheme

Codecode quality, complexity of task, execution 10%
Persistence and User authentication Database schema and models10%
Testing Unit tests and Selenium Tests10%
Design Purpose and level of complexity10%
Collaboration Git logs and agile processes 10%

The Marking Criterion is available.

Submission and Presentation Instructions

Submission

Students should submit a complete Flask application providing the functionality of the project. This should be submitted as a zip including

a full readme.md, describing the design and development of the application, and giving instructions on how to launch from local host, and run your tests and validation
the git log, showing commits from both partners. Use git log -–all -–decorate -–graph to format the log (you may need to change some of the options, but make sure that all authors and commits on all branches are visible).
all source code, with comments and attributions for any external libraries, including your tests directory
a requirements.txt file, listing all packages used. To build the requirements.txt file for your virtual environment, use the command: pip freeze > requirements.txt while your virtual environment is active.
You may incude a small db for testing purposes

Do not submit the virtual environment directory, or the .git directory. These are overly large, not required and will result in a penalty if they are submitted.

Submit your zipped file to cssubmit, making sure that you submit it to the correct unit code, as CITS3403 and CITS5505 have the same name.

Demonstration Schedule

In week 12 all members of each team must present and demonstrate their project. The schedule is available at the sign up page. There will be a link for your teams meeting to do the demonstration. Please:

Make sure your entire team is in the meeting 5 minutes before your scheduled time.
You have your app launched on a machine, you demonstration database set up and are ready to share screen
All members are able to talk and have a camera set up

You will be ask to demonstrate the features of your app. This should take no more than 8 minutes, and it is worthwhile having a rough plan or script that involves all team members. You will then be asked some questions from the assessor, and may need to show some additional functionality, source etc. The entir presentation should take about 12 minutes, so please be prepared.

Exams

Midterm Test

The Midterm test will be held in week 6 and is worth 20% of your final grade. It is for CITS3403 students only.

Past midterm tests are available for practice. Particularly, via LMS you can access last years mid-semester test, and a sample mid-semester test for practice. The mid-semester test this year will be similar except: it is worth 20% rather than 10%; you will have 1 hour rather than 30 minutes; and there will be 5 multiple choice questions rather than 3. Other written exams you can use for practice are below.

Midterm 2014 Midterm 2017 Midterm 2019 Midterm 2019 model answer 1 Midterm 2019 model answer 2

Midterm Reference Material

The following three references have been used previously in mid-semester tests, and maybe useful to include in your open book material. They will also be provided with the final exam, so it is worth getting familiar with the format of each reference.

Midterm Time/Venue and Procedures

The test will be available on LMS, and all students must commence the test between 8.30am and 9.30am on Friday, April 8, unless special permission has been granted to complete the test at a different time.

The test will be open book. Students may have any printed materials with them during the test, or have electronic documents open prior to the test. Students may not use internet search, IDEs or any other electronic aids in the test. All typing must be in the LMS test window.

Students may not communicate with one another or receive any external help during the test.

If students lose internet connection or power during the test, they should attempt to restart the test as soon as possible (progress is autosaved), and send the unit-coordinator a note to explain what happenned at the end of the test.

The test will consist of 5 multiple choice questions (1 mark each), 1 short essay question (3 marks), and 1 coding question (4 marks, and accurate syntax is not required). Questions will be randomised, but will all have similar levels of difficulty. Students will have 60 minutes to complete all questions.

The questions will be on material from the lectures and labs in the first four weeks (including any readings specified in the labs). You could be asked for example to define concepts, explain the rationale behind them or the history of how they came about, discuss the issues involved or the decisions made and provide advantages and disadvantages of alternatives. You could also be asked to write some code.

Your answers do not need to use lengthy prose. You may use bullet points when relevant.

Sample Questions

Explain the relationship between HTML and CSS. How can a developer use them to imporve the modularity and maintainability of the website? [4 marks]
A common function of a program editor such as Emacs is to do bracket matching. Write a JavaScript program that prompts the user for a single line of code, and then reports whether the parentheses match. (That is, whether each opening parenthesis is matched by a corresponding closing parenthesis.) [5 marks]
What is the Document Object Model? What is its purpose? (That is, what does it allow? Give at least two points for this.) [2 marks]
What is the difference between the world wide web and the internet? [1 mark]
Explain, with a simple example, how you can use CSS to layout a web page. [2 marks]
Explain how JavaScript's object-orientation is prototype-based.
Write a JavaScript function that, for any identified section of text (hint:using the id element) in an HTML document, changes each occurrence of a user-specified string to another user-specified string. (Note: Change only if the whole word matches) [4 marks]

Final Exam - Take Home Test

Released 8am, Tuesday May 31, 2022, Due 5pm, Wednesday June 1, 2022 Now available here

This Exam is worth 50% of your final grade and must be done individually. For equity reasons, the teaching staff will not be able to answer individual questions between the exams release and the due date. Questions may be posted to a public teams channel and may be answered by teaching staff. Any communication, commentary, or discussion of the test during this period will be considered academic misconduct.

The format and examination points

The test should take about 3 hours to complete, and will involve producing a web site addressing a given specification. You will be required to write the web-site (including HTML, JS, CSS and multi-media files) and submit these files as a zip to cssubmit.

A sample exam will be made available in week 11, and further details of the examination topics and structure will be discussed during Week 13's review lecture.

Sample Exam

The following is an indication of what to expect and recommended preparation for the final test

Build a study web site for the unit Agile Web Development, with the following specification:

The web page should have the unit title, your name and student number as a heading at the top (1 marks)
Provide a paragraph giving a overview of the unit in your own words (2 marks)
Give a list of what you consider to be the six most important outcomes of the unit, in order of importance. Give each outcome a uniue style (e.g. color) to refer to later.
Give set set topics, corresponding to the 15 topics of the unit, this can be formated as a list, or a table or a set of titles, but each topic should expand when clicked to reveal:
1. A 1-2 sentence overview of the topic, and an anchor link to the lecture notes at https://teaching.csse.uwa.edu.au/units/CITS3403
2. A reference to the outcomes that are relevant to the topic (e.g. dots with the corresponding color).
3. 4 important concepts within the topic. Each concept should have a check box next to it, to be checked when you have finished studying it
4. The topic shold have a teaxt area for you to add notes. The text area should have black text, that goes red when the text exceeds 1000 characters.
5. The text areas can be empty in general, but three must be prepopulated:
  1. One, in topic 5 should give an overview of the Document Object Model an its importance to web. (3 marks)
  2. One in topic 10 should describe model view controller arhctectures, and how it is implemented in flask. (3 marks)
  3. One in topic 11 should describe the six characteristics of REST, and how they are significant to deploying a flask project. (4 marks)
6. When all the concepts have been checked and the notes are not empoty, the background of the topic should be set to green.
(2 marks each)
At the bottom of the page there should be a paragraph giveing an appraisal of the unit, including, what you thiought was good, what improvements could be made and under what curcumstances you would recommend another students takes the unit (2 marks)
Finally, there should be a README.md text file in the directory describing the architecture of a flask back end that could serve this web page, and backup the study plan in a database (but you do not need to implement this). You should describe the database schema, the routes and HTTP methods served, and how the routes interact with the web-page's functionality. (5 marks)

The web site must satisfy the following constraints:

Everything must be done in raw HTML, Javascript and CSS. You may not use bootstrap, JQuery, W3.css etc
The page does not need to be reactive to view size, but should render in Chrome, Edge, Firefox and/or Safari.
The page should not require live-server, and should be able to be loaded from the file explorer. It should not have any absolute links.
The page should be intuitive and easy to read and use.

Past Exams

Clearly past exams were a very different format, and are not a good indicator of what to expect in 2022. However, they are a good indication of the outcomes and the levels of competency that you will be expected to demonstrate.

Textbook & Resources

There are a number of excellent online resources and textbooks for the subjects covered in this unit. For the lectures and lab exercises, we may refer to the books: