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:
- 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.
- Each question must appear on a single line.
- 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).
- 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.
- There should be a comma (but no space) immediately following the closing quotation mark at the end of your question.
- 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.
- That too should be followed by a comma (but no space).
- 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.
- 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.
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:
- It allows you to independently achieve significantly greater expertise with a specific topic related to web design;
- It gives you experience in sharing that expertise with others; and
- It provides everyone in the class an opportunity to experience a wide range of teaching styles as they benefit from the newfound expertise of their classmates.
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:
- You will prepare a project plan and discuss it with me early in the process to ensure that you are heading in an appropriate direction;
- You will write an online tutorial that will become a permanent part of the course web site;
- You will develop and give a presentation for the class;
- You will assess and critique both your own efforts and those of your classmates;
- You will create a set of exam questions which can be used later to test your classmates’ understanding of your tutorial and presentation; and
- You will be expected to act as your team’s “resident expert” with respect to your assigned material and demonstrate significant practical applications of that material to your team project.
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:
- I want to limit the number of students focused on a single topic to maximize the value and variety of the tutorials and presentations;
- I want to ensure a useful range of expertise in each team; and
- I want to maintain some control over the topics used and the types of material presented to the class.
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.
The presentation schedule has been incorporated into the overall schedule for the semester.
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.
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 email@example.com 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.
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.
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.
- Presentations must be professional.
- You should plan 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.
- You should be comfortable enough with your material to tolerate questions from your audience.
- You should also endeavor to engage your audience to the greatest extent possible, through the use of eye contact, gestures, questions, examples, demonstrations, exercises and similar techniques.
- You should practice 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 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.
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.
- Be sure to proofread and spell-check your questions before submitting them.
- Use validated HTML5 for your submission.
- Use a single ordered list encompassing all of your questions,
<li>element per question.
- Each question’s
<li>start tag should contain a
classattribute set equal to your Blackboard user name.
- Within each question’s
<li>element, use a single nested ordered list to present the five choices, one
<li>element per choice.
<li>start tag of the correct (and only the correct) choice should contain a
classattribute set equal to the value
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.
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/.
- Critiques of other students’ presentations should be submitted within 5 days of their presentation.
- A critique of your own presentation should be submitted within 5 days of your receipt of the video of your presentation, if one was made. If no video of your presentation was made, a critique of your own presentation should be submitted within 5 days of your presentation.
- Critiques of tutorials, including your own, should be submitted within 5 days of the tutorial’s posting on the course web site.
- Late submissions will significantly impact your grade..
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.
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.
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.
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:
- 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.
- Get the source code from the first template file posted at
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!
- Decide how many pages you will need for you tutorial and create one copy of the
design-template.htmlfile for each page, naming each one accordingly. Your first page should be named
index.htmland 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.
- 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.htmlpage, must adhere to the following requirements (the
sources.htmlpage 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
widthattributes (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
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.
<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
- 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
validate any CSS code as CSS Level 3. All such code samples must be enclosed with a
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 (
") with equivalent character entities (
", 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
The character entities to use for this purpose are
”for the double left- and right-curly quotes, respectively, and
’for the single left- and right-curly quotes, respectively.
’should also be used for apostrophes.
Be sure to use
"to encode double straight quotes within code samples.
- Your Sources page will need to be handled somewhat differently.
- Start with a fresh copy of the
design-template.htmlfile and rename it
- Set the contents of the
<h2>element for the page title to
- 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.
- Start with a fresh copy of the
- Once you have created a separate HTML file (based upon the
design-template.htmlfile) 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’
hrefattributes 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
hrefattributes 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
disabledclass 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
activeclass 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
activeclasses appropriately. When these classes are applied, the link’s
hrefattribute is ignored.
- 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
- 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.)
- 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.
- 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.phpinto 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.
- Using your preferred text editor, open and edit your copy of the
blade_template.blade.phpfile. 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
Untitledwith the title of your tutorial.
- On the third line, replace the words
Your name herewith 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
- On the second line, replace the word
- Once you have edited and saved your copy of the
blade_template.blade.phpfile, you need to make one copy of the modified
blade_template.blade.phpfor 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.phpat the end of the file name. For instance, the copy of the template that will eventually replace
index.htmlshould be named
index.blade.phpand the one that will replace
sources.htmlshould be named
- 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
ENDcomments to the clipboard. Then, open the corresponding Blade file (for example,
index.blade.php), and replace the entire
PASTE HEREcomment 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.
- 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
.zipextension. E-mail this as an attachment to firstname.lastname@example.org before the deadline.