CSC-20021 Web Technologies Assessment 2017



Dr GOKSEL MISIRLI


School of Computing and Mathematics, Keele University


[email protected]


OVERVIEW


This project comprises 100% of the assessment for CSC-20021 (Web Technologies). The project is in two parts. Part one (75%) is a practical exercise where your tasks involve building components of a Web application. Part two (25%) is more theoretical; your task in this section is to research how to improve the efficiency of companies using Web technologies and write an essay that argues your findings. The submission deadline for this work is Monday, 11th December 2017, 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.


Create a website (75%)



For part one of the project, your task is to create your own personal website. Your website should cover the components listed in Table 2. As part of this website you will develop a blogging platform, using which you should be able to submit, update and view blog posts. The home page should include widgets such as displaying recent blog posts and information from external websites. The website should be written in standards-compliant HTML5 and CSS3 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.


Marking scheme


The weighting for completion of each section of this task is indicated in Table 2. Across these components, marks will be awarded according to the scheme defined in Table 1, where possible. The assessment of documentation will consider both coding comments and the accompanying report.


Design, coding and mark-up quality

35%

Functionality

25%

Presentation quality (consistency of presentation, not design)

15%

Documentation

25%

Table 1. Marking scheme for part one.



Navigations between the pages that make up your site, and links to other sites.

10%

Admin users can login and logout, and the authentication details are kept using the session.

10%

Develop a blogging platform as part of the website.

–   A Web page for submitting blog posts should be created and be accessible to admin users. The

page should include a form to collect post details such as title, description, blog category, email,

and so on. Users should be able to upload an image. 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. All the fields should

be validated. For example, it should not be possible to submit a malformed email address.

25%

–   A Web page for displaying a summary of blog posts.

–   A Web page for displaying full details of an individual blog post.

–   A Web page for editing a blog post.

–   A recent blog posts widget displaying the last two entries. Details should be obtained and

processed using jQuery (including jQuery Ajax calls) and the results should be used to update the

relevant section on the home page.

A small canvas-based animation into one or more of the page headers. This should use the

10%

window.setInterval method.

A video widget on the home page that can be controlled by the user without using the standard

10%

HTML5 controls (i.e., programming the interaction yourself).

–   A weather widget showing weather for your chosen three cities (or next three days for a city).

Pictures should be thumbnails and only one of them should be displayed using a larger image.

Clicking on the thumbnails should display the corresponding details and the large image using

10%

JavaScript.

–   Live information should be obtained through the use of an Ajax call (coded in JavaScript) for the

weather widget.

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

10%

the local storage API, and used to control the presentation next time they visit the site.

The website should be optimised for search engines where possible.

5%

Providing additional functionality of your choice You can include one or more additional Web pages.

For example, you can include your HTML-based CV or list of your modules as a Web page. Please

10%

document this additional functionality clearly.


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.


Essay (25%)



Web technologies have already changed the way that many companies operate. For example, publishing companies now rely on online subscriptions, the travel industry takes advantage of the Internet through B2B and B2C websites, and some companies focus upon online advertisements. Also, the use of social media and the cloud technologies became ever more important.


For part two of this project, your task is to undertake literature research regarding the use of Web technologies for small or medium-sized companies. You are to produce an essay of approximately 1000-1500 words, addressing the following subject: Improving the efficiency of companies using Web technologies and the





Internet. Please choose YOUR OWN title. You can narrow your research for a particular industry or for a specific technology.


Marking scheme


Essays will be marked according to the university’s marking scheme, available at https://www.keele.ac.uk/sas/academicservices/assessment/markingscheme. You should identify one or a few Web technologies and several points about how these technologies can be adopted by small or medium-sized companies. Please make sure that you cite any relevant work properly and consistently.


Submission details



The deadline for the coursework is Monday, 11th December 2017 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):


0 A zipped archive containing your website for part one1. Name the zip file according to your student ID and the project section, for example, 09015680-part1.zip. The zip file will include


o all the source code; and


o the PHP code documentation produced using one of the PHP documentation generators.


0 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 sections noted in Table 2 should be documented in this manner. The document should also include information about the software architecture and should provide an overview of the different components of the project. Please use diagrams and figures where possible. You should also include a link to the “live” version of your page at the top of your document. Name the PDF according to your student ID and the project section, for example, 09015680-part1.pdf.


0 A PDF file of your research essay for part two. The essay should be properly referenced according to a consistent referencing scheme, and you should also state the word count. The number of words MUST NOT exceed 1500, including references, and figure and table captions. Name the PDF according to your student ID and the project section, for example, 09015680-part2.pdf.


Advice and tips



4.1 Designing a website


0 When designing your website, take time to sketch out your ambition on paper first. Draw the pages and mark how they link to each other.


0 Remember and apply the principles for interaction design that were presented in your first year, Information Systems and Interaction lectures.


0 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.


0 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.






1 Please note that .zip is the only permitted format. Other archive formats such as .rar, .tgz, etc. are NOT acceptable, and will not be marked.






0 Regularly test your HTML for standards compliance with the W3C validator tool.


0 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/proxyj.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/proxyj.php?path=http://api.fixer.io/latest?base=GBP


4.1 Researching and writing the essay


0 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.


0 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.


0 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.


0 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.


0 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.