CSCI5709-Advanced Topics in Web Development Assignments 1 Solved

Assignment 1 involves the application of User eXperience, usability and design principles discussed in class, for the creation of a proposed Lo-Fidelity prototype of your group project’s application, illustrating your ideas for the  the overall look-and-feel of a web application’s UI, i.e., your group project. Though you are encouraged to meet with your group members, keep in mind that this assignment is not a group assignment. Instead, meet with your group to discuss project ideas (e.g., purpose, features, target users) that you may use to develop your own prototype of your group’s application.  

The goal of this assignment is to help you draft a proposed set of requirements for your application, as well as assess the suitability of Front-End APIs for your project, given those proposed requirements, while allowing your group to take part in a parallel design exercise where each of your project group’s members will be submitting their UI vision for the group’s web application. This approach is commonly used in start-ups and design/development firms, as it often results in better team collaboration and more efficient development and integration. Remember, each group member is expected to submit a different prototype. 

As part of this assignment, you will also have to provide justifications for the design choices you have made, e.g., APIs, Front-End Frameworks, colour scheme, typography. Finally, it goes without saying that any instance of academic dishonesty will be reported.  

If you decide to use and modify any existing code, e.g., code found on online or printed sources, or code used during in-class/tutorial examples, you are expected to provide author attribution in your README.txt file providing an explanation of why the piece of code is necessary for your work, where, how and why the code or section of code was modified. You are encouraged to use the README template available on Brightspace, as this is an annotated template meant to guide you in this process. Keep in mind that simply stating “code was modified” does not provide sufficient information required in your programming assignments, the 
amount of detail expected in your README file is illustrated in the README template.
                
Learning Objectives:  

1.  Judge and apply UI and UX design techniques discussed in class (e.g., use cases, task flow diagrams), while considering the usability of the device used to access your website. 

2.  Assess the suitability of Front-End APIs and Frameworks for the purpose of developing a high-fidelity prototype application, given a set of proposed guidelines (e.g., wireframes, devices, expected functionality). 

3.  Become familiar with your group’s Front-End Framework(s) of choice for the purpose of developing a semi-functioning high-fidelity prototype, given a set of proposed guidelines. 

4.  Learn to collaborate with group members to define your project’s purpose, potential features, user personas, scenarios and sitemaps in order to compile a set of potential guidelines and requirements for your group project. 

Requirements: 

Part of your Assignment 1 will require for you to work with your group, and part of it will involve individual work done on your own. 

For the group work portion of your Assignment 1, you must do the following:

A1.1.  Project’s Purpose, Goals and Intended Features 

Meet with your group and define your project’s proposed requirements, such as purpose, goals, its intended features (e.g., Profile Management, Permission Management, File Transfer System, Recommender System, Shopping Cart, File Management System), and your target user base. 

Note: Think of this assignment as a working draft, a brainstorming opportunity. As 
a general guideline, we expect the number of defined features for your project to be equal to ‘Group Members x 2’ (i.e., if your group is made up of 5 members, you are expected to have 10 features). You will be expected to have ~70% of these features 
developed by your final report.
 
A1.2.  User Personas and Intended Scenarios 

Meet with your group and identify/define the user persona(s) for which you are developing your application. For each user persona, describe their characteristics, and your intended scenario(s). Finally, define the scenarios in which you envision your application being used, ensure your scenarios describe all of the required components usually found in a scenario. 

Note: You are expected to provide a full description of your user personas, simply 
stating “students” or “professionals” will not meet this requirement. You are encouraged to refer to the corresponding lecture materials (e.g., lecture videos and 
slides) for guidance in defining user personas and scenarios.
 
A1.3.  Sitemapping 

Meet with your group to create a complete proposed sitemap for your idealized application. 

Note: Your sitemap is meant to be developed as a group. Your sitemap must 
illustrate the complete information structure of your application, as well as areas were authentication is required. Your sitemap must be properly created using a 
sitemaping tool. All images in your assignment must be properly captioned and referenced within the text. You must include the site mapping tool in your 
References Section.
 
A1.4.  Use Cases 

Work with your group and, have each member of your group, choose at least ONE (1) of the features you defined in A1.1. Define the use cases for each task within the feature(s) you have chosen. Your use cases must clearly define the normal and alternate flow of events, you may use any of the scenarios defined in A1.2 to help you define your use case sequence. 

Note: For example, if your scenario is “it is 2am, you are in downtown Halifax and need to call a cab using our application in order to get home”, then your use case would detail the steps required (from a user and system perspective) to call a cab for this particular purpose with the environmental factors expected in that scenario. You may use bullet-point form for this item. It may be wise to draft a list of features with your group mates and assign two features to each member. 

For the individual work portion of your Assignment 1, you must do the following: 

A1.5.  User Experience and Task Flow 

Work alone and choose ONE (1) of the features you defined in A1.1, along with their corresponding use cases from A1.4, to create a task flow diagram for each of the tasks in the feature defined in A1.1. 

Note: Your task flow diagrams must must be properly created using a diagramming 
tool, you must properly reference this tool in your deliverable. All images in your 
assignment must be properly captioned and referenced within the text. 
 
A1.6.  Lo-Fidelity Prototype 

Work alone to create a lo-fidelity prototype, i.e., a wireframe, of ONE (1) of the pages in your proposed application, taking into consideration the specifications you have identified in A1.1, A1.2, A1.3, A1.4 and A1.5. EACH member of your group is expected to submit a different prototype and/or design. 

Note: Your lo-fidelity prototype must be properly created using a prototyping or 
 
wireframming tool, you must properly reference this tool in your deliverable. All images you may use in your assignment must also be properly captioned and referenced within the text. You must create a lo-fidelity prototype that reflects the structure and layout (at minimum) of the task and/or feature a given user persona 
 
is able to complete through your chosen page. Ensure you properly caption your 
wireframes (e.g., Figure 2. Wireframe applicable to Sign Up page).
  
 
 
A1.7.  Semi-Functional Prototype 

Work alone to create a semi-functional prototype of the page you chose in A1.6. You may use any front-end framework or languages of your choosing, but do make sure you document your work on your README.txt or README.md file. Your prototype is only meant to be semifunctional is regard to its front-end, therefore, feel free to hard-code or use dummy data were you see fit to simulate any back-end processes.  

Note: You may discuss with group members your plans for your A1 submission, but you are 
asked NOT to show your actual work in order to ensure that your design does not influence other designs in your group. Keep in mind that EVERY member of your group is expected to submit an entirely different design than yours, though some 
commonalities may be OK. 
 
You are encouraged to consider the use of front-end APIs where you see fit. 
Further, if you choose to develop a page that includes web forms, you are expected to implement front-end validation techniques that improve the usability of your 
prototype.
 
Finally, though you are tasked with creating ONE (1) page, you are encouraged to 
create some or all of the pages involved in a particular task, e.g., if you were to choose the registration page, then your assignment will be expected to include all pages and/or modal boxes needed to allow a new user to complete the registration process. As such, it is possible that your assignment may include more than one 
page.
 
 
 
 
 
A1.8. The pages you develop must reflect the requirements specified by you in 1.1 through 1.6. 

A1.9. You may use Lorem Ipsum text for the content of your pages. Additionally, any forms you include your design must use meaningful labels and messages (e.g., ‘Your message was successfully submitted’). 

 Note: Though you may use Lorem Ipsum text to help you define the content hierarchy of your submission, it is recommended for you to include meaningful text where possible as it will help you see how your design may compliment the message you are looking to communicate (e.g., headings, navigation links). 

A1.10.Your assignment MUST be responsive. However, it is up to you to define the level of responsiveness your assignment should reflect, based on the requirements you specified in this assignment.  

A1.11.Your assignment MUST be W3C compliant, i.e., it must pass W3C front-end validations tests (e.g., HTML and CSS). 

 Note: Failure to submit valid code will result it a possible maximum grade of 50%. If your assignment does not validate due to framework-specific tags or code, these errors will be overlooked (e.g., Angular’s ng-app HTML attribute) and WILL NOT affect your grade. As well, any validation warnings WILL NOT affect your grade. 

A1.12.Your assignment MUST apply usable front-end validation and user feedback tech-

niques to validate form fields, and provide proper error recovery messages in case a field does not validate. 

 Note: Proper user feedback in forms may include the use of AJAX confirmation or success messages, as well as failure messages to the user. Your messages should also take into consideration the security of your application. Of course, what you implement is based on your vision for your project. 

A1.13.In regards to the look-and-feel of your assignment, you have complete creative freedom for this assignment. You are encouraged to work towards an aesthetically pleasing website that applies the design and development principles discussed in class. You may use Creative Commons images and/or logos with proper author attribution (provided through code comments, and/or README.txt file). 

                Note: Do keep in mind that as part of this assignment, you are expected to work individually on a specific design. You may, if agreed by your group, use the same HTML structure for your A1 submission. However, you CANNOT ‘share’ any CSS code. 

A1.14.Make sure to include in your README.txt file, the URL from which your assignment can be accessed. All pages you develop for this assignment will need to be accessible through that link, otherwise, you may include the links to all individual pages. 

  Note: If you decide to use and modify any existing code, e.g., code found on online or printed sources or code used during in-class/tutorial examples, you are expected to provide author attribution in your code comments, along with a README.txt file providing an explanation of why the piece of code is necessary for your work, where, how and why the code or section of code was modified. Keep in mind that simply stating “code was modified” does not provide sufficient information required in your pro-

gramming assignments. 

submit your work to Brightspace: 

•         Include your answers to A1.1, A1.2, A1.3, and A1.4 (which is work you’ve done with your group), as well as A1.5 and A1.6 in a single PDF file, these answers will be a part of your group submission. Your group submission must match naming conventions specified in the Course Syllabus. In this case, since these sections represent work done in groups (with the exception of A1.5 and A1.6), your written portion of this assignment should be named A1_Group#.pdf and be submitted into the A1 Group Submission assignment dropbox on Brightspace. 

Note: Any deliverable not submitted as a PDF file will have a 5% grade deduction. Any deliverable 
submitted without following the proper file naming convention will have an additional 5% grade deduction. Include the name of the group members who worked on a particular task flow diagram (i.e., A1.5) and Lo-Fi Prototype (i.e., A1.6) within their corresponding 
Figure captions.
 
•         For your individual submission, you will be submitting a README.txt or README.md. Your README file must provide the appropriate details for the technologies used and work done in developing your individual semi-functional prototype, as well as the prototype’s URL, and must match naming conventions specified in the Course Syllabus, i.e., it must be named A1_READ-

ME_LastName_FirstName.txt or A1_README_LastName_FirstName.md, and be submitted into the A1 Group Submission assignment dropbox on Brightspace. 

•         Compress both your PDF and README files into a single .zip file and follow the naming conventions specified in the Course Syllabus (A1_LastName_FirstName.zip). Submit this file as your assignment on Brightspace. 

To submit your work to Git Lab: 

•         Create a project folder called A1_FirstName_LastName. Ensure all your assignment files are included in your project folder. 

•         Setup your project folder as a private project and add the course Teaching Assistants (TAs) and Instructor as ‘Maintainers’ to your project, using their CS IDs. 

 Note: The CS ID for this course will be provided in class/tutorials. Failure to add the course CS ID as ’Maintainer’ for your work on Git Lab will result in a maximum possible grade of 50%. 

•         You are free to use GitHub if you wish to do so instead of GitLab, but you must ensure you provide access as ‘collaborators’ to the Markers provided in your Tutorial 2 Handout. 

To submit your work to Timberlea:  

 For the purposes of this assignment, you may use Timberlea, Heroku or Azure as your deployment option. Your deployment solution must be agreed upon by your entire project group. To allow for this flexibility, your README.txt file must include the URL from which your assignment can be accessed. 

However, should you choose to use Timberlea, below are a series of instructions to help you out. 

•         Login to Timberlea at timberlea.cs.dal.ca using your CS Username and CS Password. You may use Terminal or an FTP Client (e.g., FileZilla) to connect to Timberlea.              

Note: If you are using an FTP Client, you may use sftp://timberlea.cs.dal.ca as your hostname. If you need help logging on to Timberlea, please follow the instructions available on the CS Support website (https://web.cs.dal.ca/~tlin/cs_support/) 

•         Once logged into Timberlea, go into your ‘public_html’ folder and, if you have not already done so, for the sake of simplicity, create a folder called ‘csci5709’. 

Note: All your work must be reside inside your ‘csci5709’ folder, this folder must be nested inside your ‘public_html’ folder. If your files are not inside your ‘public_html’ directory on timberlea.cs.dal.ca, the markers will not be able to access your work and you will receive a grade of 0. It is the responsibility of the student to ensure their assignments are available for grading before the due date. 

•         Go into your ‘csci5709’ folder and create an assignment folder called ‘a1’. 

Note: You will need to create an assignment folder for each individual assignment, as well as your final project, as we go through the term (i.e., A1, a3, a4, and project). 

•         Place the all the files you created for this assignment inside the ‘a1’ folder you created on Timberlea.  

Note: In order for your assignment files to be accessible through a browser for testing and grading, you must ensure you are using the correct file permission settings on your files and folders. On a shared server, such as Timberlea, it is recommended to use ‘755’ (i.e., rwxr-xr-x) on folders, and ‘644’ (i.e., rw-r--r--) on individual files. You can set your file permissions easily through an FTP client by right clicking on the file or folder you want to set specific permission settings. Depending on your FTP client, you will need to click on ‘Get Info’ or ‘File Permissions’. Once on the file permissions window, you can simply enter the numeric value described above. 

•         Test your assignment is readily accessible and properly working. Your URL will likely include a port address. Ensure you include this URL in your README.txt file. 

 Note: You are encouraged to check your work through the URL specified in your README.txt file, as the Instructor and TA will not be checking any other URL. The rule of thumb is “if you can see your assignment on a browser through your assignment’s URL, the TA and Instructor can see and grade your assignment”. It is the student’s responsibility to ensure their submission is accessible and working as expected. 

•         Using Development Frameworks: 

-         If as part of your assignment you plan to use a development framework such as Node or Angular, do keep in ming that you will have to use a custom port when launching your web application. Ports 1000 through 40000 are allowed through the firewall for this purpose. 

Note: Most students should be able to use their CS ID. However, if you do encounter issues with your account, please stop by the FCS Help Desk located on the main level of the Goldberg Computer Science building. 

-         If as part of your assignment you plan to use CodeIgnitor, a PHP development framework, you may simply download these files into your public_html directory and serve them from your Timberlea account. CodeIgnitor also includes a database configuration file, so you may need to have your own copy of this file. 

Note: Should you have any issues, please stop by the FCS Help Desk located on the main level of the Goldberg Computer Science building. 

-         If as part of your assignment you plan for use .NET, you will have to use a custom port when launching your web application. 

Note: Should you have any issues, please stop by the FCS Help Desk located on the main level of the Goldberg Computer Science building. 

•         In addition to the submission instructions detailed above, there are a few other guidelines you should follow for this assignment: 

•         You must use HTML5 semantic document divisions (discussed in class) where possible, instead  of simply using divisions <div.  

•         You must not copy / paste code from any websites – this amounts to plagiarism. Do not copy / paste text and content from the websites either. 

 Note: In the case you find a piece of code that would be useful for a programming assignment, you may be able to use it if you meet the following requirements. 

Your tutorial/assignment/project must include a README.txt file that specifies the following: 

-         The function and line(s) of code (as noted in a Source Code Editor) that include any content taken from a web source. 

-         The web source (i.e., URL) where the code was taken from and the date on which it was accessed. 

-         A brief explanation of what the code is meant to do in its original form (i.e., as it is shown on the web source), 

-          An explanation of how the original code was modified in order to be used in your tutorial/ assignment/project. You must have extensively customized the code in order to be able to use it, copy/paste or simply re-naming variables will not suffice. 

•         Images. If you want to use other images on your website, be sure to use images that are published under Creative Commons licenses, i.e. you can use them with proper attribution. A good place to search for such images is on the Creative Commons website: http://search.creativecommon-

s.org/ Always remember to attribute credit to the image creator. Credit should either be in HTML comments or in a separate document named “README.txt”  

•         The emphasis in Assignment 2 is for you to apply your knowledge of identifying elements from the wireframe. i.e., the process of creating a website, from the conceptualized design in a wireframe.  

•         This approach helps you translate your ideas / concepts from class into actual websites, allowing you to apply what you have learned.  

•         You are welcome to include additional features in A1 such as those that can be achieved through the use of CSS and Javascript. However, bear in mind the following:  

-         Your submission must meet the criteria specified in A1, first and foremost. Beyond this requirement, you are welcome to include additional aspects of future assignments. However, no bonus points will be granted or replacement will be allowed for any missing aspects of A1.  

-         You stand to lose points if the additional markup / CSS elements that you might implement interferes with the basic requirements of A1.  

-         I will not stop you from exploring beyond what is taught in class or what is expected in these assignments. However, please be mindful of what you submit as your assignment submission.