Final Project Summary
We are on the home stretch now for the final project. Here is a summary of the components of the project that make up the entire final project, and the points associated with them for your grade. Some of these you have already completed, but this is the overview:
Final Project Components
| Assignment | Description | Points | Due |
|---|---|---|---|
| 10 | Project Proposal | 5 | Dec 14 |
| 12 | Content Inventory | 5 | Jan 7 |
| 13 | Interactive Architecture | 5 | Jan 7 |
| 14 | Content Research | 5 | Jan 14 |
| 15 | Portfolio Folder | 5 | Jan 14 |
| 16 | Website Prototype | 5 | Jan 20 |
| 17 | Final Website | 25 | Jan 24 |
| 18 | Presentation | 5 | Jan 26 |
| TOTAL | 60 |
And to remind you of how this fits in to your overall grade, here is a summary chart for the whole semester:
click for a larger version
Assignment 18
For the final exam, each team will make a brief presentation of their project to the class. You should demonstrate the site, show its features, explain your design, and give a short tour of the site’s pages.
DUE: Period 3 — Tuesday, January 25 in class final.
DUE: Period 1 — Wednesday, January 26 in class final.
Assignment 17
This is it. The final version of your site should be ready online, with all the content on each page finished. It’s worth the largest portion of your final grade of any single assignment, about 16%.
Remember, that if you are working in a team, I expect that the final project should reflect the size of the team. In other words, a three person team should have a site that is nearly three times as complex and developed as that of a single person team.
Here is the rubric I’ll use for evaluating it:
- 25%: Content — The purpose of the site: information, entertainment, business, government, etc. Is what is on the site appropriate, relevant, useful, accurate, informative, etc.?
- 25%: Organization — How the content of the site is structured and presented. Is it easy to find the information, is it arranged in a useful manner, etc?
- 25%: Navigation –How you find your way around inside the site. Are the menus well-structured and consistent? Are other navigation elements easy to use?
- 25%: Design — The visual style of the site. Is the visual theme (or voice) of the site appropriate for the audience? Are the pages pleasing to look at? Are the layouts, color schemes, fonts, and other visual elements a good match for the content?
This is a subset of the general rubric we developed early in the semester, since that one included some things that don’t apply to your sites, like speed and security.
You can earn extra credit on this project for incorporating so-called “rich media” in your website. By rich media, I mean scanned images or digital media (sound, photos or video) that you generate, not media that you find on the internet. This must be done in a way that supports your other content, not just something slapped gratuitously on the site!
- Max 15% Extra Credit: Rich Media — Incorporating original digital media in an appropriate way that enhances other content.
DUE: Monday, January 24 online in class.
Assignment 16
This assignment is just an intermediate step in your final project website.
The prototype of a website is simply the skeleton of the site — all pages and menus and navigation implemented, but not necessarily with any content filled in on each page.
This is a good way to start translating your site’s interactive architecture and content research into reality. You should construct all the pages of your site in Edublogs (or WordPress, if that is what you are using), link them up to each other hierarchically, make sure the menus reflect your navigation scheme, etc.
You do not have to have any content on each page for this assignment, but it is fine if you do. I simply want to check your progress against your design plans.
DUE: Thursday, January 20 online in class.
Assignment 15
This assignment is very simple.
As you know, an important aspect of the web design process is the project planning and documentation you prepare prior to implementing the actual website. I want you to have a record of your entire project’s work, including all of this documentation.
To do that, each team will assemble a Project Portfolio Folder, which will include printed copies of all of the documents you create for your project.
So far, this includes the following:
- Project Proposal
- Content Inventory
- Interactive Architecture
- Content Research
Print out copies of each of these and create a folder with them for your project in the storage box in class. There is an example, of my RHS Software Club project, in there for you to follow.
DUE: Friday, January 14 on paper in class.
Assignment 14
Now that you have a tentative design for your site, you need to assemble all of the content for it. To help you organize and plan this effort, which can be quite large depending on the scope of your project, you need an organizing tool.
For this, you will generate a Content Research Report, a list of things you need to know, where you will find the information, and the actual results. This is an informal list that you will use to keep track of your work in progress.
You start by analyzing your interactive architecture and listing all of the information you will need to display on each page. For each item, identify where you will find the information, and then add the actual information to the list once you research it.
I made a template you can use, with some examples that you can replace with your own information.
Download it and modify for your project: Content Research Report. Print it out and turn that in.
DUE: Friday, January 14 on paper in class.
Assignment 13
The next step of the final project, after you have a bunch of ideas assembled for the possible content, is to organize those ideas into a site design. For this, of course, the first step is to create an interactive architecture diagram, as you have done for previous projects and assignments..
You can easily do this in Word, using the “Smart Art” feature to make a “Hierarchy” chart. I have made a sample IA diagram that you can use as a template for your project. Download it and modify for your project: Final Project IA. Print it out and turn that in.
DUE: Monday, January 10 on paper in class.
Assignment 12
The purpose of this assignment is for you to get started in a “brainstorming way” on building your final project site.
To do this, spend 15 minutes with your team and write down all the ideas you have for what should be contained in your website. This doesn’t have to be organized according to pages, but is just a quick list of every idea you can think of. Some of them may not make it into the final design, and there may be others that come up later.
The idea is to just get a lot of concepts down on paper as a way to start the design process. Type them up, using this Final Project Content Inventory template document, then print it out and hand it in for me to look at.
DUE: Thursday, January 6 on paper in class.
Assignment 11
The purpose of this assignment is for you to practice using Word Press with Edublogs.
You are to develop a simple prototype of a website for the RHS Student Store, which does not currently exist. Use your Edublogs account to do this. Replace all the current content there with your new content for the store site.
Your site should have the following content:
- Pages
- Gear: a page that lists all of the items of Rough Rider gear for sale in the store:
- See the printed flyer I gave out in class for the list.
- Snacks: a page that lists the snacks for sale in the store:
- Baked! Chips — $0.75
- Pop Chips — $1.00
- Otis Spunkmeyer Cookies — $ ???
- Nature Valley Oats & Honey Bars — $0.75
- Planters Peanuts — $0.40
- Rice Crispy Treat — $0.40
- Apple Juice — $0.75
- Orange Juice — $0.75
- Bottled Water — $0.50
- Fresh Smoothie — $2.00
- Schedule: a page that shows the hours of operation of the store:
- 1st Lunch
- 2nd Lunch
- Deliveries to 4th Period Class
- Gear: a page that lists all of the items of Rough Rider gear for sale in the store:
- Posts
- “Sweatshirts Now In!”: a blog post that advertises the current promotion in the store
Here is the interactive architecture chart for this site:
The Home page should simply display the blog posts, as is the default for WordPress.
Any other ideas you have for a store site can be added also. Look on the web to see what other high school student stores might have!
You may work in teams, but each person must implement this on his/her own site.
This assignment will be graded according to this Student Store Rubric. You can download and print a copy of it for a checklist of what you need to implement. Notice that there are lots of opportunities for extra credit on this assignment; see the second page of the rubric for details.
If you need help in visualizing what your site should look like on your WordPress account, I have made a sample site on my account that satisfies this rubric (and includes some of the extra credit points). You can look at that site here: rooseveltcs.edublogs.org.
DUE: Tuesday, January 4 on your Edublogs site.
Assignment 10
This assignment is the first step of the final project for the course.
Your task is to form a team to work on the project, settle on a topic for the site that you will design and implement, and write an initial proposal explaining all of this.
Download the proposal template from this document — Final Project Proposal — and modify it with your team’s project information. Follow the instructions in that template.
DUE: Tuesday, December 14 on paper in class.
Assignment 9
This assignment is for a real website. The client is you, me, and all of your classmates!
I would like a website that can serve as a showcase and portfolio for all of your work in this course. You will design and implement one, and I will actually use the site that someone (or perhaps a group of you) makes.
I thought of this when I was grading your recent assignments and wanted you to be able to easily see each other’s work, so you can learn from each other. I started to design and implement a portfolio site, but then I realized that all of you are quite capable now of desinging and making such a site.
So, your new assignment is to design a class portfolio site.
This assignment will allow you to further practice what you have learned in the recent assignments and apply that knowledge and skills to a very practical application. This assignment will require you to exercise a little more of your own concept development skills than previous exercises. This is one more step along the way to your final project.
In doing this assignment, you will:
- develop a design concept for the portfolio site
- prepare design documentation for it (interactive architecture and wireframe diagrams)
- implement the site in HTML
- style it with CSS
Now, what does the site have to do?
The simple requirement is to design a site that allows the user to view all project assignments that each student in the class has implemented. So, for your class (Period 1 or Period 3), when I go to the site, I should be able to click on links that allow me to see each assignment that each student has done in that class. You don’t have to worry about making the actual links; I will do that. You just have to design the look and develop the code for the portfolio viewer.
I’m imagining a table of some kind, with student names going down and assignments going across. In each cell of the table would be a link to that student’s site for the assignment. Something like this perhaps:
| Name | Club Flyer | Club Site | Assign 9 | etc. |
|---|---|---|---|---|
| John | My Club Flyer | My Club Site | link | |
| Mary | Another Flyer | A Club | link | |
| etc. |
Then I could fill in the link for each person’s project for each assignment once I have collected it and installed it on a server.
Of course, this is only one idea. You are free to go crazy and come up with your own design. And mine has no styling, but yours must. It has to look good as well as work well. You might call for thumbnail images in each cell, for instance, in addition to the text link. And you might want to spread the portfolio out over multiple pages. These are choices you must make. You are the web designer!
In this assignment, as in the last one, I want to see a design document for the site as well as the implementation. You should be able to reuse a lot of your code from earlier assignments. For example, your personal information page had a table in it. And your club site had multiple pages and external style sheets. You should use all of those techniques in this project as well. Copy and paste from your earlier work!
Here are some files for your work:
- Design document template: download this Class Portfolio Site Design Document for a Word document template that you can use for your design documentation
- Content inventory: download Assignment 9 Site Info for a list of all student names and assignments to put in the portfolio viewer site
- Sample HTML and CSS code files: download some example HTML and CSS code for this from our server at this location: W:Collaborate\Staff_Student\ahdavidson\Read_Only\Web Design\Assign 9 Info\ [Note that this is not a clickable link; start from My Computer] In this folder, you will find:
- index.html: a sample home page with a table in it for all students and assignments
- styles.css: a sample set of CSS rules for a basic table styling
If you need help getting started on developing this site, you can download these two files and modify them for your design. If you do use these, you should conisder them only a starting point, and you SHOULD customize your site design using these as a template.
All files for the assignment must be in a separate folder named “Assignment 9 + your name.” You will submit the entire folder as a single compressed zip file, as usual, in the Course Dropbox when completed.
I will choose one or two solutions (perhaps a hybrid!) from each class and actually use it on our server to showcase all of your work.
The grade for this assignment will be determined as follows:
- 25%: design documentation (Interactive architecture + wireframe layouts)
- 25%: site implementation (does the site meet the requirements above?)
- 25%: site design (is the site easy to understand and use?)
- 25%: correctness of the HTML and CSS code itself (are the tags in the right place, is the code clearly organized?)
DUE: Friday, December 3 in the course dropbox.
Assignment 8
In this assignment, you will expand your knowledge of HTML and CSS to create a small, multipage website with a navigation bar.
In doing this assignment, you will:
- prepare design documentation for a site
- learn to create links to other pages in a site
- learn to create links to locations within a page
- learn to create a navigation bar for a site
- learn to style a navigation bar with CSS
- learn to use an external style sheet for a site’s CSS
You are to generate a simple site for an imaginary (or real) club at Roosevelt. You are free to choose your own club if you like and develop the content for it yourself. Or, if you prefer, you can continue with the imaginary Roosevelt Software Club, for which you created the flyer web page in the last assignment.
In either case, here are the requirements:
- the site will have three pages: Home, Calendar, and Gallery
- the site will have a functioning navigation bar to switch among the pages
- the Home page will contain:
- Club name as title
- Club description (one paragraph)
- Advisors & officers (list of names)
- Information about regular meeting schedule
- One illustrative image or photo
- the Calendar page will contain:
- List of all meeting dates during the year, with the meeting topic for each session
- (Optional) create a Google calendar for the club meetings and embed it on the page
- the Gallery page will contain:
- At least three images, with captions, that relate to the club’s activities
- (Optional) create a slide show on Flickr, Picasa, Tumblr, or any eternal photo sharing service and embed it on the page
Part of this assignment is also to prepare design documentation of the site you are making. (I realize that this site is fairly simple and would not normally require such documentation, but the purpose is to practice the design process so that when you tackle a larger project, you will know how to do it.)
The design documentation consists of an interactive architecture (IA) diagram and wireframe diagrams for each page, as you did for Assignment 4 (the cheese.com site). Since the IA is already specified, I will give you that part. You will have to design each page, and create a simple wireframe layout for it. You can download a template for the documentation from this link: MyClub Website Design Document Template. For the wireframe layouts, you can either do it in Word and then print it out, or just print it and draw them by hand.
Then you can proceed to the actual implementation of the site. For a skeleton of the site, you can download the demo I prepared and showed in class from this link: MyClub. This download is a compressed zip file, like the ones you have prepared for submitting assignments. To use it, you will have to download it, and then uncompress the folder and save it in your account. Then you can modify those files to build your own site.
All files for the assignment must be in a separate folder named “Assignment 8 .” You will submit the entire folder as a single compressed zip file in the Course Dropbox when completed.
The grade for this assignment will be determined as follows:
- 25%: design documentation (3 wireframe layouts)
- 25%: site implementation (does the site meet the requirements above?)
- 25%: site design (does the site communicate the club’s message effectively?)
- 25%: correctness of the HTML and CSS code itself (are the tags in the right place, is the code clearly organized?)
DUE: Wednesday, November 10 in the course dropbox.
Assignment 7
This is a quick assignment, worth only half of the usual points for an assignment. You just need to read the post and an article on the course blog about “Car Hacking,” then go over to the Lab 319 blog and post a comment with at least one substantive question about what you’ve read.
We’ll use your questions in the discussion with Ms. Roesner during the demo on Tuesday.
DUE: Monday, October 25 in a comment on the Lab 319 blog post about “Car Hacking.”
Assignment 6
For this assignment, you have a choice of tasks. Some of you have more experience with HTML and CSS than others, so I am giving you two options. You can choose either one, depending on how comfortable you are with CSS.
click to see a larger version
This is a sample flyer I created for an imaginary new club at Roosevelt. (It was made in Word. OK, I lied; I made it on a Mac with Apple’s Pages app, but it could have been done in Word.) Your job is to create a web page that duplicates this flyer as closely as you can.
If you know CSS already (I know who you are) or want to practice with it to get better, use it. If you don’t feel ready for that yet, then just use the basic HTML you used on the last assignment. I will make some smaller CSS samples and exercises for you to work on to build up your knowledge.
In either case, make a single XHTML file with the code to display this flyer on a web page. You can get the two images on the flyer from here and here.
Here are the grading criteria for this assignment:
Content Results
For this section, I’ll use the Rough Rider Rubric that you developed in class for our sites earlier this year.
- 10%: Is all the required content from the flyer present on your site page?
- 10%: Is the page organized visually as specified in the flyer?
- 10%: Is the site navigation clear and intuitive? [N/A, automatic points]
- 10%: Is the visual style of the site pleasing (font choices, proportions, etc.)?
- 10%: Is the site load speed fast enough? [N/A, automatic points]
- 10%: Is the site secure and virus-free? [N/A, automatic points]
Code Implementation
For this section, the correctness and formatting of your HTML/CSS code is evaluated.
- 10%: Are all the required HTML elements present and properly structured (HEAD, TITLE, BODY, STYLE, paired tags, etc.)?
- 10%: Is the code formatted nicely so that it is easily readable (indentation, blank lines, clear names, etc.)?
- 10%: Did you make good use of the basic HTML tags (headings, rules, paragraphs, images, lists, etc.)?
- 10%: Did you make good use of CSS stylesto control the appearance of the page?
Don’t worry too much about all of this, since the entire assignment is worth the same number of points as any other assignment in the course.
DUE: Monday, October 25 in the course dropbox.
Assignment 5
click to see a larger version
This assignment is for you to create your first complete web page using XHTML.
You are to generate a simple personal page that has information about you and your schedule and activities at Roosevelt. A sample result can be seen at the left. Your task is to generate a similar page with YOUR information on it instead of mine, but using the same format.
Here are some requirements:
- Page (window) title: Your name (use <head><title> </title></head> tags)
- Your name: Heading level 2 (use <h2> </h2> tags)
- Line separators: Horizontal rule (use <hr /> tags)
- School name: Heading level 3 (use <h3> </h3> tags)
- School address and phone: No heading, plain text
- Email address: Text with italics (use <em> </em> tags)
- Schedule: Table with 4 columns, 1 header row, and 6 regular rows
- Activities: Bullet list (use <ul> </ul> and <li> </li> tags)
Copy the basic HTML template from the sample on this page into a new document in Notepad and then add your HTML code in between the <body> and </body> tags.
Look at the Resources page on this site for a cheat sheet and other references for HTML code and tags.
If you already know how to do most of this in XHTML, I expect you to be more adventurous in your design and content. Add an image to the page and a link to rhs.seattleschools.org on the “Roosevelt High School” line.
For this assignment, 50% of the grade will be an evaluation of the results (does the page look like the sample?), and 50% will be on the quality and correctness of the HTML code itself (are the tags in the right place, is the code clearly organized?).
click to see a larger version
For the assignment, create a folder named “Assignment 5” in your “Web Design” folder in “My Documents.” Save your HTML code in a file named “index.html” and put that file and any other files you use (such as pictures) in the “Assignment 6” folder. Then submit the entire “Assignment 6” folder as a single compressed file in the Course Dropbox.
Instructions for how to do that can be found by clicking on the document at the left.
DUE: Monday, October 11 in the course dropbox.
Exercise
Finally, you get to do some HTML and make your first web page.
We will talk about the basics of HTML (actually, we’ll be using XHTML, a newer version of this “code”). Then you will follow a few simple exercises to make your first web page.
For this exercise, you’ll use the information and examples on a course curriculum developed at the UW. You can go to this link, and begin following those instructions. Do the exercises using Notepad on your computer and save the files you create in your “Portfolio” folder in your “My Documents” area.
This exercise will not be graded. It is to help you get started as a web designer and practice the basics of making pages using XHTML.
Assignment 4
This assignment is for you to get some practice understanding two aspects of a website: the structure and the layout.
The structure of a site is also known as its “information architecture.” It can be represented in many ways, but one of the simplest is a sketch with boxes representing pages on the site. Lines connecting the boxes show the navigation paths between pages.
click to see a larger version
This is an example of one, for this site (as of September 26, 2010).
Part 1 of your assignment is to analyze the structure of our favorite test site, cheese.com, and make an information architecture sketch that represents that site’s structure.
The other aspect of a website is its layout, or visual appearance.
This is connected to the site structure, in that it is the visual scheme that is used to represent the content, but should be independent of it. This is so that a new visual design can be applied to a site without having to change its structure.
A common way to represent the layout of a site is a sketch called a “wireframe diagram” that depicts schematically (in rough proportions) how a screen is composed.
click to see a larger version
This is an example of one, for this site (as of September 26, 2010).
Part 2 of your assignment is to analyze the layout of our favorite test site, cheese.com, and make a wireframe diagram that represents that site’s layout.
DUE: Thursday, September 30 on paper at the end of class.
Assignment 3
We have been exploring different roles and client possibilities for your web design project in recent class sessions. I have set up a separate blog site for our class discussions at lab319.wordpress.com. I have posted two articles there for our class.
The first one is on “Project Roles,” the different kinds of skills necessary in a good web design team. Please go there, find that post and read the information in it. Then post a comment indicating your #1, #2, and #3 choice of roles: technical, marketing, or design. Explain why these choices interest you.
The second one is on “Project Clients,” with some different possible project ideas for you to pursue. Please go there, find that post and read the information in it. Then post a comment describing some of the ideas your group came up with in your brainstorming session. Explain why these choices interest you.
You must post comments on both topics for full credit on this assignment.
Be sure to use your name in your comments so I know who has authored the comment.
DUE: Monday, September 27 on that blog site.
Assignment 2
For this assignment, you will be evaluating the site www.cheese.com according to the rubric you developed in class.
- Download the large list of criteria that we voted on here.
- Download the rubric worksheet here.
- Download the summary report about the Rough Rider Rubric here.
- Download the final Rough Rider Rubric here.
- Download the final assignment here.
Complete and submit the final assignment form. Be sure to include your name or RHS account in the name of the document so I can tell whose it is.
DUE: Thursday, September 23 in the Course Dropbox.
Assignment 1
For this assignment, you and your parent or guardian should discuss the letter I gave you with the course syllabus. You and your parent or guardian should sign it, indicating you understand and agree to the course policies, and then return it to me. You can download a copy of the letter to print out here.
DUE : Monday, September 13 in class.
RooseveltCS.org 