<section>
<?= head("Introduction") ?>
<p>This assignment practices event handling, form controls, and DOM manipulation using jQuery. For it you will build an interactive tool for previewing web fonts.</p>
<p>You will turn in <strong>at least</strong> the following files:</p>
<style type="text/css">
dl.filelist {
/* margin-left: 1em; */
}
dl.filelist dt {
float: left;
clear: left;
height: 1.4em;
}
dl.filelist dd {
margin-left: 10em;
/* background-color: fuchsia;*/
margin-bottom: .5em;
position: relative;
white-space: nowrap;
}
</style>
<dl class="filelist">
<dt><samp>fontr.html</samp></dt>
<dd>Your completed HTML page with UI controls.</dd>
<dt><samp>fontr.css</samp></dt>
<dd>Your CSS layout for the page.</dd>
<dt><samp>fontr.js</samp></dt>
<dd>Your JavaScript code for the page.</dd>
</dl>
<p class="note important" style="clear: left">Your file names must match these <em>exactly</em> — with precisely the same capitalization and spacing.</p>
<p>(If you have any additional files that are part of your design for the page, you’ll be able to submit them as well.)</p>
<?= subhead("Content & Resources") ?>
<p>Download the following HTML skeleton, containing the HTML structure of the page:</p>
<p class="resource"><a href="hw3_skeleton.html">hw3_skeleton.html</a></p>
<p>To this file you will add all of the HTML form control (and related) elements you see in the screenshots, and as specified in <a href="#adding-the-html-form-controls">Adding the HTML Form Controls</a> below.</p>
<p>You are also allowed to add the following:</p>
<ul>
<li><code>div</code>/<code>span</code> tags and/or <code>id</code>/<code>class</code> attributes as needed/appropriate for styling the page (see <a href="#styling-the-page">Styling the Page</a>).</li>
<li><code>script</code> and <code>link</code> tags as appropriate inside the <code>head</code>.</li>
</ul>
<p class="note"><em style="font-family: 'Droid Sans'; font-style: normal; color: red">You are <strong>not allowed</strong> to add any other HTML to the page.</em></p>
</section>
<section>
<?= head("Basic Page Appearance") ?>
<p>You will write the HTML and JavaScript code to produce an interactive webpage which displays controls & options for previewing fonts.</p>
<p>Initially, your page should look similar or identical to the screenshot below, with no CSS styles applied:</p>
<figure id="expected-output" class="expectedoutput">
<a href="output/hw3_expected_output_unstyled_ff15_lion.png">
<img src="output/hw3_expected_output_unstyled_ff15_lion.png" alt="Expected output before styling" />
</a>
<figcaption>Expected output before styling.</figcaption>
</figure>
<p>Later you will add styles of your own to arrange this page as you see fit (see <a href="#styling-the-page">Styling the Page</a> below).</p>
<?= subhead("Adding the HTML Form Controls") ?>
<p>The skeleton file lacks any form controls; it’s your job to add the appropriate HTML form controls, with the appropriate attributes, as follows:</p>
<ul>
<li>
<p>In the <strong>Preview Text</strong> section there are three <strong>radio buttons</strong> grouped together, such that when one is clicked the others become deselected.</p>
<p>These radio buttons have the text labels “Preset,” “Lipsum,” and “Custom,” next to them respectively. If a text label is clicked, the radio button next to it should be selected.</p>
<p>The first option, “Preset,” should be selected initially when the page is loaded.</p>
</li>
<li>
<p>Next to the Preset option is a dropdown menu with three choices, in the following order:</p>
<ol>
<li><samp>Font Name</samp></li>
<li><samp>The quick brown fox jumped over the lazy dog.</samp></li>
<li><samp>Grumpy wizards make toxic brew for the evil Queen and Jack.</samp></li>
<li><samp>AaBbCcDdEeFfGgHhIiJjKkLlMmOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 .,!?@#$%&*<>(){}[]</samp></li>
</ol>
<p>The second option, “The quick brown fox…”, should be initially selected when the page is loaded.</p>
</li>
<li>Next to the Lipsum choice is a <strong>text box</strong> where a number of sentences can be entered. When the page is loaded it should initially contain the number <strong>4</strong>.</li>
<li>Next to the Custom choice is a <strong>multi-line text box</strong> where custom preview text can be entered. This should be <strong>4 rows tall</strong> and <strong>40 characters wide</strong> by default.</li>
<li>
<p>In the <strong>Font</strong> section, the first item in the list is a dropdown menu with several font names.</p>
<p>This menu should contain several fonts of your choice — about 6–12. Of these, <strong>at least one</strong> must be a CSS3 downloadable web font from a source like <a href="http://www.google.com/webfonts">Google Web Fonts</a>.</p>
<p class="note">Be sure to include the appropriate HTML <code>link</code> tag or CSS <code>@import</code> statement to make your downloadable font(s) available on the page.</p>
</li>
<li>The second and third items in the Font section are checkboxes, with the text labels “Bold” and “Italic” respectively. If either of these text labels is clicked, the checkbox next to it should be toggled.</li>
<li>
<p>In the <strong>Sizes</strong> section there are two text fields — one for font size, and one for line height. Following each of these is a dropdown to select a unit from the following choices: <code>em</code>, <code>px</code>, or <code>pt</code>.</p>
<p>The default font size should be <strong>2 ems</strong>, and the default line height should be <strong>1.2 ems</strong>.</p>
</li>
</ul>
<?= subhead("Browsers Remember Your Changes") ?>
<p>It’s important to note that when you make a change to a form control, most modern browsers will retain the altered state even after you refresh the page.</p>
<p>In order to force the browser to reset all form controls to the defaults specified in the HTML, you’ll often need to do a “<strong>hard refresh</strong>” — which tells the browser to discard any changes you’ve made to form elements and reset them to their defaults.</p>
<p>Usually this can be performed by <strong>holding the shift key</strong> while clicking your browser’s refresh button. If you’re on a Mac, you may need to hold the Option key instead. If neither of these work, you may need to quit and relaunch the browser to cause the cached version of the page to be discarded.</p>
</section>
<section>
<?= head("Behavior Specifications") ?>
<p>The preview of the font should be updated automatically whenever:</p>
<ul>
<li>the page is loaded initially, or</li>
<li>any of the options are changed.</li>
</ul>
<p>Preview text should be injected into <strong>the empty paragraph inside of the preview fieldset</strong>, and all style changes should be to this element. <em style="font-family: 'Droid Sans'; font-style: normal; color: red">You are not allowed to attach an <code>id</code> or <code>class</code> to this paragraph.</em></p>
<p>Other details of the page’s behavior are as follows:</p>
<?= subhead("The “Font Name” Preset") ?>
<p>If the Font Name option is selected from the Preset dropdown, the <strong>name of the currently-selected font</strong> should be used as the preview text.</p>
<?= subhead("The “Lipsum” Option") ?>
<p>If the Lipsum option is selected, the preview should be populated with the specified number of sentences of filler text.</p>
<p>To generate the filler sentences, you should find a <a href="http://www.google.com/search?q=filler%20text%20generator">filler text generator</a> and generate many sentences of filler text. Put these together into a very long single-line global variable in your JavaScript code:</p>
<pre><code>var FILLER = 'Lorem ipsum dolor sit amet […]'; // this will be very long!</code></pre>
<p>(We usually like to put globals at the top of our JavaScript files, but since this one will be very long you may prefer to put it at the end of your JavaScript file — especially if you have line-wrapping enabled in your editor.)</p>
<p>To get the specified number of sentences, you should break that the string into a list of sentences, extract the first <var>n</var> of those, and join the extracted list back together.</p>
<p class="note">To break the filler text into sentences, you should assume sentences always end with a period and space ('<samp>. </samp>').</p>
<p><ins datetime="Sun Oct 21, 1:30 PM">You can assume the user enters a valid number within the range of available sentences.</ins></p>
</section>
<section>
<?= head("Matching Our Output") ?>
<figure class="example" style="margin-top: -1em">
<a href="output/hw3_expected_output_unstyled_ff15_lion.png" class="cropped">
<img src="output/hw3_expected_output_unstyled_ff15_lion.png" style="margin-top: -4em"
alt="Unstyled output in Firefox 15 on Mac OS X Lion" />
</a>
<figcaption>Unstyled output in Firefox 15, on <strong>Mac OS X Lion</strong>, on an iSchool lab machine.</figcaption>
</figure>
<p>For this assignment your output after adding form controls and behavior (i.e., before styling the page) should be similar or identical to our screenshots. These are without any styles applied other than the browser defaults.</p>
<p>Our screenshots are taken in <strong>Firefox 15</strong> on iSchool lab machines, in both <strong>Mac OS X Lion</strong> and in <strong>Windows 7</strong>.</p>
<!-- <figure class="example" style="margin-top: 1em">
<a href="output/hw3_expected_output_unstyled_ff15_win7.png" class="cropped">
<img src="output/hw3_expected_output_unstyled_ff15_win7.png" style="margin-top: -5em"
alt="Expected output in Firefox 15 on Windows 7" />
</a>
<figcaption>Expected output in Firefox 15, on <strong>Windows 7</strong>, on an iSchool lab machine.</figcaption>
</figure> -->
</section>
<section>
<?= head("Styling the Page") ?>
<p>The page as specified above is not very attractive, and does not change any of its appearance from browser defaults.</p>
<p>Your final task will be to make the page look better, by adjusting fonts & colors and laying out elements on the page using CSS.</p>
<p>The <strong>only fixed requirement</strong> is that you lay out the sections on the page more intuitively — for example, by arranging them into columns. There is a lot of wasted horizontal space, so make your page more efficient by arranging things next to each other or on the same line.</p>
<p>Beyond that you are free to modify anything else on the page you want. We will be evaluating your solution on how well it improves the usability and attractiveness of the page.</p>
<figure class="example" style="margin-top: -2em;">
<a href="output/hw3_expected_output_styled_ff15_lion.png" class="cropped">
<img src="output/hw3_expected_output_styled_ff15_lion.png"
alt="An example of a solution with improved layout and styles." />
</a>
<figcaption>An example of a solution with improved layout and styles.</figcaption>
</figure>
<p>If you’re looking for inspiration, the screenshot to the right is one example of an improved page. (You’re allowed to copy this appearance if you like, but you’re not required to.)</p>
<p>You may make minor adjustments to the HTML, such as rearranging the HTML source order if needed. You may also add <code>div</code>/<code>span</code> tags and/or <code>id</code>/<code>class</code> attributes as appropriate to the skeleton HTML file.</p>
<p><em style="font-family: 'Droid Sans'; font-style: normal; color: red">However, you <strong class="nonbreaking">may not</strong> add any other HTML, or remove any existing HTML from the file.</em></p>
</section>
<section>
<?= head("Stylistic Considerations") ?>
<p>You will be graded in part on certain choices you make in writing the code for your pages. Keep the following in mind:</p>
<ul>
<li>
<p><strong>Make good tag choices.</strong> Use the most appropriate HTML tags available to describe each piece of content. Be careful not to choose tags based on the appearance you want the content to have; rather, choose tags based on how well they describe the content or structure of the page. You can always use CSS to alter the appearance if it isn’t right.</p>
</li>
<li><strong>Reduce redundancy.</strong> Sometimes you may have styles that are shared by multiple elements. Whenever it makes your code more logically-structured, you should combine redundant style declarations into a single rule.</li>
<li><strong>Properly format your code.</strong> Use consistent indentation that makes the structure of your code easy to follow. In general, you should usually indent inside block-level elements in your HTML, and in your CSS code you should indent consistently inside curly braces. Wrap comments to no more than 100 characters on a line. Don’t worry about wrapping long HTML opening tags, but you may want to indent the content inside an element if its opening tag is long — even if it’s an inline element. (<strong>Never</strong> add a line break inside of a URL!)</li>
<li>
<p><strong>Include proper comments.</strong> All files submitted should begin with an authorship comment with information to identify the work: the course, date, assignment, your name and section, and a brief description to the file are all standard things to include.</p>
<p class="important note">
<strong>Remember to use the right comment syntax!</strong><br/>
HTML comments look <code><!-- like this ---></code>, CSS comments look <code>/* like this */</code>, and JavaScript comments can be either <code>/* like this */</code> or <code>// like this</code>.
</p>
<p>These should be at the top of <strong>every file</strong>.</p>
<p>You don’t need to comment on sections of your HTML or CSS code — however, in your JavaScript code you are required to comment on function behavior (parameters, return value, purpose) as well as “milestones” at significant passages of your JavaScript code, as you did in CSE 142.</p>
</li>
<li><strong>Validate your code.</strong> For full credit, your code should pass the W3C validators with no errors. (Yellow warnings can safely be ignored.) Write valid XHTML 1.1 or HTML5 and CSS 2.1 or CSS 3 code.</li>
</ul>
</section>
<section>
<?= head("Grading") ?>
<p>The point breakdown for this assignment will be roughly as follows:</p>
<style type="text/css">
dl.breakdown {
margin-left: 1em;
}
dl.breakdown dt {
float: left;
clear: left;
width: 6em;
}
dl.breakdown dd {
margin-left: 6em;
margin-bottom: .5em;
width: 11em;
}
dl.breakdown .total {
border-top: solid 4px black;
font-weight: bold;
padding-top: .5em;
}
</style>
<dl class="breakdown">
<dt>~ 4 points</dt>
<dd>HTML form controls</dd>
<dt>~ 10 points</dt>
<dd>JavaScript code</dd>
<dt>~ 6 points</dt>
<dd>CSS styles and other considerations</dd>
<dt class="total">20 points</dt>
<dd class="total">Total</dd>
</dl>
<p><small style="font-style: italic; font-family: 'Open Sans'">The exact point value for each category is subject to change ± 2 points.</small></p>
</section>
<section>
<?= head("Submitting Your Assignment") ?>
<p>When you are finished with your assignment you are required to do <strong>both</strong> of the following:</p>
<ol>
<li>
<p><strong>Upload your files to the course web server.</strong> Put them in a folder named <em>exactly</em> <samp>hw3</samp> inside your <samp>public_html</samp> web directory on our web server (<samp>info343.ischool.uw.edu</samp>).</p>
<p class="important note">The folder you put your homework files in must match this exactly — including capitalization and spacing! You may lose points if your files are not named <em>exactly</em> as specified in this document.</p>
</li>
<li><p><strong>Submit your assignment via the drop box</strong> on the course website.</p></li>
</ol>
<p>You must do <strong>both</strong> of these to get full credit. You may submit your assignment as many times as you like; only the last submission will count. Please remember to upload to the web server <strong>exactly</strong> the same version that you submit to the drop box.</p>
<p>This assignment will not be accepted by any other means of submission without permission by the instructor or a TA.</p>
</section>