Web Technology Trends

The assignment consists of three parts: designing a website, building a Single Page Application (SPA)/microsite, and writing a research essay. The website design component requires students to create a product website with various features such as navigation, articles, video, animation, and live information obtained through Ajax calls. The SPA/microsite component asks students to build a separate microsite that can be totally separate from the main site. The research essay component requires students to write a well-referenced essay on a chosen topic, capturing their argument and conclusion in a single paragraph and then breaking it down into sentences with evidence or written arguments.

OVERVIEW
This assignment comprises 100% of the assessment for CSC-20021 (Web Technologies). The
assignment is in three parts. Parts one and two (50% and 25%, respectively) are practical exercises
where your tasks involve building components of a web application. Part three (25%) is more
theoretical; your task in this section is to research a current topic in Web Technologies and write
an essay that argues your findings. The submission deadline for this work is Monday, 12th
December 2016, 23.59.
Remember that the demonstrators cannot write your assessment for you, but they can answer
technical questions and point you in the right direction. Make sure to ask them if you have any
questions or problems during your lab sessions.
1 Create a website (50%)
For part one of the assignment, your task is to create website that promotes a product or selection
of products. You can choose the products, but you should not choose something that someone else
is also doing. Your website should comprise at least five distinct pages, and it should cover the
components listed in Table 2. The site should be written in standards-compliant HTML 5 and CSS 3
and should be validated before submission. It should be responsive, adjusting intelligently to
different display capabilities. Your work will be evaluated using the latest stable release of the
Google Chrome web browser.
1.1 Marking scheme
The weighting for completion of each section of this task is broadly equal, as indicated in Table 2.
Across these components, marks will be awarded according to the schema defined in Table 1. The
assessment of documentation will consider both coding comments and documentation within the
accompanying report.
Coding and mark-up quality 30%
Functionality 30%
Presentation quality (consistency of presentation, not design)
20%
Documentation 20%
Table 1. Marking schema for part one.
2 Create a single-page application (25%)
For part two of the assignment, your task is to create a Single-Page Application (SPA) “microsite”
that spotlights a single product or product feature on your website. The SPA should incorporate

interactive elements that let the user explore the available information without leaving the page–for
example, you could build an interactive factsheet, slide-show, or infographic, or a simple game. You
are encouraged to research and use external frameworks (libraries) for this purpose.
2.1 Marking scheme
• 40%+: The Single-Page Application offers some dynamic elements that respond to the user’s
action. No external frameworks used. Limited documentation and evaluation.
• 55%+: The Single-Page Application has many dynamic elements and exhibits complex behaviours
that depend on the user’s activity. At least one third-party framework is used effectively. Good
documentation and evaluation.
• 70%+: The Single-Page Application is of professional quality, showcasing complex interactions and
advanced use of JavaScript and third-party frameworks. Excellent documentation and evaluation.
3 Essay (25%)
For part three of this assignment, your task is to undertake literature research both online and in the
library. You are to produce an essay of approximately 1000-1500 words, addressing the following
subject, which you should use as your essay title: The future of web technology: online development
in 2026. Your essay should first analyse the history of, and current trends in web technologies. From
here, you should identify one important trend and justify why it stands out. Then, describe how this
trend (and perhaps others) will continue, change, or develop over the next ten years. Finally,
describe your vision of this technology in 2026 and summarise your essay.
3.1 Marking scheme
In general, I am looking to read an interesting and well-written essay that summarises the history of
web technology and presents a considered idea about its future. I am not looking for complete
coverage of every angle, but an identification of a major trend and an extrapolation of where it’s
going. Please make sure that you cite any relevant work properly; I don’t mind which referencing
system you use, provided it’s consistent. Harvard referencing is a good choice as you will be required
to do this in your final year project as well.
• 40%+: The essay identifies a major trend in web technology and describes some issues relating to
this. Few or no examples are used to illustrate the important points, and there is limited or no
historical context. There is a weak or confused argument, or no argument is present. Poor use of
written English language skills, and poor or no referencing.
• 55%+: The essay identifies a major trend in web technology and describes several pertinent points
that support it. There is discussion of how these points relate to each other, and how this has
changed historically and might continue to evolve in the future. Intelligent use of examples
illustrates the key points, there is good evidence of satisfactory argument and language skills, and
appropriate referencing is employed.
• 70%+: The essay identifies a major trend in web technology and many points that support it are
clearly and compre- hensively described, situated well in historical context, and their
interrelationships are carefully examined. A current direction of travel is identified and strong

arguments support a critical position on how these issues will develop in the future. There is good
evidence of clear thinking and accomplished use of written English to concisely convey complex
information. Clear, consistent referencing is used throughout.
4 Submission details
The deadline for the coursework is Monday, 12th December 2016 at 23.59. You should submit the
following items to the assessment drop-box on Blackboard (please adhere to the naming
conventions and file formats; marking incorrectly submitted work is at my discretion):
• A zipped archive containing your website for part one1. Name the zip file according to your
student ID and the assignment section, for example, 09015680-part1.zip.
• A brief report saved in PDF format that describes your work for part one, explaining what you have
achieved, where you experienced problems and any parts you were unable to complete. All ten
sections noted in Table 2 should be documented in this manner. You should also include a link to the
“live” version of your page at the top of your document2. Name the PDF according to your student
ID and the assignment section, for example, 09015680-part1.pdf.
• A zipped archive containing your microsite for part two. Name the zip file according to your
student ID and the assignment section, for example, 09015680-part2.zip.
• A brief report saved in PDF format, describing your work for part two. Document your
achievements and any problems, and again include a link to the “live” version of your page at the
top of the report. Name the PDF according to your student ID and the assignment section, for
example, 09015680-part2.pdf.
(1Please note that .zip is the only permitted format. Other archive formats such as .rar, .tgz, etc. are
NOT acceptable, and will not be marked.
2PDF is the only permitted format: do not submit Microsoft Word documents, OpenOffice
documents, etc.)
• A PDF file of your research essay for part three. The essay should be properly referenced according
to a consistent referencing scheme (I don’t mind which), and you should also state the word count.
Name the PDF according to your student ID and the assignment section, for example, 09015680-
part3.pdf.
5 Advice and tips
5.1 Designing a website
• When designing your product website, take time to sketch out your ambition on paper first. Draw
the pages and mark how they link to each other.
• Remember and apply the principles for interaction design that were presented in your first year,
Information Systems and Interaction lectures.
• It is perfectly fine to use copyrighted images and other media from online resources in your work,
provided it is coursework that is not publicly available.

• Build the structure of your site first, then go back and embellish the content and presentation
later. Remember the mobile-first paradigm and do the most widely-accessible version at the outset.
• Regularly test your HTML for standards compliance with the W3C validator tool.
• Since Ajax is limited by the same-origin policy, we must use a JSON Ajax proxy to break out to
outside data sources. This is a PHP script running on our local server that retrieves the remote data
for us. The proxy is at: http://www.teach.cs.keele.ac.uk/extra_scripts/proxyi.php.
The proxy script takes a remote URL to retrieve using a path GET variable. For example, to retrieve
live currency rates for GBP from fixer.io, the following works:
http://www.teach.cs.keele.ac.uk/extra_scripts/ proxyi.php?path=http://api.fixer.io/latest?base=GBP
5.2 Building the SPA/microsite
• As with the main site, sketch your ideas on paper first to build up a working design, and only then
start to build it.
• Research possible JavaScript frameworks you could use to support your application.
• This part of the assignment can be totally separate from the first part; there is no need for any
links between the two.
5.3 Researching and writing the essay
• Think carefully about your chosen approach. Make sure it is open enough to allow you to develop
an interesting argument, but not so open that you can get lost trying to cover the details.
• You will need to research your essay. Don’t be afraid to revise your thinking about the topic as you
discover more resources on the subject.
• If you are citing the writing of others, try to capture why they made the point you are citing, as well
as the simple fact that they did so.
• Essay-writing is an individual activity and different people have different approaches. If you are
wondering where to start, I would suggest that you write down your main argument and conclusion
in a single paragraph. Then break this paragraph down into sentences and find evidence or write
arguments that back up the point of each sentence. Put these back together into longer paragraphs
to construct the full thesis of your essay.
• Always proof-read your work carefully to check for spelling mistakes, grammar errors, and
confusing ordering. It’s often the case that odd constructions creep in due to editing your work with
copy-paste, so make sure you give it a careful once-over before submission to ensure everything is in
order.

Table 2. Required website components for CSC-20021 assessment (part one). The proportion in the
right-hand column indicates the relative weighting of this component in this part of the coursework
assignment only.
Navigations between the pages that make up your site, and links to other sites that might provide
further information about the product.
10%
An article describing some applications or benefits of the product. This should contain one or more
images.
10%
An article generally promoting the product. This should have a relevant soundtrack that can be
controlled by the user, and should also contain images.
10%
A video that can be controlled by the user without using the standard HTML5 controls (i.e.,
programming the interaction yourself.)
5%
A thumbnail of each product image should animate into a larger version when it is clicked. This
should use the window.setInterval and window.clearInterval methods.
5%
Live information obtained through the use of an Ajax call (coded in JavaScript). For example, this
might display the current stock price of the company manufacturing the product.
10%
The price of the product in five major currencies. This should be obtained and processed using
jQuery (including jQuery Ajax calls) and the results used to update a relevant element on the page.
10%
A small form that will allow the user to join a mailing list. This should collect the first name, last
name, date of birth, and email address of the user. The information should be sent to a PHP script
that you have written using an Ajax POST request. The server should process the information and
return a text message which should be displayed to the user. It should not be possible to submit a
malformed email address and both name fields should only contain letters and spaces. The date of
birth should be valid and checked prior to sending, ensuring that only people above the age of 18
can submit the form.
20%

The user should be able to customise the basic font size and background colour of the header
elements used across all the pages of the site. Their preference should be saved in local storage,
using the local storage API, and used to control the presentation next time they visit the site.
10%
A small canvas-based animation into one or more of the page headers. This should use the
window.setInterval method.
10%