Jump to navigation

Individual Project

Overview

Professional Web designers must be able to adapt to the constantly changing landscape of the Web and the evolving responsibilities of their positions. As such, they must be able to teach themselves and others new material and apply that material in practical ways to their job responsibilities. They must also be able to learn from others, despite a wide range of teaching styles. To those ends, the individual project is meant to serve multiple roles within the framework of this course:

You will be assigned some aspect of Web design. You will be expected to develop your own expertise in that particular area of Web design using appropriate resources, such as books, articles and/or the Web. You will then share your newfound expertise with your classmates in a variety of ways:

Topic assignment

I assign a topic that is applicable in some way to the field of Web design to each student. I choose to assign topics rather than to allow students to choose topics for several reasons:

In assigning topics to students, I try to balance several factors. I take into account each student’s background, experience and interests. But I also need to take into account the composition of each team and assign topics that are most likely to generate a productive balance of expertise. If there is a particular topic you wish to explore (and have not yet mastered), you may register your preference with me by e-mail prior to the assignment of topics. However, I make no guarantee that I will be able to satisfy your request.

If you feel there is a compelling reason why the topic you have been assigned is inappropriate for your educational needs and/or goals for the course, you may petition me in writing and within 72 hours of the announcement of topic assignments for a reassignment. That written petition must clearly explain your reason(s) for requesting a new assignment and may be submitted in hard copy or e-mail form. I will make a decision on each petition individually and inform the you of the results.

Getting started

As soon as your topic is assigned to you, set about the task of identifying applicable resources. Check the library and search the Web. I am familiar with a wide range of books on Web design, and I will often be able to suggest one or more books that discuss your assigned topic. If you decided to purchase these books for yourself, special orders at most bookstores can take days or weeks, and online booksellers may not always have the book you need in stock. If you prefer to use the library system, you may need to rely on interlibrary loans, which can take awhile to arrive. As such, the longer you wait, the greater the crisis you are likely to create for yourself.

Once you have assembled your resources, begin reading. I would recommend taking notes as you go to facilitate later completion of the other components of the project.

As you read, begin formulating ideas about how you can utilize your newfound knowlege in your team project and raise these thoughts at appropriate times with the rest of your team. Also, as you go, try to develop ideas for how you can best present your topic to the class as a whole.

Tutorial

Your first deliverable for this project will be an online tutorial to explain your assigned topic to the class (and like-minded visitors from the Web). This tutorial must be implemented in accordance with strict guidelines and submitted to me for eventual inclusion on this course Web site. These tutorials will become a permanent part of the course Web site, for use by future students and other denizens of the Web.

Tutorials may span as few or as many Web pages as you feel are necessary to get the job done. Since I want you to focus primarily on the content of your tutorial and the tutorial you produce to mesh well with those of your classmates, I have provided you with strict guidelines and an external stylesheet. While this may “cramp your style” a bit, it does have its value. Most importantly, it will give you experience with writing Web pages in accordance with externally imposed conventions; something that professional Web designers must often do. It will also ensure that there is a commonality across tutorials and allow me the flexibility to maintain them after the course ends.

The tutorial component of the project is primarily about effective written communication. You may assume that your audience has the same prerequisite knowledge required for this course (a firm grasp of XHTML and CSS basics), but you should strive to write Web-appropriate content that clearly conveys your expert knowledge to those less expert than yourself. Your tutorial should consist of both explanatory text and appropriate illustrations and/or examples. The explanatory text should be your own words and thoughts, not long quoted passages or paraphrases from other resources. The illustrations and examples should be your own original creations, not those from your sources. See my statement on integrity before you try to pass off another’s hard work as your own!

Given sufficient time, your classmates are just as capable of reading the materials as you are. Therefore, your tutorial should be an effort to give the reader something more than your various sources can. Often, this will be simply pulling it all together in a clear, concise summary, but it might also include going into greater detail, creating more illustrative descriptions or examples, and/or cutting through the maze of history and presenting current practice. The degree to which you have contributed to the ongoing discussion of your topic will be taken into consideration during grading.

All example code should be thoroughly tested in both Firefox and Internet Explorer and all content should be carefully spell-checked and proofread before your tutorial is posted. Please note that failure to follow the guidelines and/or sloppy, unprofessional writing and/or code will count against your grade. So be sure to read and follow the guidelines carefully, and proofread your content as many times as necessary.

Because the tutorials will act as your legacy to both current classmates and future sections, I want the content to be as accurate and polished as possible. Therefore, I may ask you to make corrections after determining your overall grade. In the case of minor corrections, such as typos and misspellings, I may choose to simply make the correction myself before or after posting your tutorial on this Web site.

If you have a compelling reason for not wanting your tutorial to become a permanent part of the course Web site, you may send me a written request to that effect by e-mail at any point after the project grades have been assigned. Also, I reserve the right to refuse permanent inclusion of any tutorials that I feel do not satisfy the stated requirements and/or do not advance the educational goals of the course.

Presentation

Your second deliverable for this project is to prepare and deliver a presentation on your assigned topic to the class. This presentation should be designed to complement your tutorial. During the presentation, you will have access to all the technology our classroom has to offer. This may include a computer, projection system, audio system, video system, whiteboards, and overhead projector. When available, the podium computers (Windows and Mac) have network connections and access to all the software available in the public clusters on campus. If our classroom necessitates the use of a laptop, you may bring your own (provided it has an external VGA port for connection to the projection system) or use mine. If you intend to use mine, I recommend that you convey your data files to me ahead of time (or bring them on a USB flash drive), since I typically do not have removable storage drives (such as a CD drive) installed in my machine. That should provide you with a wide variety of tools for effectively presenting your material. You’ll need to decide for yourself which of those technologies will best suit your needs.

Handouts are allowed, but not required. If you choose to distribute handouts, it is your responsibility to ensure that you bring sufficient copies for the entire class and the instructor. As an alternative, I will be happy to make your materials available to your classmates via the Web, but to do so I must have those materials in postable electronic format (PDF, Word document, PowerPoint presentation, XHTML, etc.) at least 48 hours prior to your presentation.

If you use electronic materials such as PowerPoint slides to project before the class, you must submit a digital copy of those materials to me within 12 hours after completing your presentation so that I can make them available to the class on the course Web site.

Exactly how long you have for your presentation will be determined by how many people there are in the class. These details will be announced as soon as they are known.

Presentations must be professional. That is, you should strive to fill the allotted time without exceeding it. You will be expected to arrive fully prepared and ready to begin. Your presentation should proceed fluently and without significant fumbling or delays. I strongly recommend practicing your presentation beforehand with a group of friends, classmates, or roommates. The more you practice, the better you will get the timing down and polish off the rough edges. All of these factors will be taken into account in determining your grade, with a particular emphasis on your use of the allotted time.

The presentation component of the project is primarily about effective verbal communication. The objective of your presentation should be to educate a roomful of intelligent and knowledgeable peers in a subject that will be of interest and practical value to them. Don’t waste time covering basics that your audience should already know. Get to the point and cover it carefully and thoroughly.

While you should look nice when you stand in front of your classmates, I am not imposing any sort of dress code requirements on these presentations. I do not plan to videotape them, and professional Web designers often work in informal office environments. That being said, however, it is often the case that personal appearance can set a presentation’s tone for both the presenter and the audience. So give your personal appearance a little extra thought on the day of your presentation, and make decisions based on what will help you do the best job possible communicating.

URLs for discussion

Your third deliverable is to produce a list of URLs for Web sites (or pages) that demonstrate examples of what you've presented. Ideally, you will submit at least five URLs — some demonstrating what to do and others what not to do when applying the concepts that you have presented to the class. The idea is that we can use these examples to explore the material you have presented more thoroughly as a class. I will lead the discussions, but you are responsible for identifying and submitting the URLs.

Exam questions

Part of learning to teach others is learning how to evaluate their understanding. Therefore, your fourth deliverable for this project will be a set of at least five (and no more than ten) multiple choice exam questions. These questions should be designed to test your classmates’ mastery of the material presented in your tutorial and presentation.

Each question should have exactly five answers from which to choose, one (and only one) of which is the correct answer. Your questions should be challenging, but focused upon important ideas, terms and/or concepts from your tutorial and presentation. Try to write the best, fairest questions you can. Give each question and each available choice (both correct and incorrect) some thought. You will find that writing good multiple choice questions is not easy.

Do not share or discuss your questions (or the answers!) with your classmates, since I intend to draw from your questions for the exam. Sharing or discussing your questions with other students will give them an unfair advantage on the exam, and I will therefore treat it as cheating. See my statement on integrity if you are unsure of the implications of this.

I will draw upon the entire collection of submitted exam questions (plus perhaps some of my own) when generating the exam. I will try to pick those that I feel are the best and fairest and most closely reflect the educational mission of the course. The better the questions you submit, the greater your chances of seeing them again on the actual exam. Since you presumably have a better chance of correctly answering the questions you have written yourself, there’s a potential advantage to investing significant time and effort in writing good questions (above and beyond your project grade)!

Team contributions

Keep in mind that the expertise you gain from exploring your assigned topic will factor into your work on the team project as well as the individual project. Therefore, it is important to really master the material, not to simply settle for learning only enough to produce the deliverables described above.

As a member of a team, your teammates will be counting on you to provide your share of the expertise needed to complete a high quality team project. If you cut corners on your individual project, it’s likely to have a detrimental effect on your team project grade.

Grading criteria

The first component of your grade on this project will be based upon your choice of topics. I will be looking for appropriate topic selections that draw upon major themes of the assigned books. The more central your chosen topic is to the book, the more it will help your grade.

Of course, the quality of your deliverables will contribute most significantly to your grade for the project.

In grading your tutorial, I will be looking at the depth of understanding you demonstrate and the effectiveness with which you convey that understanding to your readers. I will also be looking at the extent to which you have used appropriate illustrations and/or examples and the technical accuracy of your work. I will be particularly interested in originality and to what extent you have contributed to the ongoing discussion of your topic. And, of course, I will consider how well you have followed the specified coding guidelines and proofread your copy before submission.

When grading your presentation, I will again be looking at the depth of your understanding and how effectively you convey your knowledge to the class. I will be observing how well prepared you are and how well you use the time and tools at your disposal. That doesn’t necessarily mean that I expect you to utilize every tool in sight. But I do expect you to make intelligent choices about how to use the tools to enhance your communications. Remember that you will be expected to handle questions from me and/or your classmates at the end of your presentation. How well you handle those questions may also be factored into your grade.

When grading the URLs you have submitted, I will be judging their variety and suitability to your presentation topic. Taking the time to choose examples carefully will be beneficial.

When grading your exam questions, I will be primarily judging the educational quality of the questions and the degree to which they reflect the key ideas and concepts of the materials you have presented. I will also be looking at how well you meet the submission guidelines.

Tutorial guidelines

Because it will become part of the course Web site and persist for subsequent semesters, your tutorial must be carefully coded in strict accordance with the guidelines stated below. This will make it possible for your tutorial to coexist within the course presentation and for me to maintain it over time. Failure to follow these guidelines will have a negative impact on your grade.

Before you begin the following process, I would strongly encourage you to write (or at least outline) your tutorial as you would a paper. The creation of the online tutorial will proceed much more smoothly if you are simply copying and pasting text you have already written into the content area of each page, and you will be able to benefit from the proofreading aides you commonly rely upon for papers. However, if you use a word processor for this initial composition, be careful of the various features (such as Microsoft Word’s AutoCorrect and SmartQuote features) that may substitute non-standard text characters into your document as you type. Failure to disable these features will complicate your ability to copy and paste your work directly into a strict XHTML document.

Once you are ready to proceed, the process should go as follows:

  1. Start by creating a folder on a local drive within which you will create your tutorial. Name this folder with your cisunix user name. All the files for your tutorial should be stored within this folder or a subfolder within it.
  2. Get the source code from the template file posted at http://www.cs.unh.edu/cit/502/resource/tutorials/template/tutorial-template.html. You may do this in a variety of ways, but perhaps the simplest (and most trouble free) approach is to use your browser’s “Save Link As…” feature to save the destination of this link as an XHTML file in your tutorial folder. If you choose instead to copy and paste code from your browser’s source viewer, be sure to remove any code that browser add-ons may have added for purposes of pop-up blocking and the like before saving the file to your tutorial folder. Save this file in your tutorial folder with the name tutorial-template.html. This will act as the template from which you derive all the pages of your tutorial. This template file is, in turn, based upon a Dreamweaver template. As such, it is extremely important that you modify it only as specifically described below! Changes which are not allowed or described below may result in portions of your tutorial being deleted by Dreamweaver during regular maintenance of the course Web site. This is especially true of changes to the existing comments within the template file!
  3. Using your preferred text editor, open the template file. Scattered throughout the initial template are several fields that need to be replaced with information specific to your tutorial in order to individualize the template for your specific needs. All of these fields have been surrounded by square brackets to make them easy to locate and identify. Between the square brackets, you will find a description of what you should type in place of the field. With the file open, search for the opening square bracket character ([). For each field you find that does not begin its description with an asterisk (*), replace it with the specific value described. When replacing a field with a specific value, be sure to replace the square brackets as well as their contents.
  4. The fields whose descriptions begin with an asterisk (*) require special attention. For the moment, focus on those fields whose descriptions begin with a single asterisk. These are all related to additional sources upon which you may have relied in the creation of your tutorial. As with any academic work, you must provide a citation for any information you use which is not your own original idea or “public knowledge.” Things like XHTML tags and CSS properties (along with their technical descriptions and behaviors) can be assumed to be “public knowledge.” However, novel applications of those tags and properties qualify as ideas and should be cited if not your own. You may use as many (or as few) additional sources as you deem appropriate. However, for each one, you should replicate one of the two sourceinfo <div>s and complete its fields as indicated. One of the sourceinfo <div>s demonstrates how to cite a published book, and the other demonstrates how to cite a web source. You must have at least one sourceinfo <div> for your assigned book. You may have as many, or as few, additional sourceinfo <div>s as you need, in any combination, and you may change the introductory wording of each <div> as appropriate to your needs. If you intend to rely exclusively upon your assigned book, simply delete the second sourceinfo <div> from your template file.
  5. Save your changes to this file and your template file will now be individualized for your use. All the pages of your tutorial will be derived from this single template.
  6. You must create at least one tutorial page from this template, naming it index.html and storing it in your tutorial folder. Be sure to do Save As… to save the file under the new name while retaining your template file unchanged. Your desired content for this page must replace the field whose description begins with two asterisks (**). You have much more freedom in how you code your page content, but you must adhere to the following guidelines:
    • Adhere to the XHTML 1.0 Strict standard (lowercase tag and attribute names, all attributes given a quoted value, all container elements use an end tag, all empty elements closed with a slash, no deprecated elements, no reserved characters, etc.);
    • Use no CSS other than the external style sheet I have provided. As long as you test your pages in a browser with a live Internet connection, you should see the page presented in accordance with this style sheet. If you feel there is reason for special formatting which has not yet been accounted for in the style sheet, you may contact me to see if I can add it.
    • Use only GIF or JPEG images no wider that 500 pixels (actual size, not scaled with code) and no larger than 100K in file size. Every image must include both height and width attributes (with truthful and accurate values) and have a caption immediately following it. Place the caption inside a <div> element with a class of caption. Place both the image and the caption <div> inside another <div> element with a class of image.
    • Use <h2> elements for your headings. (The <h1> element has already been used for the title.) You may also use <h3>, <h4> and <h5> elements for subheadings (the <h6> element is reserved). However, be sure they are used appropriately and without skipping any levels.
    • Any occurrence of an XHTML tag/tag name or CSS property/value that appears inline with body text should be placed inside a <code> element.
    • Before including lengthier code samples that need to be set off from the body text, write, test and validate the code as part of a real Web page. Use the W3C markup validator at http://validator.w3.org/ to validate any XHTML code as XHTML 1.0 Strict. Use the W3C CSS validator at http://jigsaw.w3.org/css-validator/validator-uri to validate any CSS code as CSS Level 2. Code samples must be enclosed with a <div> element with a class of code. This code will be displayed in a preformatted style using a monospace font, so the whitespace you type (such as spaces, tabs, and carriage returns) will be retained. As such, avoid the use of tabs and <br /> elements within the code. Actually type the carriage returns to end each line using the Enter key and indent each line of the code sample using carefully counted spaces (not tabs). Be sure to replace all reserved characters (<, >, &, and ") with equivalent character entities (&lt;, &gt;, &amp; and &quot;, respectively). For reasons of consistency, start the first line immediately following the <div> start tag and end the last line immediately before the </div> end tag without any intervening whitespace.
    • Use the more professional curly quotes wherever appropriate within your page content. The character entities to use for this purpose are &ldquo; and &rdquo; for the double left- and right-curly quotes, respectively, and &lsquo; and &rsquo; for the single left- and right-curly quotes, respectively. &rsquo; should also be used for apostrophes. Be sure to use &quot; to encode double straight quotes within code samples.
  7. Create as many additional pages as you feel you need. Be sure they are all derived from your individualized template and that they all follow the guidelines stated above.
  8. When you have created all the pages you need for your tutorial, double check that they are all stored in your tutorial folder (along with your image files). Then go back through each page to create the local navigation. There are two separate sets of navigational links, one that comes before your page content and one that comes after. You will need to ensure that you make the necessary changes to both sets. There should be one list item in each list for each page in your tutorial. The list item that corresponds to the current page must not be a link, but should simply be the numeral corresponding to the current page’s place in the sequence. All the other list items must be links to the other pages of your tutorial. Each one should use the appropriate numeral for that page’s position in the sequence as the link’s label. The original template assumes that it will be the first of three pages to demonstrate. You should model your links on those provided in the template, but you may add or remove links as necessary.
  9. When all your pages are complete, proofread them carefully, test all links and use the W3C validator at http://validator.w3.org/ to validate each of them as XHTML 1.0 Strict. Your goal is to eliminate any errors prior to submission. Do not add a validation link to each page, but I should be able to validate all of your pages without receiving any errors (a few warnings are acceptable) if I choose to do so.
  10. To submit your tutorial, create an archive (preferably in Windows .zip format) from your tutorial folder. Name the resulting archive file with your cisunix username and an appropriate extension. You must submit this file to me at least 24 hours before your scheduled presentation time to allow me time to add it to the course Web site prior to your presentation. The ideal submission method would be as an e-mail attachment. However, I am willing to consider alternate submission methods if you contact me far enough ahead of your deadline.