Fork me on GitHub

Web Technologies Moodboard and storyboard Website - Web Technologies Moodboard and storyboard Website

Moodboard, Fontboard and Storyboard

Due 12:00:00, Tuesday, 11 Nov 2014 - Maximum mark is 20

Aims

To practice and enhance your web development skills using techniques and tools widely used by industry

Learning/Skills Outcomes

Scenario

In my semester 2 Mobile Development module, participants are required to maintain a log of their design thoughts and the progress of their development work. You are required to build a web-based system that supports this activity.

Users must be able to enter text and store it, with an associated timestamp. They must be able to upload supporting files associated with each log entry. Editting of entries must also be supported. It should also be possible to generate a PDF of the log or parts of the log. Beyond this you can add features as you see fit : drag and drop uploads, markdown support, tagging - ultimately whatever you think you might find useful if you were to use this yourself. (You might even consider testing the tool by using it to document your progress in building it)

You must develop the website using the PHP framework that I provide you with. It uses Twig and Redbean on the server side, and  HTML5, jQuery, Font-Awesome and Bootstrap at the client side. You can of course add other packages as you deem appropriate, but you must not substitute for the ones provided. (Bootstrap themes are fine)  I will describe the framework, the facilities it provides and how to use them in lectures.

The web interface should be designed to be usable, accessible and responsive.

In addition you must follow the styles rules described in the lectures wrt formatting, commenting and use of PHPDoc.

Style Rules

All your code must rigourously obey the formatting rules that I describe in the lectures:

1) Strict separation of content : NO HTML in PHP files.

2) Braces occur on their own directly under the construct they are forming a block for. Indentaton increases after the line with the brace. Braces should always be used - no single line blocks.

3) A single space after reserved words (e.g. if, foreach)

4) Spaces around operators., i.e $j = $k + $b; not $j=$k+$b

5) Indentation is 4 spaces per level. All code starts indented 4 spaces (except for block comments which are left aligned, thus :

/*

 *

 */

6) Every PHP files starts with a comment identifying the content and with suitable PHPDoc commentary. PHPDoc must be used where appropriate throughout the PHP code.

7) HTML should be standard HTML5 but should be styled as XHTML, i.e. lower case tags, /> at the end of singleton tags (e.g. <br/>)

8) You should SASS when writing any extra CSS code.

9) SASS/CSS must be formatted according to these guidelines.
 

Deliverables

Moodboard and storyboard

Submit to NESS by the 11th November, three files in any of jpg, png, pdf, ppt, or doc formats. One file containing a moodboard for the website and the other the storyboard for the site.

Website

Submit to NESS a single archive file (zip, tar, tgz) containing the whole directory in which you developed your website for the scenario.

Marking

The moodboard/storyboard part is worth 20 marks (3 font/5 mood/12 story) and the website is worth 80 marks.

The website mark will be broken down as follows :

1) Adherence to style rules - 10

2) Appropriate use of support packages and their features : (RedBean, Twig, etc.) 20

3) Appropriate use of PHP and its features 20

4) Overall design of your solution 15

5) Extras over and above the basic spec. 15

N.B. This is a programming exercise not a graphic design exercise so there are no marks allocated for the look of the site. There are no specific marks for eithert JavaScript or CSS  as Bootstrap should provide you with everything you need to build this site. If you do have some extra CSS or JS then they may contribute to the marks for the overall design and for extras.

Error checking is extremely important and I will be looking specifically for that.

Marks will be given along the scale Outstanding, Excellent, Very Good, Good, Basic, Borderline Fail, Fail, Absent which is equivalent to the degree classification scale with Outstanding being an extra category in the first class range. I am looking for you to show me your ability to take a specification and build a high quality site (coding aspect) using widely available tools that are thoroughly documented online.

 

 

 

Last updated Thursday 06 November 2014 - 15:47