Utrecht University

Department of Information and Computing Sciences

INFOB2WT - Web technology

(Period III, 2017-2018)



Homework Assignments

Assignment 1

Description

Develop a static website on the topic of your interest. It can be a website of your favourite team, movie, band, pet, book, etc. Use the Web-representation technologies discussed during the first three lectures (HTML5 and CSS3). The visual appeal of your design is welcomed but not required; yet, avoid deliberately repulsive color combinations. Your website is expected to present meaningful information about the topic. The pages should be bigger than a paragraph, but smaller than a book chapter.

Requirements

Your website must:

  • 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 through selector specificity
    • style inheritance
  • 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 (one exeption - you can use it for embedding YouTube videos)
  • render correctly at least in the current versions of Chrome and Firefox browsers

Maintain good coding style

  • 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 BlackBoard system

Academic integrity

The work should be done by and your peer only. You can rely on the support of teaching assistants and student assistants during the practicum time, but you are not allowed to use the code of other groups. It is also forbidden to use HTML generating services and programs. You are required to manually create both the HTML and the CSS code. You can use external sources for the content of your website, however, you must refer to them by linking and naming.

Assignment 2

Description

Develop a dynamic version of the website created in Assignment 1 using JavaScript (if necessary, you can change/extend the main theme). Use DOM methods, elements and events to interactively modify the content and appearance of your web-pages according to user actions. Use event listeners to process the events. Implement at least 1 case of event propagation (W3C model).

Create an additional page whose main content part is constructed purely through DOM manipulation. It should represent a (small) structured knowledge base of your theme. Entries of this "Knowledge Base" should be objects of different classes. Their content should be shortened versions of the content constituting the rest of the Website. A class model of your theme should have at least 3 classes and at least 1 case of inheritance (can be more). Classes/objects should be connected between each other. Links should be provided to browse across connected entries of the knowledge base. Use ES6 classes and ES6-style object construction.

Use external JavaScript libraries (jQuery and jQuery UI) to speed up the development. Implement a contextual menu that allows the user to change the appearance of particular elements on your web-pages.

Add a "Plot" page to your website; use Flot library or any other to implement an interactive plot, supply it with data relevant to the topic of your website. The plot must by interactive, i.e. user's clicks on something in a plot should cause change in data visualisation.

Extra credit assignment: a user can use the contextual menu also to copy, cut and paste content at any place of the Website. Page reloads should refresh HTML back to its original stage.

Requirements

In addition to the requirements of Assignment 1, you need to ensure the following:

  • separate scripting from the content
  • the context menu should allow at least changing the weight of the font to bold and back, the style of the font to italic and back, and the color of the font (between several colors)
  • the plot must be interactive
  • Knowledge based shoud be generated, E6-style class-based, interconnected

Maintain good coding style

In addition to the good coding style rules specified in Assignment 1:

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

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 BlackBoard system
  • do not submit video files. Instead, link your videos from any online Web space or file hosting platform (your university WebSpace, Dropbox, etc.) or use video hosting services (such as YouTube).

Academic integrity

The work should be done by you and your peer only. You can rely on the support of teaching assistants and student assistants during practicums, but you are not allowed to use the code of other groups. It is also forbidden to use HTML generating services and programs. Avoid using JavScript generation technologies (e.g. TypeScript), as the resulting JavaScript might not follow the requirements specified above. You can use external sources for the content of your website, however, you must refer to them by linking and naming them.

Assignment 3

Introduction

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.

Functional Requirements

Each product should have a title, a category, a manufacturer, a price and an image.

  • 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, price
  • 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/her profile.

Basic search function needs to be implemented - matching the searched term with the title of the product (you can match it also with the name of the manufacturer and/or category if you want). Search essentially allows restricting the set of browsed products to those that match the search term. Another way of restricting this set is by selecting price range, category and/or manufacturer.

Products should be listed in groups (e.g. 10 results per page). Implement a pagination interface, a "more" button, or "indefinite scrolling" that loads more results. There should be two different ordering options for the list of products: by price and 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. Once a product is purchased, it should be added to the history of the corresponding RB

You need to have products with various prices, various manufacturers (at least 10), various categories (at least 10). You need to add at least 30 products to populate the website.

User registration interface needs to be implemented, where the user specifies his/her login, password, first and last name and e-mail address.

Technical requirements

You are expected to apply the core technologies that we have studied 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 errors and warnings.
  2. JavaScript and jQuery – your website must use JavaScript. The use of JQuery is advised (but not mandated) to facilitate GUI development.
  3. Node.JS (and its frameworks) – you have to implement the server side of your website with Node.JS. Usage of Express.JS is very much advised. You can use additional Node.JS packages if you like.
  4. Use sessions to maintained users logged-in. It should be possible for several users to be logged-in at the same time. You can, but do not have to use persistent sessions.
  5. 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.
  6. 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 registered, when products are purchased the database must be updated.
  7. You website should work on the last versions of Chrome and Firefox.
  8. 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.
  9. User a logger recording all HTTP requests to your websites
  10. It is up to you whether to use or not HTML templating engines such as Jade
  11. Use ES6 classes to represent users and products in your code

Extra Credit options

  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 his/her history of purchased products. For every product, an average rating should be computed and all comments together with user logins should be displayed. Ratings and comments should be stored in the database. Add at least 50 comments and ratings to your products (overall, not per product, of course).
  2. Semantic Web features: To get an extra credit for the Semantic Web features, you need to implement the RDF import service for adding new products. The service should have a dedicated interface page, where a properly formatted RDF-description of a product can be added (title, category, manufacturer, price and link to an image file). You will need to use the http://schema.org/Product vocabulary for serializing RDF. Once a product is added it should appear in the site's list of products.
  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.

Procedure and Submission

You complete this assignment as pairs. Make sure to follow the instructions that Chris sends 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 the both authors;
  • A direct link (full URL) to the location of the website at http://webtech.science.uu.nl/
  • 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 registered 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 the sample RDFs to test the import feature).

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