Page 40

WEBSITE

Website Production

! All websites must be original productions constructed using the NHD web site editor (Weebly). You may use professional photographs, graphics, video, recorded music, etc. within the site. Such items must be integrated into the web site, and proper credit must be given within the site as well as in the annotated list of works consulted. The student must operate all software and equipment in the development of the web site.

NOTE: Using objects created by others specifically for use in your website violates this rule. However, using graphics, multimedia clips, etc. which already exist is acceptable.

Size Requirements

! Websites may contain between 1,000 – 1,200 visible, student-composed words. HTML code used to build the site, and alternate text tags on images do not count toward the word limit. The word limit does not include words found in materials used for illustration such as documents, artifacts or graphs not created by the student, or quotations from primary sources such as oral history interviews, letters, or diaries, photos of artifacts with writing, or other illustrative materials such as reoccurring menus, titles and navigation instructions that are used as an integral part of the web site.

! Brief text crediting the sources of illustrations or quotations included on the web site do not count toward the 1,000 – 1,200-word requirement. The entire site, including all multimedia, may use up to 100MB of file space.

Navigation

! One page of the web site must serve as the “home page.” The home page must include the name of the creator, entry title, and a main menu that directs viewers to the various sections of the site. All pages must be interconnected with hypertext links. Automatic redirects are not permitted.

! Buttons – When labeling the navigation buttons, use simple wording.

o Instead of “How Society Changed”, use “Societal Change” or “Change”.

o Instead of “About the Interstate Highway System”, use “Background”.

Multimedia

! Each multimedia clip may not last more than 45 seconds and may not include student composed narration. There is no limit to the number of multimedia clips other than the file size limit. Voiceover of material not composed by students is allowed.

o If an entry uses any form of multimedia requiring a plug-in (for example, Flash, QuickTime or Real Player), you must provide on the same page a link to an Internet site where the plug-in is available as a free, secure, and legal download. Every effort to view all multimedia content will be made, but files that cannot be viewed cannot be evaluated as part of the website.

! All multimedia must be captioned.

! If an object on the webpage does something special (such as, clicking the photograph enlarges it), be sure to use a caption that indicates the viewer should click the photo. Sometimes it will be obvious that action is needed, such as a YouTube video insert.

! Video clips are limited to Primary Sources unless specifically approved by Mr. Bobak.

! Place audio clips used as background music for a page at the bottom of the page; place other audio clips you wish the viewer to access as they interact with the page where it would be appropriate.

Page 41

Process Paper

! The process paper must appear as a separate page on the website. You may use the document insertion tool on Weebly or paste it on a page (however, you must use the proper line spacing and hanging indent requirements – thus the insertion tool is much easier to use).

! Do not include the MLA heading or your name on the on-line version of your process paper.

Bibliographic Sources

! The annotated list of works consulted must be included as an integrated part of the web site. It should be included in the navigational structure and does NOT count toward the 1000-1,200-word requirement.

Content

! Due to the 1000-1200 word requirement, selection of the correct content is critical to adequately convey your research.

o Eliminate wordiness: the time of day when the sun moves up the sky = morning

" Another example: Johnson was born in 1967. He went to Vanderbuilt University. = > Born in 1967, Robinson attended Vanderbuilt University. (10 words vs. 7 words)

! Think about chunking the information and separating it into multiple pages. You might start with (1) introduction (2) the background (3) the event (4) the outcome (5) the effects (6) the works consulted (7) the process paper. You can then create sub-pages within any of these pages that break down the content further. For example, you might want to create sub-pages for “the event” that include (a) day one and (b) day two of the trial. You can create as many pages as you wish.

! Avoid lengthy blocks of text.

! Be sure to use a writing “voice” that is appropriate for a website.

! Statistical data is very helpful in proving your argument; be sure to include graphs if available.

! Every page should contain topic appropriate images.

Website Templates

! Select a template that doesn’t require you to use a specific minimum amount of space (such as the “scroll” template) because if you don’t use all the space, it will appear as though you don’t have much information.

Formatting Pages

! Make sure the text is properly aligned on each webpage and in the works consulted.

! End each page with a “launch pad” to the next logical page/topic.

! Don’t create pages that go on endlessly; create subpages for collections like multiple letters, newspaper headlines, or propaganda posters

Stable Content

! The content and appearance of a page cannot change when the page is refreshed in the browser. Random text or image generators are not allowed.

Viewing Files

! The pages that comprise the site must be viewable in a recent version of a standard web browser (i.e. Microsoft Internet Explorer, Firefox, or Safari). Students are responsible for ensuring that the entry is viewable in multiple web browsers. Entries may not link to live or external sites, except to direct viewers to plug-ins.

Page 42

Do’s and Don’ts

Title is important— Do make it the center of attention on the Home Page. Don’t make your name & category so prominent—Do try putting your name & category at the bottom of the Home Page in smaller font than the title. Besides being historically accurate, the web site must be visually appealing. Don’t leave large unfilled sections on the web page. Do use appropriate background cover, pictures, font, etc. Do make sure the web pages are “balanced” by placing text and graphics around the entire page — not just on the left side! Do use large, easily readable font and clear, unpixelated graphics. “Script” and other fancy fonts may be suitable for Titles, but are often difficult to read in the text body. Avoid flashing or moving text in History Day web sites. Do include your historical thesis early towards the beginning of your web site, but Don’t “label” it as Thesis. Avoid “next Page, “previous page”, etc. that requires users to follow a set path. Do use primary sources to illustrate the ideas about which you are writing.

Page 43

WEBSITES General

• You MUST use the NHD site on Weebly.com: http://nhd.weebly.com. Sites created at www.weebly.com cannot be transferred and will not be accepted.

• When you create your account, use your school email address o Student computer login + @students.ottawahillsschools.org

• You must use a password to log-in to your website; you may choose this password.

• You must also set a password to block the public from viewing your live website. This is done on the settings page of the website builder.

o Use the following site password to block the public: bobak

o • You must provide Mr. Bobak with your unique URL after creating your account.

o This is what your unique URL will look like (the bold part is unique): http://17427217.nhd.weebly.com

• If you need help with the nhd.weebly site, there is a help feature; you may also email the help desk if that fails to provide an answer: info@nhd.org (but don’t wait to the last minute!)

• Decide which template, if any, you would like to use for your site.

• Maintain a simple and consistent layout throughout the site.

• Think of the pages you need to have and organize them logically, by importance and by topic.

• To make your text easy to read, break it into smaller sections, using subheadings and appropriate spacing to separate each the sections.

o The use of bold or different sized font in the headings can show the hierarchy and importance of the topics.

o You can also use a different color to highlight keywords (much like a textbook)

• Avoid filling the homepage with too much information; instead, provide only crucial information and links to other sections here.

• Be sure that you have avoided plagiarism and observed all copyright laws.

Don’t forget to hit SAVE; you may have to scroll down to find it.

Page 44

• Be sure to publish your website, by clicking the “PUBLISH” button after making any changes.

o • Test your website.

o (Consistently go to the live version so you can see how it looks and works in real-time.)

• Go for simple, professional design

• After the project is over, you will have the option to transfer your website to the regular Weebly site for preservation; I believe you can also download the HTML to save it for later or place it on your personal website.

Images

! Choose high quality images for your website; check the resolution listed on the image file (if that is not available, zoom in on the image to see if it pixilated.)

! Do not use images that have a watermark over them; these are images the owner does not want used for other purposes than those he intended; also, it doesn’t look very good.

Uniqueness ! Include multimedia elements such as animated maps, timelines, short video and/or audio clips.

! Have analysis with each to give context. Color

! Dark colors, patterned backgrounds, and photographs are often problematic and difficult to read.

Page 45

Fonts The following are web safe fonts: -

Times New Roman on the Windows or Times on the Apple Mac has a serif typeface and is available on virtually all computers.

Arial is a sans-serif font and is available on all Windows machines or Helvetica which is a very similar font available on the Apple Mac.

Verdana is a sans-serif font that is easy to read. This font comes with Internet Explorer 4+ for Windows and Apple Mac machines. In case the web site user does not have the font installed on their computer you have chosen for a page it is best to specify several fonts all in the same typeface to keep your design as near as possible to the way you designed it.

Website Map Example

Page 46

Usability, Not clutter Usability is all about making the visitor’s experience a good one on your site. Things should be easy to read, easy to access and most importantly, easy to understand. When a visitor visits your site, they should know exactly what your site is about within the first couple seconds. This is obviously where design, and layout come into play. You need to avoid cluttering your site in the physical sense. I’m not talking about having “too much content”, but rather how you choose to display that content. Things should be laid out with spacing and margins.

Text Do's and Dont's

One of the really big fads that was prevalent in the early part of this decade, was the use of small fonts. Never go below 11pt font - and even 11pt should only be used sparingly. Size 14pt seems most ideal for paragraph’s of text. You can get away with 12pt of course, but as screen resolutions are increasing, 12pt suddenly becomes smaller.

Line-height is very important. Line-height is the spacing between each line of text in your paragraphs. Standard line-height I find is a tad bit too thin, and I like to expand it a little more. It makes it easier for people to read.

Colors and Contrast The color theme of a site is obviously important. A lot of aspiring designers have a tenancy to use too many colors, simply because they’re there. But I like using no more than 2 primary colors and a third “secondary” color that I will use sparingly throughout the design. A simple color theme is easier on the eyes, easier to “comprehend” and overall just looks better. Of course there are exceptions to this, but 9 times out of 10, it’s always better to keep the color theme simple.

The color theme also needs to connect with the visitors and the purpose of the site. For example, I wouldn’t use blue and florescent green/yellow for a site about health - it simply doesn’t make sense and I think that’s a given.

Contrast is hugely important. It’s very important that your content and navigation are correctly contrasted. The foreground text needs to either be very dark, or very light in comparison with the background color. I see a lot of sites where the text will be a light gray and the background is white - err! That’s very annoying and hard to read.

Design around the purpose of the site A lot of designers, those experienced and not, always use the same “formula” for layout and design elements. To really make an impressive and effective site, you need to fully understand what the purpose of the site is, and what the goals are.

Learn by example A common mistake for the aspiring designer is thinking they should be able to open up a web-design program, and design a great looking site on their first try. Nope, doesn’t happen like that. You wouldn’t pick up a guitar and start writing music without first learning a few songs right? Right, and it should be no different for web design. I recommend that beginners simply try to recreate existing designs that they think look good. If you do this a few times, it will (1) help you learn the application, (2) help you become a better designer. You subconsciously learn when you recreate an existing design. You automatically pick up design sense when you do this, and it really helps and goes a long way when it comes down to designing your own sites.

Sources: garysimon.net/webdesign_tutorial/1 rohan.sdsu.edu/~bats/PDF/Students/WWW/CreatingaWebsite.pdf webmastercourse.com/ webwizguide.com/kb/website_design/fonts.asp wikihow.com/Design-a-Website

Page 47

Website Draft Plan Name ____________________________ Topic ______________________________________________________________________________ Thesis _____________________________________________________________________________ Title of website _______________________________________________________________________ Website URL: http://__________________________.nhd.weebly.com Site Password: bobak Background colors: ___________________________________________________________________ Text colors: _________________________________________________________________________

Video clips you expect to include: _______________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

Music clips you expect to include: _______________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

Complete the website map and the website page designs (print/copy as needed so all pages are represented).

Example:

Attach the website map and page designs to this cover sheet.

*Electronic copies are available for download from Mr. Bobak’s NHD website.

Kennedy’s Kiddie Korps: Diplomacy by the Best and Brightest

Home Creation of the Peace Corps

Cultural Diplomacy

Criticism & Debate

Process Paper & Works Cited

Legacy

JFK Inaugural Quote

Peace Corps Vid Clip from NBC

Thesis Statement

Entry Info

The Ugly American

Kennedy Proposal

Schrivering the Peace Corps

Administration Reactions

Media Responses

Case Study: Ghana

Volunteer Memories

New Imperialism?

A Numbers Game?

Dropped Postcard

Successes

Failures

Consequences

50th Anniversary Video Clip

Process Paper

Annotated List of Works Cited

Best and Brightest

Toughtest Job…

Training

Volunteers against Communism

Impact of Decolonization

Page 48

Website Map * You may replicate this diagram or create your own to demonstrate your website design. Be sure to include ALL the pages your website will contain. Type your name here Type your topic here Type your thesis statement here

Page 49

Website Page Designs This template is downloadable from Mr. Bobak’s website Utilize the following design boxes to plan out your web pages. Draw a layout and label what type of information and multimedia you will use on each page. * You may replicate this diagram or create your own to demonstrate your website design.

Title Title

Title Title

Page 50

WEBSITE EVALUATION CRITERIA

Historical Quality Website information is historically accurate & complete (not lacking) 10 9 8 6.5 0

Website shows analysis and interpretation of the topic 10 9 8 6.5 0

Website places topic in a historical context (background) 10 9 8 6.5 0

Website information shows wide research 10 9 8 6.5 0

Website uses available primary sources (integrated, not just as decoration; more than pics) 10 9 8 6.5 0

Topic is presented as a balanced piece of research (unbiased) 10 9 8 6.5 0

Relation to Theme Website clearly relates the topic to the theme 10 9 8 6.5 0

Demonstrates topic significance in history & draws conclusions about impact 10 9 8 6.5 0

Clarity of Presentation Material is a reinterpretation of the original research paper (not just a copy & paste) 10 9 8 6.5 0

Material is clear & effectively communicated 10 9 8 6.5 0

Material selected is appropriate to the topic 10 9 8 6.5 0

Material is well-organized (including page branching) 10 9 8 6.5 0

Title & presenter name is clear & prominently communicated 10 9 8 6.5 0

Thesis is clearly & prominently communicated in the website (don’t label it as thesis!) 10 9 8 6.5 0

10 9 8 6.5 0

All images are appropriate to the topic/provide a sense of the person, event, or time period being presented (includes picture quality)(Every page contains unique images)

10 9 8 6.5 0

All audio/videos are appropriate to the topic/provide a sense of the person, event, or time period being presented (required) (includes audio/visual quality)

10 9 8 6.5 0

Aesthetics of font style, size, color, contrast, layout are appropriate (attractive, uncluttered)

10 9 8 6.5 0

Rules Compliance *Violation of any rule may result in a failing grade Website is created as an original production on nhd.weebly.com & protected by password YES NO

Maintains the word requirement (1000 – 1200 student composed words) YES NO

Website size is less than 100MB YES NO

One page is designated at the homepage from which all other pages can be accessed YES NO

No one other than the student created the website or prepared content specifically for the website YES NO

Website is free from automatic redirects, random text/image generators YES NO

Website contains links to free, downloadable plug-ins (if needed) NA YES NO

Each multimedia clip is not longer than 45 seconds (& doesn’t include student narration)

All images, audio, videos are captioned YES NO

Includes process paper YES NO

Includes annotated list of works consulted YES NO

Raw Points = _______ / xx = _______% (Recorded as 100 points for 3rd Quarter Project) * Any deviation from the rules requires explicit permission from the teacher, including a signed waiver.