Semester Project

For your semester project, you will be formed into teams. I'm going to do the team assignments in order to ensure team heterogeneity. Your team will find a 'client,' for whom you will create a website

I would like for your team's website to eventually include the following (you will be creating these throughout the semester):

• A home page (index.html)
• At least 3 other pages (will be based on your client communications and what the client desires)
• Each team member will be responsible for creating at least one page for the site
• A website mission statement displayed somewhere in the site (where is up to you - this alone will not count as one of the other pages)

Your team's website should be uploaded to the class web server inside your team's root ( / ) folder

Requirements

• Each project team will have at least five members
• You will find a client for your project. The only restriction on client selection is that the client cannot be currently enrolled in CSCI 1210, or a web design class at another institution
• You will meet with your client and elicit requirements for the web site from him/her/them (we'll talk more about requirements elicitation later this semester). You should also plan to meet with your client periodically to present your current work and solicit feedback
• Then, you are to write a mission statement for your website and present it to the client for approval. At the very least, the mission statement should include a general goal statement, a client persona, and list the key components of the site. The output for this task will be Phase 1 of the project and will be submitted via D2L
• You should be prepared to meet on a regular basis. I will make some class time available, but out-of-class collaboration is expected
• Remember, the 'rule of thumb' for college classes is that you will spend 2-3 hours outside of class, for each credit the class is worth, working on class material. This is a three credit course. So our expectation is that you will spend 6-12 hours working on Web Development each week
• You are to create your website keeping your site mission and future maintenance (appropriate comments in your code) in mind
• The site should:
  • Use a template (this will be index.html, once you have it set up) as the beginning of every page that you create
  • Be HTML5 compliant
  • Use CSS (you must use an external style sheet for the formatting that will apply to all pages, and you can use embedded or inline for the styles that apply only to specific pages or specific items on the page - but use of these should be limited)
  • Be validated and include the validation logos (for HTML and CSS) on every page (use the script tag at the end of your body <script src="/js/w3c.js"></script> to check them) - There are some exceptions to this rule that we'll discuss
  • Have consistent navigation on every page
  • Have appropriate titles for each page (this means the title that shows up in the title bar and the browser tab - not something that shows up at top of the content of the page)
  • Incorporate graphics & colors. Your team will need to come up with a color palette and have it approved by the client. Then use the palette consistently across all pages in the site
  • Use relative links to pages within the website (absolute links to pages within your website are NOT ALLOWED)
  • All pages should have a consistent look and feel
  • Be free of spelling and grammar errors

Group Identity

Your team's first task will be coming up with a team name. I'll need unique team names in order to set up D2L's dropbox folders

Interesting note: Dr. Sanderson, a much-loved faculty member who passed away in 2011, was a huge Star Wars/Star Trek buff. When we did team projects in his class, he assigned the team names based on Star Trek TNG races, like Aenar, Ferengi, Talaxians, etc.

Your organizational structure

All team members are required to author at least one page on your final website, but there are five roles available with distinct areas of responsibility. You need to choose, as a team, who will fill what role. You will need to hold people on your team accountable for fulfilling the duties of their role, and you will have opportunity to score your team members at the end of the semester on how well they performed. The roles to be assigned are:

• Team Lead - This person is responsible for leading the team, coordinating schedules, setting meeting times with the team and with your client, running those meetings, and submitting the team's final work. The Team Manager is also responsible for communications with me
• Document Manager - This person is responsible for documenting the team's work, keeping meeting minutes and notes, and handling (and also documenting) questions the team may have for the instructor. They are responsible for enforcing and maintaining the site's directory structure
• Lead Designer - This person is responsible for the final “look and feel” of the site, and should coordinate with the rest of the team to decide things like color scheme, font choices, page layouts, etc. They are responsible for designing and editing any logos, art, or images used on the site, and should work with the lead developer to create site-wide CSS files
• Lead Developer - This person is responsible for maintaining coding standards, making sure all HTML and CSS files meet those standards, and mentoring and assisting other team members as they author HTML and page-specific CSS files. Again, all team members are required to author at least one page on the final website, but the lead developer is responsible for making sure those pages are written well
• Quality Manager - This person is responsible for testing the site, making sure all links are working, all pages load and function properly, and that all coding standards have been kept. They are your “final pair of eyes” before the site is presented to the users for usability testing, and they are responsible for coordinating user testing and feedback. If you are on a team with only four members, this role's responsibilities should be split up and re-assigned to the other roles

A note on meetings: It is often difficult, in an academic environment, for five or six people to meet outside of class. I recommend you consider some of the remote possibilities like Skype, Google Hangouts, Slack, Discord, etc.

GitHub

We will be using the GitHub code repository to store and maintain the code, files, and documentation for the project. We'll discuss GitHub in detail - what it is used for, how to use it, and the necessary workflow - soon

Deliverables

Phase 1: Mission Statement, Personas, and key components (25 points)

Each team will have a D2L Dropbox folder for submissions. One person shall be designated to upload deliverables when they're due. This should be the Team Leader, but may be designated by the lead to another team member, if needed

You are to post Phase 1 to the Dropbox in D2L a Word file containing a description of your site and client, and the personas, site mission statement, and anticipated key components. For the description of the site, you should give a rough idea of how you intend to map the information across the site. For the personas, you will need to first decide on at least two potential groups of people that will visit your site. Define the common characteristics of the people who might belong to each group (examples below are not a definitive list)

• Age ranges
• Gender (if one is dominant)
• Level of education
• Occupation
• Hobbies and interests
• Web/computer experience level
• Personal goals
• Type of equipment used (desktop, laptop, mobile, etc.)

After listing the characteristics of each group, each team member will create the persona of a fictitious user that would belong to each group

Each team member will create a persona (and identify which persona you created). If your team only has two potential user groups, well, then, each group will have multiple personas. Their common characteristics should be evident

For example, if 'Group A' happens to be males between 19-26 years old, then all personas in that group would be young males and have shared interests, based on the nature of the site

Each persona will need to contain, at the very least:

• Name (First and Last, fictitious, of course)
• Occupation
• Goal (they should have at least one goal when visiting your website)
• Technical proficiency
• Likes/dislikes
• A distinctive catchphrase - a statement that describes what's most important (in life/work/school) to that user, e.g., "Accept nothing less than excellence!"
• Accessibility/Usability concerns ("None" or "All" are not appropriate answers. Create a "real" person with real needs it might be helpful to pattern your persona after a person or combination of people you know)

Phase 2: Information Architecture and Usability/Accessibility Strategy (50 points)

You are to post two Word files to the team Dropbox. The first Word file will describe your information architecture, and should contain the following:

1. A description of the structure of your proposed site (what pages the site will encompass, what links will be present between the various pages). The focus of this section is the Information Architecture and navigation among the pages in your site. A diagram of the structure of the site may prove helpful
2. A summary of the content - what the pages will be and a summary of the content that each will contain
3. A description of the overall layout design (look and feel) along with a rough diagram of what the site home page and one other site page will look like. (You can use a tool like Fireworks, Paint, or PowerPoint to assist in making this diagram or get a screen shot of the actual page if you have it created, or provide scans of hand-drawn prototypes)
   
   You can use the Snipping Tool or Snip & Sketch (both included with Windows), to create screen shots. You can find it by clicking on the Start button and entering “snipping” into the search bar
4. The color palette to be featured in the visual design. This should be a screen shot of your chosen palette, not a verbal description of the colors you plan to use! For example:
   

5. A copy of at least 1 significant visual element of the site created by your team (logo, banner, etc.)
6. A sampling of some photos or other graphics which will be used in the site

The Word file you submit for the above should be: team_name_phase_2a.docx

The second Word file should describe your strategy for addressing the usability/accessibility concerns that you listed in Phase 1. Use the personas from Phase 1 as well as any additional usability/accessibility concerns that you believe should be addressed

For each usability/accessibility concern, you will explain what the problem is, how it relates to a persona, and how your website addresses the concern. Example:

Concern: Jane (Persona 1) has a visual impairment, and uses a screen reader. The website must be readable by automated screen readers so that Jane may view the website
Resolution: To ensure that the website is readable, we will ensure that all images/graphical content contain alternative text. It will also include HTML 5 semantic elements like <strong> and <em> instead of <b> and <i> to modulate screen readers' output

You must address all usability/accessibility concerns listed in your personas

The Word file you submit for this document should be: team_name_phase_2b.docx

Phase 3: Completed Project (100 points)

Upload all of your website files and subfolders to your team's folder on the class server

Note: Each team member is responsible for creating at least one of the site's pages. Meaning, writing the code for the page. You will signify which page(s) is/are the one(s) you created by placing your name in the 'Author' field of the page's comment block. In so doing, you are signifying that the page is a product of your labor. The rules of Academic Misconduct will apply here

Submit a Visual Studio Code text file in D2L in the team's Dropbox folder that has the following information:

1. Your team's name on the first line
2. The names of your team members
3. The URL to your team's site on the last line

No information is to be included in the D2L submission other than the items mentioned above. Also, check the link to make sure that it works. If it does not, I will not be able to grade your project. Be sure you have thoroughly tested your site before submission: different size displays; different web browsers; etc.

Phase 4: Project Presentation (25 points)

Your team will be presenting your completed project to your class. Check the calendar for the due date. You should address the following in your presentation:

1. Your name
2. A description of your site and why you chose to do the site
3. A description of the mission of your site and the target audience
4. Demonstrate each page of your site discussing design decisions that you made, issues you ran into while working on the site and any other information you would like to share
5. Ask for questions

Presentations should be approximately 10-15 minutes in length. All team members should participate in the presentation - just standing in front of the class with your team will not be sufficient

Phase 1	25 points
Phase 2	50 points
Phase 3	100 points
Phase 4	25 points
Total	200 points

Peer Evaluation

After completion of Phase 3, each student will be required to submit an evaluation of their peers' participation in the project activities

The evaluations will be kept confidential

Failure to submit the evaluation will result in a zero on your project grade

Ratings will be averaged. A student who receives poor peer rating will receive a grade reduction on the project grade ranging from 50 - 200 points (a zero for the project grade overall)

Participation is important! (see also, your class syllabus)