• have at least 5 pages with meaningful content
• use HTML5 semantic attributes for formatting (e.g. see here)
• use images and video
• have links between pages, within pages, and to external page(s)
• have at least one table
• be optimised for search engines
• use consistent layout and colour scheme
• use CSS for formatting, including at least:
• several different styles for links
• several different styles for text
• styles for table elements
• cascading styles
• define all formatting styles in a separate CSS file
• be compliant with the HTML5 rules of W3C Markup Validation Service and the CSS3 rules of W3C CSS Validation Service
• to put it in other words: do not use any of the deprecated HTML elements or attributes (see for example here), do not use <iframe> either
• render correctly at least in the current versions of Chrome and Firefox browsers

• use lower case element and attribute names
• use indentation for nested elements
• use quotation marks for attribute values
• always use alt attribute with img elements
• use meaningful names for CSS classes
• short CSS rules can be written on one line, but long rules need to occupy multiple lines
• use lower case file names

Procedure

• complete and submit your website in pairs
• a pair must be registered with the TA beforehand
• the website should be archived and submitted as a single zip through the SUMBIT system

• separate scripting from the content
• the context menu should allow to at least change the font of the text to bold and back, italic and back, etc.
• the google map must be interactive, it must use markers and markers clustering
• the Flot plot must be interactive
• the pseudo-comment sections should have an interface resembling conventional Web-comment interfaces
• the default cookie size limit of 4KB is respected

• use camelCase notation when naming your methods, variables and classes
• use indentation when writing your JavaScript code
• use meaningful comments
• terminate statements with ";"

In this assignment, you will need to build an interactive client-server application that implements the functionality of a shopping website. You can look at Amazon, eBay or www.marktplaats.nl for inspiration. The website should provide listing and descriptions of available products. Products can be browsed and searched, added and bought. A set of basic functions must be provided. Extra credits will be awarded for implementing additional features.

1. Front-end for anonymous users (AU): an AU should be able to:
   • browse all products;
   • search for a product based on its title;
   • refine the browsed/searched products based on its category, manufacturer, seller and price
2. Front-end for registered buyers (RB): a RB should be able to do everything that an AU can do, plus:
   • buy products;
   • look at the history of bought products;
   • edit his profile.
3. Front for registered sellers: a RS should be able to do everything that a RB can do, plus:
   • add products;
   • look at the history of sold products;
   • look at the inventory of available products.

Adding a product would require a dedicated interface where a RS can name the product, indicate its manufacturer and price, load a photo of a product and indicate how many of these products she can sell, i.e. products should have counters.

Products should be listed in groups (e.g. 10 results per page). You can implement a pagination interface or a more button that loads more results. You can as well (but do not have to) implement different ordering options (by price, by name, etc.). If you do not implement ordering, order products by title.

Buying a product requires an “Are you sure?” confirmation. After which the purchase happens – you do not have to implement the follow up interface for paying and shipping options.

If a product is purchased:

• it should be added to the history of the corresponding RB
• it should be added to the history of the corresponding RS
• its counter should decrease, or if it becomes zero, the product should disappear from the available products - both site-wide and of this RS.

If a product is added, it should:

• appear in the site-wide list of products;
• appear in the list of available products of the corresponding seller.

You need to have products with various prices, various sellers (register at least 5 sellers), various manufacturers (at least 5), various categories (at least 15 organized as a tree of at least 3 levels). You need to add at least 30 products to populate the website.

User registration interface need to be implemented, where the user specifies her login, password, first and last name and e-mail address. A user can also indicate if she wants to become a seller, which opens up RS option for the user.

You are expected to apply the core technologies that we have learnt during the course:

1. HTML 5.0 and CSS 3.0 – follow the requirements specified in Assignment 1 to make sure your website represents its content according to the recent standards. Make sure W3C HTML5.0 and CSS3.0 validators do not generate any warnings.
2. JavaScript and jQuery – your website must use JavaScript. The use of JQuery and JQueryUI is advised to facilitate GUI development.
3. Node.JS (and its frameworks) – you need to implement the server side of your website with Node.JS. Usage of Node.JS frameworks (such as connect and express) is advised. You can use additional frameworks if you like.
4. AJAX – you will need AJAX. One mandatory place to use it is for displaying products in groups per page. It is up to you to decide if you need to use it in other places.
5. SQLite – products, users and their properties need to be stored in an SQLite database and access it with the Node.JS using sqlite3 module. When products are displayed, the information must come from databased. When new users and products are added, when products are purchased the database must be updated.
6. You website should work on the last versions of Chrome and Firefox.
7. Each HTML, CSS and JS file should have a comment at the top explaining the role and the functionality of the file and its structure. All JS methods and variables should have dedicated comments explaining their purpose
8. Implement a logger that will record all HTTP requests to your websites

1. Social Web features: To get an extra credit for the Social Web features, you need to implement ratings and comments. A user should be able to comment and rate purchased products. A dedicated interface should be available when a user browses her history of purchased products. For every product, an average rating should be computed and all comments together with user logins should be displayed.
2. Semantic Web features: To get an extra credit for the Semantic Web features, you need to implement the RDF import/export service for RSs. The service should allow them to add batches of products with a single RDF file import and to export the entire list of available products as an RDF file. You will need to use the http://schema.org/Product vocabulary for serializing RDF.
3. Adaptive Web features: To get an extra credit for the Adaptive Web features, you need to implement a simple version of the collaborative filtering recommender. A user should receive recommendations from the website based on the history of purchased/rated products and the corresponding histories of likeminded users.

You complete this assignment as groups of 4(3) students. You have been notified to which group you belong and who else is in your group. If you do not know to which group you belong, contact me and Ivo immediately. Make sure to follow the instructions that Ivo sent you with regards to using your web-space and configuring your website at http://webtech.science.uu.nl/

When submitting, you need to zip your entire website including the HTML, CSS, client side JS and server side JS files, as well as the DB file and all the images. Add a readme.txt file containing the following:

• Your group id
• Names and student numbers of all authors;
• A direct link (full URL) to the location of the website at http://webtech.science.uu.nl/

Your entire site you must pack into a zip file. Take in the zip file a text document named readme.txt on. Put the following in this readme.txt file.

• The names of the two authors of the website.
• The student numbers of both authors of the website.
• A direct link (full URL) to the location of the website in the ICT Beta server within the personal web-space on one of the two authors.
• A brief explanation of your web-site, the structure of your application, including every content file and every code file, the structure if your database, including an ER-diagram or similar.
• Logins and passwords of all RB and RS users.
• The SQL definition of your database (the CREATE TABLE statements)
• If you implement extra credit features, describe them in a separate section (for the Semantic Web extra credit option, include sample RDFs for testing import).

Deliver the zip file using the submit system by Apr. 10 (23:59). Do not wait to submit at the very last minute. Follow the academic integrity rules specified for assignment 1 and assignment 2.