Assignment
Personas
As has been outlined there are three specific groups who would be considered the core demographic for the users of this site.
Sue Smith
Age: 35 years old
Gender: Female
Location: Vancouver, BC
Education: Degree in Accounting
Occupation: Self-employed Financial Consultant
IT Skill: Good
Sue runs her own business and relies on a laptop running financial application software and an external drive on which information is backed up. As a self-employed professional who relies on IT, Sue visits the site for regular advice and assistance when issues are realized. The availability of an approachable IT resource through an up to date and technically proficient website are particularly appealing.
Dave Barclay
Age 58
Gender: Male
Location: Ottawa, ON
Education: Military career
Occupation: Retired
IT Skill: Average
Dave uses a desktop system to keep in touch with former comrades as well as pursuing information with regards to his Family Tree and interest in genealogy. One of the requirements prioritized by Dave is of reliability as well as consistency and he therefore uses the site to ensure he is aware of changes and able to be unaffected by increasing updates which are automatically applied.
Volunteering, Inc.
Small Business
Charitable Sector
12-15 users, many part-time
Variety of desktop and laptop devices
Use of 3rd party solutions
IT Skill: Average→Low
Volunteering, Inc. is a charitable organization aimed at delivering volunteering opportunities to a wide section of their local community. As a result, they rely on a centralized database implementation which requires a large amount of maintenance and support as it not a SQL compliant structure. An annual contract for support which provides a certain SLA between the IT consultant and Volunteering, Inc. is in place and they will use the website to monitor the status of any open support requests.
Within Volunteering, Inc. there are two specific personas - the Manager who is responsible for overseeing the overall organization and will also have access to financial and personnel information, and the team of volunteers who help to fulfil the overall objectives of the organization accordingly. These personas can be categorized accordingly:
Volunteering, Inc. Manager - Louise Robinson
Age 37
Female
Education: College Diploma
Experience: Personnel Management in Large Organizations
IT Skill: High
Volunteering, Inc. Staff
Age 18 - 62
Female and Male
Education: All minimum high school standard
Experience: Mixed, some with business experience/self-employment, others taking on their first formal role out of education
IT Skill: Low to High
Due to the fragmented nature of the charitable organization, desktops and laptops which have been provided through donations and partnership schemes have a variety of specifications. All have multiple core processors and between 2 and 4GB RAM but some are running Windows Vista, while others are on Windows 7 and Windows 8.1. Internet Explorer 9, 10, and 11 are utilized while some users have downloaded Chrome and Firefox.
Scenarios
Sue uses the automatic update feature of her financial software and is then unable to open previously saved accounting information for herself or her own customers. Attempting to open the files from her saved backups also exhibits the same issues so she uses the website to call the IT consultant who is able to connect remotely to her system and rollback the update. It is then discovered that the update has had a similar effect on multiple machines, and the vendor will provide a further update in the future - all of which is documented on the Consultant's site accordingly.
Dave is moving files and folders around and mistakenly overwrites the file which contains his Family Tree information. While it still opens, the contents of the file are no longer visible. A review of articles and associated sites from the Consultant's site indicates the availability of shadow copies for files with previous versions and this allows the information to be restored.
Volunteering, Inc. raised a request for additional licenses to be purchased for Microsoft Office to cope with additional user requirements. Logging on to the website they are able to see that the order has been placed against their site and that it is pending action with the vendor directly. They are able to update their staff internally accordingly.
A user is browsing Google for local IT support services and is prompted to visit the site by the clear and logical presentation of information, as well as the testimonials which are visible from other customers.
An IT Blogger accesses the website on a regular basis to review the current tech articles which are posted and comment on them accordingly.
Competitors would access the website on a regular basis in order to determine the prices and services which are being offered, as well as attempting to ascertain further information such as the popularity of certain articles based on comment statistics.
In this unit we will be asking you to find some JavaScript code that someone else has written and incorporate it seamlessly and effectively into your site. The code could be anything from a menu system or other navigation aid to an animation or game, but it should be appropriate to and support the scenarios and personas you have already developed in Unit 1.
Paying extremely close attention to the needs and scenarios and personas of Unit 1, find some small piece or pieces of JavaScript code that might be useful from the Web (e.g., from javascripts.com-see the links for this course for potential sites or find your own, and add them to our collection on the Landing).
Make sure that you have a right to use the code: it should be public domain or licenced as open source that you are free to use and modify. Do ensure that you abide by whatever conditions are required (more on this below).
Try to avoid anything particularly complex-stick to scripts that you are going to be able to understand, at least in outline.
Incorporate it into one or more of your web pages.
Very important: for this and for all occasions on this course when you will be re-using or modifying code written by someone else, make sure it is properly ascribed-there should be no doubt about where it came from in the marker's mind. We strongly encourage legitimate re-use of code, but we will treat plagiarism, in which you do not correctly cite the author, very seriously and punitively.
Explain what the code does in as much detail as possible. An example is provided in the Process Guide section of this unit.
Provide a critique of that code, indicating how and why it is good and/or bad. Even if there is nothing obviously wrong, you might minimally explain that the code is properly indented, well-commented, making good use of variable names, etc. More information is provided in the
Process Guide section.
If necessary, using the code that you have already incorporated into your page, modify it so that you increase its functionality, and correct any errors you find in structure, style, or content.
Choosing the Code
As well as ensuring that the code does something that your site users would find valuable, for your own sake it is wise to stick with small, easy-to-understand code examples. A sensible length of program to look for would be between 20 and 30 lines long at most (not counting blank lines or instances of HTML or CSS). The code you use should, however, be of sufficient complexity to enable you to provide a critique and summary. You may choose slightly shorter or longer examples if you wish, bearing in mind that increased length leads to an increased workload for you.
It's a good idea to find some well-commented code: comments can be identified as either single lines that start with two slashes (//) or as larger block of code delimited by slash-star and star-slash (/* ---some comments -- */). Well-written code always has comments to help other programmers to understand what it is doing. In fact, more often than not, it is to help the original programmer remember what the code is about.
Something to remember for the rest of the course: Always include plenty of comments in your code unless you have an extremely good reason not to. For this course, there will never be a good reason not to provide comments!
Be careful to avoid anything that is too long and complex: if it contains more than 30 lines (not including comments and blank lines) it is almost certainly too much work to decipher. Also beware of things that require a great deal of integration to use effectively on your site, unless it is something you really, really want, in which case be prepared to put in some effort with debugging.
Here is a very simple example of the kind of thing we are looking for an explanation and critique:
The original code:
TOP
function helloworld (userName){
alert("hello"+userName);
return;
}
The explanation and critique:
The function takes a parameter of 'userName' and displays an alert box that says "hello ", where is the value passed to the function. It would be used to provide a personalized greeting on a site, though the pop-up alert would probably be too annoying to use on a real site.
The code itself is quite well written, but it would be improved by adding a comment to explain what it does. Also, the statements in the statement block are not indented, so it is hard to see where the block begins and ends. The lines should be indented to improve readability. Also, the function name would be better in camelCase, again to make it easier to read.
Of course, it is highly unlikely that you would find this particular function useful in any of your pages! You might get good marks for your explanation and critique, but you would almost certainly lose them again for choosing code that would not fit your scenarios or personas. The examples you discover are likely to be a bit more complex and lot more useful.
The kinds of snippets that might be valuable could include (by way of example-feel free to choose your own):
image rollovers or slideshows
menu systems - pull-down, expandable, etc.
form validation (e.g., to ensure correct entry of phone numbers, dates, etc.)
browser detection (and a means of doing something as a result such as showing or hiding a section)
games
calculators/conversion tools
theme pickers
visual embellishments (e.g., animations - but use with care!)
databases
sortable lists
etc.
Summary
Critique JavaScript code written by others, identifying examples of both good and bad practice.
Use JavaScript to add dynamic content to pages.
Modify existing JavaScript code to extend and alter its functionality and, where appropriate, to correct errors and cases of poor practice.
You will also be asked to read and attempt to understand the code you are using, and to critique and (if possible) improve or modify it in the light of your critique. As a result of this, you will gain several useful competences and insights (we hope), including a better idea of what is possible with JavaScript, a fairly good idea of JavaScript commands and construction, and a better sense of how technologies might enhance a site.
Critique JavaScript code written by others, identifying examples of both good and bad practice: you should be able to demonstrate an in-depth knowledge of code structure and form, identifying inefficient or unmaintainable code accurately, spotting syntax and logic errors, identifying good and bad practice, considering usability and compatibility issues, and recognizing the distinctive artistry (or lack of it) shown by the programmer. The code you critique should be sufficiently rich to encompass a wide range of programming constructs, functions, classes, and commands, including manipulation and use of page and/or form elements, different methods of sequence, selection, and iteration, use of classes and objects, use of functions, parameter passing, declaration of variables, comments, and different data types.
Use JavaScript to add dynamic content to pages: Your code should be clear, maintainable, and well structured, suitably integrated into the web page so that it can be easily modified and maintained.
The code will be carefully chosen and its use thoroughly justified in the context of the personas and scenarios developed previously
Modify existing JavaScript code to extend and alter its functionality and, where appropriate, to correct errors and cases of poor practice: hand-in-hand with the critique, you will have taken examples of rich coding and modified them in a manner that explicitly fits the needs of your site.