SET08101/401/801 Web Technologies 2023-2024 Trimester 2 Web Technologies Coursework Specification Overview Edinburgh Napier UNIVERSITY The assignment for this module is a single project that is split into two parts. This

document details both parts. The objective is to demonstrate your understanding of client-side web development and mastery of HTML, CSS, & JavaScript. You will achieve this by completing a project in which you design, implement, and evaluate a statically hosted web site on the topic of fun (essentially build something fun). A good place to start might be an online game¹ (story-telling hypertext games are a good way to demonstrate use of web technologies) or a secret message coding site (using javascript to encode/decode messages using classical codes and ciphers) but you can interpret the topic more broadly if you have an idea for something else that is fun (perhaps related to an interest you have or pastime that you enjoy). School of Computing, Engineering & the Built Environment You should carefully consider the nature of the task, and plan a set of pages, a visual design, and user interface elements that provides your users with a good experience. If appropriate you may also include additional features or functionality, and make use of third-party & browser-based APIs as necessary, to implement your project. As we are evaluating your core skills it is advisable at this stage not to use frameworks like react.js as this can obscure demonstration of your own JS skills. Your implemented site must be hosted and deployed within GitHub pages which provides reliable and free static web hosting. It is a good idea to research similar websites, if they exist, that you can use as a benchmark against which to measure the functionality of your own and which might provide inspiration for how other developers have approached similar sites. It also advisable to discuss any ideas that you have for extensions to the basic requirements with your module leader during timetabled contact time, such as labs, as this is an opportunity for formative feedback to help you to perform well and to achieve a decent grade. The first part of the assignment is a report which will focus on the features, analysis, design, and plan for implementation of your site & is worth 40% of the total mark for this assignment. The second part of the assignment is the implementation and deployment of your design and is worth 60%. It is expected that what you design initially might well deviate from your final implementation and that techniques you discover later in the module might cause you to re-think or re-approach decisions or plan you have already made. You might even discover that your initial idea needs to be completely replaced with something more achievable. This is perfectly fine and gives you an opportunity for critical reflection in your final report. Above all, this coursework should be fun, so use your imagination, and give your creativity a free rein. Invention and originality will be rewarded by the marking scheme. I hope you enjoy working on it. © Edinburgh Napier University 1 See https://siwells.github.io/cyoag/ for the deployment of an example of a simple hypertext game (See https://github.com/siwells/cyoag for the source repository) Page 1 SET08101/401/801 Web Technologies 2023-2024 Trimester 2 Part #1 For this part of the assignment you will develop an idea for your fun website alongside a design and a plan for achieving an implementation of that design. These will be presented in a single report. You will likely want to develop a satisfying user experience, and utilise a visually pleasing design, so consideration of your users interactions with the site at this stage can be useful. Before you begin, it might be worth doing a little research into the kinds of features that other fun sites support or possess. Don't get too ambitious though as you have a limited amount of time and might be looking at what teams of well- resourced professional developers have achieved over a longer timescale. Remember that at this stage in your career your are learning about your own skills, about your ability to turn your ideas into effective implementations, and about how long it takes you to do these things successfully. As a rule it is worth having a simple, core plan containing just the essential, minimum viable functionality. Then you can supplement the core plan with more elaborate functionality in the situation that you make better progress than you expected, but allowing you to fall-back to something more achievable if you experience challenges along the way. Your deliverable for this part of the assignment is a single, short, and well written PDF report. An appropriate target length for this report is a single document of no more than 8 pages of text in 12pt fontsize (images do not contribute towards the length guide). The size of the report is a function of your effort and work and you will not be penalised for going over the guide length by a reasonable amount. Your report must include the following: 1. A description of the site that you are planning with enough background context for your reader to understand what you are trying to do. 2. A summary of any background research into other similar sites, or useful technologies, libraries, or APIs that you have investigated with a description of how this has contributed to your project idea and design. 3. A list of features and some discussion of why each feature is included. 4. Site organisation and/or navigation tree diagrams with associated discussion and explanation of how you plan to organise the pages that make up your site and how a user might typically navigate through those pages. NB. Your diagrams can be combined if that is a useful way to present the organisation and navigation for your site. These diagrams may be hand-drawn and scanned/photographed, or created using any image/diagram software as you think fit. 5. A sketch/wireframe/low/mid/high-fidelity prototype of an initial user interface for your site and some commentary on the motivation for your design, i.e. how does your design address the features you've listed? NB. If your designs are hand-drawn then they can be scanned/photographed for inclusion in your report. © Edinburgh Napier University Page 2 SET08101/401/801 Web Technologies 2023-2024 Trimester 2 6. A project plan that demonstrates how you will organise your effort and time to achieve your goals. This plan can be presented in any appropriate form, e.g. a list of dates and tasks, a gantt chart, and/or a narrative description. 7. (Optional) As appropriate: any additional sections that you deem fit to describe your project. For example, if you have decided to implement a particular feature as an extension to the core requirements then this would be the place to report on it. Similarly if you intend to save data within the browser, then some description of the kinds of data that you intend to store, how you will store it, and how it will be structured, should be reported on. Your report must be uploaded to Moodle by the deadline of 3PM on Friday 1st March, 2024. Part #2 You must implement your planned site from part #1 using HTML, CSS, and JavaScript. You may use any other technologies such as libraries, frameworks, third-party APIs, and browser APIs as appropriate. However your entire site must be deployed through GitHub pages. When you have used tools, libraries, or APIs other than pure HTML, CSS, and JavaScript written by yourself, you must be able to justify why you used them rather than creating a solution for yourself. Remember that this assignment is evaluating your skills on these core technologies and that use of readymade code (libraries/frameworks) can leave you with less opportunity to demonstrate what you can do. Your deliverables for this part of the assignment are the following: 1. A public deployment of your site using the GitHub pages hosting feature. 2. A zip archive containing the complete source code and all resources for your site submitted to Moodle. 3. A short (approximately 4 pages in 12pt fontsize) PDF report that covers the following: A. Clearly identifies the URL (web address) of your deployed site. B. Explains the differences between your initial plan as outlined in part #1 and your final implementation. There is no penalty for deviating from your initial plan, that is part of the learning and skill development process. C. Describes any features that you would add or improve to enhance your project, given more time, and what you now know. D. Reflects upon the challenges you faced and achievements you made during this assignment. © Edinburgh Napier University Page 3 SET08101/401/801 Web Technologies 2023-2024 Trimester 2 4. A short, approximately 3-5 minute, screencast with voice-over of you demonstrating the features of your site (see the "Demonstration Screencast" section below for more details). A single zipped archive containing your sourcecode, report, and screencast must be uploaded to Moodle by the deadline. The deadline for part #2 of the assignment is 3PM on Friday 26th April, 2024. Demonstration Screencast Because of the size of the class we cannot easily do timely face-to-face, demonstrations of our work. So we will produce a single short screencast recordings of our site and it's features being operated under normal circumstances. The aim is to show off what works, to draw attention to things we are pleased with, and to use the voiceover to explain our design thinking. Note that a screencast is simply a video recording of your screen as you interact with your web-app. This should include a voice-over of you describing what you are doing and why your app works the way it does. Screencasts are straightforward to record on most major platforms, Windows 10 includes the game DVR feature and Mac OS enables screen-recording via the QuickTime Player application. A free, cross-platform solution, with more functionality is the Open Broadcaster Software (OBS Studio²). Instructions for producing your screencast will be posted to Moodle to support you in producing this. Note that one of the normal goals of the demos is to establish that the work you've submitted is your own, but it is also a useful mechanism to avoid misunderstandings and help ensure that your work is marked accurately. As a result we may, exceptionally, ask some students to demonstrate their work live, either in person or through WebEx/Teams. Feedback Feedback is very important to your learning process. During the duration of this module you will experience feedback using a variety of modes and at various times. The most common type of feedback that you will get is verbal feedback during timetabled contact time. The aim of this is to help you to improve your practical skills and to help you to think critically about your progress. This is why attendance at lab sessions is important as these provide a great opportunity to discuss your ideas with teaching staff in a less pressurised context. You will also get some written feedback after your hand-ins along with your grade. Generally this is more brief than the verbal feedback you will have already received, and is primarily aimed at helping you to see what you did that helped you to achieve your grade. There may also be suggestions for improving things that you should consider in the context of your work. Under ideal circumstances you will receive written feedback via Moodle within three working weeks of the submission deadline. However you will also receive verbal feedback during contact time throughout the 2 https://obsproject.com/ © Edinburgh Napier University Page 4 SET08101/401/801 Web Technologies 2023-2024 Trimester 2 trimester. Verbal feedback is as important, sometimes more-so, than written feedback, and should neither be discounted nor disregarded. If you have specific things that you want feedback about then it is critically important that you ask for that feedback. Grade Guide The marking schemes are devised so as to reward those who go beyond the core taught material by integrating their own self-directed learning and discoveries. As a general rule, the more functionality, the better the mark, however your functionality should be consistent with a cohesive overall design, professional presentation, and pleasing user experience. Note that, because this is a project, rather than a mere test of your capabilities, you have significant leeway for what you include in your final submission (beyond the specified requirements). The following grade guide gives you a coarse description of how to interpret your overall percentage grade (for the entire module). When interpreting your feedback, please don't think in terms of "where did I lose marks?" or "did I get marked down for that?” but instead you should consider that you start off with nothing and incrementally approach perfection. A better question to ask yourself is "what could I have done to improve my work?" or "how could I refine what I have done to mark it even better?". Thinking critically about our achievements ourselves is how we develop a professional sense of the quality of our work, rather that relying on external validation of whether it is good enough. Projects like this are designed to encourage that kind of reflection and professional development. The following scale will give you some idea of the overall grade bands: 0-40% There are a number of ways to achieve a mark in this band, but generally you will either have failed to create a working practical implementation to a minimal standard in either part of the project, or have failed to submit a report that is written to an acceptable standard in either part of the project, or some combination of both. 40-49% Work in this grade band is considered to be up to an overall, acceptable, but minimal standard and constitutes a bare pass of the module. Practical implementations will cover at least the core requirements in each part and reports will be written to a minimally acceptable standard of content and presentation. The minimum expectation for a pass mark is that all required components (e.g. reports, code, screencast) are submitted for the associated hand-in. Additionally the implemented site must include multiple, hyper-linked pages (at least 3) with some CSS and JS functionality. 50-59% Work in this grade band is work that has achieved a good standard. This means that there is evidence that you are applying some depth of knowledge to the goals that you set out to achieve and are developing ambition in relation to what you build. 60-69% To achieve a mark in this band you will have produced work that is to a very good standard. As a rule, most students will achieve in the mid to upper end of this grade band. This indicates that you are developing significant depth in your understanding of the domain as a whole, as well as significant technical © Edinburgh Napier University Page 5/n Student note : Part 1 you will develop an idea for your fun website alongside a design and a plan for achieving an implementation of that design. These will be presented in a single report. You will likely want to develop a satisfying user experience, and utilise a visually pleasing design, so consideration of your users interactions with the site at this stage can be useful. ) and part two is (You must implement your planned site from part #1 using HTML, CSS, and JavaScript. You may use any other technologies such as libraries, frameworks, third-party APIs, and browser APIs as appropriate. However your entire site must be deployed through GitHub pages. When you have used tools, libraries, or APIs other than pure HTML, CSS, and JavaScript written by yourself, you must be able to justify why you used them rather than creating a solution for yourself. Remember that this assignment is evaluating your skills on these core technologies and that use of readymade code (libraries/frameworks) can leave you with less opportunity to demonstrate what you can do.) 5-6 pages report needed as well