University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2020

Jump to navigation

Individual Project

March 24 update: An example of the additional multiple choice format

It’s been brought to my attention that a sample of the additional format for the exam questions would be helpful, so here’s one you can use for reference:

MC,,1,Birds...,5,fly,walk,swim,perch,all of the above

This is a multiple choice (MC) question worth one (1) point, where the question is “Birds...”, the correct answer is the fifth one (5), and the five choices are “fly”, “walk”, “swim”, “perch”, and “all of the above”.

March 19 update: More adaptations for the COVID-19 situation

Please read the following carefully, the boxes at the top of the page (such as this one) specify changes to the original page below. Anything that has not been specifically addressed in the boxes (such as the time limits on presentations) remains the same as it is written below.

I am now ready to commit to a path forward on the Exam Questions. I am still going to require them in the HTML format originally described below, but I am also going to require them in an additional second format designed to make it easier to give the exam in an online form. The additional format must precisely follow these rules:

  1. The questions must be submitted together within a single text file. This may either be a separate file from the HTML file described below or as the contents of an HTML comment within that same HTML file.
  2. Each question must appear on a single line.
  3. That line must begin with the following sequence of six characters: MC,,1, (note that there are two commas in the middle, one at the end, and no spaces).
  4. Next on that line is the text of your question, enclosed in double quotation marks. Be sure to use straight quotation marks (not the curly ones that word processors often automatically substitute). Also, avoid the use of double quotation marks and unusual characters within the question. In general, an “unusual character” would be one that cannot be typed using either a single key or a single key with the shift key down. If you need to insert a blank into your question, use three consecutive underscore characters.
  5. There should be a comma (but no space) immediately following the closing quotation mark at the end of your question.
  6. Next on that line should be a number from 1 to 5 that indicates which of the five choices you are about to list should be considered the correct choice.
  7. That too should be followed by a comma (but no space).
  8. Next, still on the same line, list the five choices you intend to present following your question in the order you want them to appear, following each one but the last with a comma (but no space). If any of your choices use punctuation, enclose that choice (but not the comma that follows it) in a set of straight double quotation marks.
  9. Make sure there is no comma or space at the end of the line, and then move to the next line to begin the next question.

I realize that seems like a lot of detail, but that’s because it is extremely important for you to format your questions correctly if I am going to use them in the exam. In practice, it’s essentially one comma-separated line per question with some rules governing the order and punctuation of those comma-separated items.

March 17 update: Special adaptations for the COVID-19 situation

Given the unprecedented and uncertain plans for the remainder of the semester, I have changed some of the requirements for the Individual Project to allow us to avoid having to meet in-person for the next several weeks. Rather than rewrite the entire page, however, I have decided to place the requirements that have changed in this box. In short, everything not explicitly mentioned here at the top of the page will remain the same as it is described below in the original page.

Please note that this is an evolving situation, and further adjustments may be required. Any further adjustments to the project details will appear in their own dated boxes above this one, so that all of the changes always appear at the top of the page, with the latest changes topmost.

There is no reason to change anything associated with the Project Plan or Tutorial portions of the project, so everything described below still stands on those parts of the project.

I have not yet finalized my decisions on how I am going to handle the Exam Questions and may have changes to announce later in that regard. For the time being, my advice is to compose the questions as described below without worrying too much about the HTML format of them. What is most likely to change is the format in which I require them to be submitted, not the nature of the questions themselves.

The Presentation portion of the project is going to require some significant changes, however. It’s clear that we will not be able to meet as a class for at least the two weeks following break, and some students may decide to remain off-campus even longer for various reasons, I have decided that it is most prudent to simply switch all of the presentations to an online model. That way, regardless of what may happen with developments, everyone will know where they stand relative to their responsibilities for this course at least through April 16 and everyone will be playing on the same level playing field.

The best solution I see is for each student to record their presentation and share that recording with the class. Video recordings are preferred, though audio-only recordings may be allowed in special circumstances through prior negotiation with me. I do not want to turn this into an audio-video production project, however, so I’m going to leave the details largely up to each of you (much as I would have done with the in-class presentations). Of course, the criteria outlined below still apply, we’re simply changing the venue from in-class to online.

I will endeavor (to the greatest extent possible) to grade the presentations on the content and nature of the presentation, not the technical proficiency of the recording. Of course, recordings that cannot be legibly viewed and heard will not be gradable, so you should run some trials of whatever setup you plan to use beforehand to make sure all is working properly. I am not expecting any fancy post-production efforts such as on-screen titles, cut-scenes, or multiple edits; a single long take of you presenting is perfectly fine. If you would like to use PowerPoint slides and record a screencast, you might consider using Zoom. But that’s not a requirement. In fact, you may use whatever recording device you wish (phone, camera, webcam, etc.) as long as it can generate a file that others can view and hear using the freely available VLC Media Player. Whatever you decide to use, however, I highly recommend running some tests before you commit to recording your full presentation.

I’m also going to try to be as flexible as possible with the requirements for posting your recording. It needs to be somewhere on the web where the rest of the class and I can access it. But all you need to do is send me the URL to that location (and, if necessary, whatever credentials are needed to open it). As long as I can create a working link to your posted recording within the course web site, the details are up to you, even if the link simply leads to a file that needs to be downloaded and played in a local media player.

However, to make things simpler, I have asked the system administrators to create accounts for each of you on wcit.cs.unh.edu. These should be very similar to the accounts you used in IT403, so all you need to do is use your preferred FTP client to publish your file into the public_html subdirectory under your home directory. If you need a refresher on the steps in that process, you can review the IT403 Publishing Tutorial. These files will be password protected with credentials that I will eventually send out to the class via e-mail (since publishing them here would be counterproductive), making them accessible only to the people in the class (at least provided none of you share those credentials with others).

Lastly, the only change that will need to be made to the Critiques portion of the project is that the deadlines for presentation critiques will be five days from the day on which I am able to post the link to that presentation recording, much like the deadlines for tutorial critiques were already established below. Details on the online critique submission system will come out via class-wide e-mail.

My plan is to hold to the schedule as it appears on the Schedule page, with one exception. Given that these changes may require some additional preparation time, I am going to allow the three students currently scheduled to give their presentations on March 24 an extension until 11:00 AM on March 26 for their presentations only. Their tutorials and exam questions are still due by midnight on March 24.

Your presentation will be considered submitted when you send me the working URL (and any required credentials) for the publically posted recording. And the deadline for that submission is the end of class (11:00 AM) on the day your name appears under on the schedule (with the three exceptions noted previously). The deadline for the tutorial and exam questions will remain 11:59 PM on that day.

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 and 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 will assign a suitable topic 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 follow each student’s stated preferences to the greatest extent possible. You will get an opportunity to express your preferences in class on the day we form teams. You should be thinking about topics you would like to explore prior to this class meeting.

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 must be submitted by e-mail. I will make a decision on each petition individually and inform you of the results.

The topic assignments for this semester are listed in the next section.

Presentation schedule

The presentation schedule has been incorporated into the overall schedule for the semester.

Getting started

As soon as your topic is assigned to you, set about the task of identifying applicable resources. Check the library (especially the online Safari database) and search the web. I am familiar with a wide range of books on web design, so feel free to ask me for recommendations. If you decide to purchase any 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 knowledge 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.

Project plan

A week or so after the topics are assigned, a class will be set aside for meetings with the instructor.

The primary purpose of your meeting is to assess the direction in which you intend to take your project and ensure that your plans have a reasonable chance of success and will help to advance the educational goals of the class as a whole.

In preparation for this meeting, you will be required to submit your first deliverable for this project, a brief summary of your plans for the project. This single page project plan should describe how you plan to approach your topic, what you envision focusing upon for both the tutorial and the presentation, and what resources you plan to draw upon in the process.

Your project plan must be submitted via e-mail to amgilder@cs.unh.edu no less than 12 hours prior to the beginning of the class in which the meetings will take place. The date of that class can be found on the Schedule page.

Please note that during our meeting, I reserve the right to fine tune your plan to ensure maximum benefit for both you and the class. As such, you should arrive at your meeting with an open mind and a sense of flexibility.

Tutorial

Your second 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 the course web site. These tutorials will become a permanent part of the course web site, for use by future students, so be sure you approach your tutorial with the same investment of care and effort that you would invest in a major paper.

Your tutorial is due by 11:59 PM on the day of your scheduled presentation.

Tutorials may span as few or as many web pages as you feel are necessary to get the job done, but in determining how many pages you will use you should carefully consider how best to organize and compartmentalize the material you intend to present, taking into account what you are learning this semester regarding writing effectively for the web. 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 some templates. 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 HTML and CSS), 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 presenting someone else’s hard work as your own!

Given sufficient time, your classmates are just as capable of reading your source 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 at least two different mainstream browsers (Firefox, Chrome, Safari, Internet Explorer, etc.) 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.

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 interest of efficiency, I may instead choose to simply make the corrections myself before or after posting your tutorial on the web site, but when I do I will endeavor to make the minimal changes necessary to integrate your work into the course 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 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 third 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, but it should not simply be your tutorial read aloud. It is fine (though by no means required) for there to be significant overlap in the material that you choose to cover in both, but you should give careful thought to how best to convey that material in the two different media (written word and live presentation).

Your presentation is due at the beginning of class on the date for which it has been scheduled. If you arrive late to class on the day you are scheduled to present (even if you appear to be scheduled second or third in the listed order) your grade for this portion of the project may be penalized or you may not be allowed the opportunity to present at all. In general, if you are unable to present at your scheduled time (regardless of the reason), you are not guaranteed a makeup opportunity and may therefore receive a zero for that portion of your project grade. Makeup opportunities are entirely at my discretion and should be considered extremely rare allowances when they do occur. If you are allowed a makeup opportunity, it is extremely likely that your grade on this portion of the project will be reduced as a result. As such, it is very important for you to do everything within your power to be ready and able to present at your scheduled time.

Your presentation should be designed to last at least 20 minutes and no more than 25 minutes. Presentations shorter than 20 minutes or longer than 25 minutes will be penalized in the grading. If a presentation reaches the 25 minute mark, the instructor will notify the presenter and allow the presenter precisely one more minute of time to wrap things up. This ensures that one presenter will not deprive others of the time they have been allotted.

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/or 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 — or, in some classrooms, HDMI — port for connection to the projection system). I have several adapters that should allow most Mac laptops to connect to the projection system that you are welcome to use. That should provide you with a wide variety of tools for effectively presenting your material. You’ll need to decide for yourself which of these 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, HTML, etc.) at least 48 hours prior to your presentation.

Videos are allowed, but not required. If you choose to incorporate videos into your presentation, you must choose them very carefully. You should select videos that specifically illustrate a point you have made or that you feel efficiently establish essential background for a point you are about to make. The total time of all videos you use during your presentation must not exceed 4 minutes. The time spent viewing videos will be deducted from your presentation when determining if you have used the minimum time allotted, but it will be included when determining whether you have exceeded the maximum time allotted. So if you choose to use videos, be sure you incorporate them into your practice sessions and adjust your timing accordingly.

Although their use is not required, if do you use electronic materials, such as PowerPoint slides or handouts, during your presentation 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.

All of the above 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. Give some consideration to your audience’s background, and don’t waste time covering basics that they should already know. Get to the point and cover it carefully and thoroughly.

At some point in your presentation, please be sure to share your sources with the audience and offer any opinions or recommendations that you feel are appropriate.

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. In fact, 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.

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.

Your exam questions are due by 11:59 PM on the day of your scheduled presentation.

Each question should have exactly five choices 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 statement.

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)!

Submit your exam questions by sending me the HTML file as an e-mail attachment. You may include it in the .zip archive you use for submitting your tutorial or send it separately, whichever works best for you.

Critiques

Another important aspect in the life of a professional web designer is being able to give and receive constructive criticism, both with others and oneself. To this end, you will be writing several critiques assessing the individual projects presented during the semester. They need not be particularly lengthy, but they should be insightful and constructive. Your primary goal should be to help the recipient become better at the tasks you are critiquing, and this generally entails sharing your perspective both on what worked and what didn’t.

You will write a separate critique of each individual project presentation and tutorial, including your own. All critiques must be submitted to the online submission system at http://autoit.cs.unh.edu/critiques/.

To facilitate your ability to critique your own presentation, I plan (technology permitting) to record a video of each presentation in digital format and provide each student with a copy of their own recording. This should allow you to focus upon giving the presentation while in front of the class, and then reflect on your performance later as you write your self-critique.

Allowing me to make a video of your presentation is strictly voluntary. I will provide release forms before making any videos, and if you would prefer not to have your presentation recorded, refrain from returning the release form to me. You will, of course, still be responsible for critiquing your own presentation, but without a video you will need to do so from memory.

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

All of your deliverables (with the exception of your critiques) are due at midnight on the date of your presentation. This is an essential deadline, you will be penalized for submitting late, and no deliverable (with the exception of your critiques) will be accepted more than 48 hours late without prior written permission from the instructor. Deliverables submitted late will likely be penalized in the grading.

The first component of your grade on this project will be based upon your choice of how to approach your assigned topic. I will be looking for appropriate selection of material that draws upon important themes and is of utilitarian value to your peers. The assigned topics will be fairly broad, with plenty of room for you to design a treatment that suits your audience. The more you manage to do so, the more it will help your grade.

Of course, the quality and timeliness of your deliverables will factor significantly into your grade for the project.

In grading your tutorial, I will be looking at the depth of understanding you demonstrate and the effectiveness and professionalism 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, tested your links, and proofread your content before submission.

When grading your presentation, I will again be looking at the depth of your understanding and how effectively and professionally 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. You need to develop a presentation which you are comfortable giving, since your apparent comfort level will factor into your grade. Of course, I will also take into account the requirements stated above.

When grading your exam questions, I will be primarily judging the educational quality and professionalism 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.

Critiques will be graded on the basis of professionalism, insight, and the degree to which they constructively contribute to the recipient’s ability to improve.

Since the critiques will be submitted over several weeks, I will not be able to assign you a grade on your project until the last week or so of the semester. However, I will submit my own critiques of your presentation and tutorial to the online critique system as soon as I am able so you have some idea of how well you have done. Since the online critique system does not disclose the identity of the critic, I have designed the system to show my critiques with a different coloration so they are easily identifiable.

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.

If you use a word processor for the initial composition of your tutorial content, 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 an HTML document.

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

  1. Create a folder on a local drive within which you will create your tutorial. Name this folder with your Blackboard user name, using all lowercase letters. All the files for your tutorial should be stored within this folder.

    Do not use subfolders within this folder, as they will complicate things later. Simply place all of the files needed for your tutorial directly into this working folder.

  2. Get the source code from the first template file posted at http://itcourses.cs.unh.edu/assets/docs/502/design_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 HTML 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 design-template.html. This will act as the testing template from which you will derive all the pages of your tutorial. Note, however, that this template is used to create only intermediate versions of your tutorial pages for you to use for testing. Later in the process you will copy portions of the files derived from this template into files derived from a different template. Therefore, it is extremely important that you modify it only as specifically described below! Changes which are not allowed or described below may result in significant loss of points and/or your tutorial not being included as part of the course web site.

    Within this template are two HTML comments clearly indicating which portions of the file you should not alter. Keep all of your additions and alterations limited to the permitted area of the template file!

  3. Decide how many pages you will need for you tutorial and create one copy of the design-template.html file for each page, naming each one accordingly. Your first page should be named index.html and your last page should be named sources.html. You may have as many additional pages as you wish, and their files may be named whatever seems most appropriate to you.
  4. Using your preferred text editor, open and edit each page’s HTML file to compose the pages that will comprise your tutorial. Each page, except the sources.html page, must adhere to the following requirements (the sources.html page has its own requirements stated later):
    • Adhere to the HTML5 standard (with XHTML rules such as lowercase tag and attribute names, all attributes given a quoted value, all container elements given an end tag, all empty elements closed with a slash, no deprecated elements, no reserved characters, etc.);
    • Use no CSS other than that provided via the template. As long as you test your pages in a browser with a live Internet connection, you should see the page presented in accordance with the styles shared throughout the full course web site.

      The course web site, and by extension the provided template, uses the Bootstrap CSS library. If you are familiar with (or willing to invest some time learning about) this library, you are free to utilize its capabilities (within the boundaries of taste and reason) to enhance the presentation of your tutorial pages.

    • Use only GIF, PNG or JPEG images no wider that 500 pixels (actual size, not scaled with code) and no larger than 100K in file size. You should make each image element a member of the class named img-responsive (which will allow it to adapt to smaller screens, such as phones.) 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 <figcaption> element. Place both the image and the caption inside a <figure> element.

      Do not place your images in a subfolder; just place them in the same folder as your HTML files.

      Image files must be stored locally within your tutorial folder. Exceptions will be allowed only when you have received permission to use a copyright protected image and the copyright holder has explicitly directed you to use the image from their server. However, if you follow the guidance above about using only original images, copyright holder permissions should not be an issue.

      Remember that file names will be case-sensitive on the server where your tutorial will eventually be published. Since they are most likely case-insensitive in your local testing environment, it is extremely important that you visually confirm that all file names used in your URLs exactly match the names of the actual files — not just in spelling, but also in capitalization!

    • Start each page with an <h2> element indicating the title of that particular page.

      Note that this should be a title for this page, not the tutorial as a whole. The tutorial title will be inserted later in the process.

    • Use <h3>, <h4> and <h5> elements for all other headings (the <h6> element is reserved). Be sure they are used appropriately and without skipping any levels.
    • Any occurrence of an HTML tag/tag name, CSS property/value, or other language keyword 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 HTML code as HTML5. Use the W3C CSS validator at http://jigsaw.w3.org/css-validator/ to validate any CSS code as CSS Level 3. All such code samples must be enclosed with a <pre> element.

      The code you mark up in this way 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 <pre> start tag and end the last line immediately before the </pre> end tag without any intervening whitespace.

    • Use the appropriate character entities for the more professional curly quotes throughout your content (with the exception of blocks of sample code as described above).

      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.

  5. Your Sources page will need to be handled somewhat differently.
    • Start with a fresh copy of the design-template.html file and rename it sources.html.
    • Set the contents of the <h2> element for the page title to Works cited.
    • Collect the bibliographic information for each of the sources you have used in the process of preparing your tutorial, including any source you have referenced as part of the project whether you are drawing upon it directly or not.
    • For each book that is a source, create a block of code similar to the following:
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Source title</h3>
        </div>
        <div class="panel-body">
          <b>Author(s) name(s)</b><br />
          Publisher name, copyright date
        </div>
      </div>
      Inserting the title, author(s) (last name first), publisher and publication date as appropriate.
    • For each web site that is a source, create a block of code similar to the following:
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Source title</h3>
        </div>
        <div class="panel-body">
          <b>Author(s) name(s)</b><br />
          <a href="source_url">source_url</a> as of date_referenced
        </div>
      </div>
      Inserting the title, author(s) (last name first), URL of the page referenced (or homepage of the site if more than one page referenced) formatted as a clickable link to that URL, and the date on which you referenced the page.
    • If you have other forms of source material that need to be included, contact the instructor for the proper HTML format to use.
  6. Once you have created a separate HTML file (based upon the design-template.html file) for each of the pages in your presentation, you will need to configure the pagination system at the bottom of each page to allow the user to properly navigate among the pages of your tutorial.

    Note that you are only doing a preliminary step at this stage. You will need to revisit this section of each page later in the process to finalize your pages.

    Near the bottom of the editable area of each page, you will find a “framework” for the navigation system already in place. Note that it assumes (arbitrarily) that you will have five pages plus a sources page. Also, note that the URLs that appear as the values of the links’ href attributes are simply the placeholder URL #.

    You will need to edit this pagination system within each of your pages as follows:

    • Make sure it matches the number of pages your tutorial contains. Add or remove list items as necessary to make sure there are the proper number of pages reflected in the pagination system of each page. The first page should always be labeled “1” and the last page should always be labeled “Sources” (as shown in the template). Also, note that the pagination system is always bracketed with a previous link at the far left and a next link at the far right (visually indicated by left and right double arrows, or chevrons).
    • For each of the links included in the properly sized pagination system (including the previous and next links), you will need to determine which, if any, page they should indicate as their destination and set their href attributes to the appropriate URLs.

      Remember that file and folder names will be case-sensitive on the server where your tutorial will eventually be published. Since they are most likely case-insensitive in your local testing environment, it is extremely important that you visually confirm that all folder and file names used in your URLs exactly match the names of the actual folders and files — not just in spelling, but also in capitalization!

      • Some of the links may not need to lead anywhere. For example, on the first page the previous link and the page 1 link do not need to lead anywhere. Since its the first page, there is no previous page. And since it is the first page, the page 1 link should indicate that this is the current page. The template includes the proper code for this scenario. Note that the <li> element for the previous link is assigned to the disabled class to indicate that it should not be disabled and not allowed to lead anywhere. Likewise, note that the <li> element for the page 1 link is assigned to the active class to indicate that it refers to the current page and should be marked as such and disabled. On the last page (which should be your Sources page), the Sources link should be marked active, and the next link should be disabled. For pages between the first and last pages, the current page should be marked active, but none of the links around it should be disabled.
      • The nice thing about this means of handling the issue is that you can set up most of the URLs once and then copy them to all the other pages. Then, on each page, you can set correct URLs for the previous and next links (which will vary from page to page) and apply the disabled and/or active classes appropriately. When these classes are applied, the link’s href attribute is ignored.
  7. At this point in the process, you should have a complete, self-sufficient tutorial that you can work with and navigate locally without needing to publish it on a server. Take plenty of time at this stage to test and proofread your work carefully.
    • Read through each page’s content carefully as many times as necessary to convince yourself you have detected and corrected as many errors as possible.
    • Test each and every pagination link and any links to remote resources to ensure they all work as expected, that the URLs match the filenames in both spelling and case, and that you have used only the file names as relative URLs. (No paths should be necessary if you have kept all the files in your working directory without any subdirectories.)
    • Make sure that all of your images are appearing as expected, that the URLs match the filenames in both spelling and case, and that you have used only the file names as relative URLs. (No paths should be necessary if you have kept all the files in your working directory without any subdirectories.)
    • Try running your code through the W3C markup validator at http://validator.w3.org/ to validate your HTML code as HTML5. Focus your energy on errors in the code you have written. Errors in the underlying template are my responsibility.

    Once you continue to the next step of the process, you will no longer be able to test or validate your pages. Therefore, it is extremely important that you do all of your testing and validation now, before proceeding! In the steps that follow, your goal should be to copy and paste code from your tested and validated pages into the pages you will eventually submit, while making as few changes to the code as possible (thus minimimizing the chances of introducing new validation errors or removing existing requirements.)

  8. Although you should now have a functional site for your own use locally, that site will not integrate properly into the course web site. The course web site has been implemented using a templating system named Blade (which is built into a larger development framework named Laravel). Therefore, in order to properly integrate your pages into the course web site, you will need to convert your pages from standard HTML5 documents into Blade templates. Fortunately, this will not require any knowledge of Blade itself. All you will need to do is follow the instructions below precisely.
  9. Copy the source code below exactly as it appears here into a fresh text document. This will be your second template file. Save this second template under the name blade_template.blade.php into your folder with all of your existing pages.
    <?php 
        $tutorial_title = "Untitled"; 
        $tutorial_author = "Your name here";
    
        // DO NOT ALTER THE FOLLOWING LINES
        $course = Request::segment(1);
        include base_path("resources/views/") . $course . "/values.php";
        $copyright_year = "2020";
        $semester = "Spring 2020";
        $copyright_holder = $tutorial_author;    
        $tab = "Tutorials"; 
        $last_mod = date("D, F j, Y g:i A", filemtime(__FILE__));
    ?>
    
    @extends('layouts.tutorial' . $course)
    
    @section('body')
        <!-- PASTE HERE - Insert the contents of a single page of your tutorial here -->
    @stop

    The changes you will need to make to this template are very straightforward, but it is extremely important for you to pay close attention to the details while you are editing. Even a minor deviation from the requirements below can potentially render your pages useless.

  10. Using your preferred text editor, open and edit your copy of the blade_template.blade.php file. At the top of this file, you will find some PHP code. It’s not important for you to fully understand this code, since you will only be changing two things.
    • On the second line, replace the word Untitled with the title of your tutorial.
    • On the third line, replace the words Your name here with your name, first name first.

    When making these changes, be sure that you do not inadvertently alter the double-quotation marks surrounding the values that you are changing or remove the semicolon at the end of each line!

    Be sure to save your changes to the blade_template.blade.php file!

  11. Once you have edited and saved your copy of the blade_template.blade.php file, you need to make one copy of the modified blade_template.blade.php for each of the HTML files that comprise your tutorial. For each copy, give it a name similar to that of the HTML file it will eventually replace, but be sure to retain the .blade.php at the end of the file name. For instance, the copy of the template that will eventually replace index.html should be named index.blade.php and the one that will replace sources.html should be named sources.blade.php.
  12. When you have all the Blade files in place, open one of your HTML files (for example, index.html) in your preferred editor and copy the portion between the START and END comments to the clipboard. Then, open the corresponding Blade file (for example, index.blade.php), and replace the entire PASTE HERE comment by pasting the contents of the clipboard. Remember to save the modified Blade file! Effectively, you are moving the content (and only the content) of your HTML file into its corresponding Blade template. Repeat this process for each HTML file until all of your Blade files contain the content of their corresponding HTML files.

    When performing this process, be sure not to disrupt any of the lines in the Blade files that start with at signs (@). There are three such lines in the template, and all three of those must appear in the Blade files after you are done with your editing.

    Assuming your code was neatly formatted and indented in your HTML files, you should not make any changes to the formatting of the code you paste into the Blade files. If you leave things alone, the source code of the published pages should be formatted pretty much the same way it was in your original HTML files.

    Note that you will not be able to test your Blade templates locally. That’s why these instructions have been so long and detailed. If you have followed them closely, then your tutorial should integrate well with the course web site. If you have not, then I may deduct points and/or direct you to fix and resubmit them.

  13. To submit your tutorial, create an archive in ZIP format from your working folder. Name the resulting archive file with your Blackboard username and a .zip extension. E-mail this as an attachment to amgilder@cs.unh.edu before the deadline.