<section>
<?= head("Introduction") ?>
<p>Much of the goal of this quarter has been to prepare you for this project, in which you get to apply your skills building something useful.</p>
<p>For your final project you will design and implement a <strong>mashup app</strong> which uses data from one or more sources in a novel way.</p>
<p><em style="font-family: 'Droid Sans'; font-style: normal; color: red">For this project you are required to work in groups of 2−3.</em></p>
<!-- <style type="text/css">
dl.filelist {
/* margin-left: 1em; */
overflow: hidden;
}
dl.filelist dt {
float: left;
clear: left;
height: 1.4em;
}
dl.filelist dd {
margin-left: 11em;
height: 2.8em; /* line height (1.4) × 2 */
line-height: 2.8em;
/* background-color: fuchsia;*/
margin-bottom: .5em;
position: relative;
white-space: nowrap;
}
dl.filelist dd:before {
display: block;
position: absolute;
content: '}';
/* width: .25em;*/
left: -.5em;
top: -.1em;
font-size: 2.6em;
line-height: 1em;
/* background-color: fuchsia;*/
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
dl.filelist dd.tall {
line-height: 3.9em;
margin-bottom: 1.5em;
margin-left: 11.6666666em;
}
dl.filelist dd.tall:before {
font-size: 3.9em;
/* left: -.333333em;*/
}
</style>
<dl class="filelist">
<dt><samp>colorpicker.html</samp></dt>
<dt><samp>colorpicker.css</samp></dt>
<dt><samp>colorpicker.js</samp></dt>
<dd class="tall">The HTML, CSS, and JavaScript code for your page</dd>
</dl>
<p class="note important" style="clear: both">Your file names must match these <em>exactly</em> — with precisely the same capitalization and spacing.</p>
<p>(If you have any additional files, you’ll be able to submit them as well.)</p> -->
<!-- <?= subhead("Background") ?>
<p>Colors can be represented several different ways. The three most well-known <strong><a href="http://en.wikipedia.org/wiki/Color_space">color spaces</a></strong> in web and print media are:</p>
<ul>
<li><strong>RGB</strong>: Various amounts of red, green, and blue are combined to produce a particular color. (Commonly used in electronic media.)</li>
<li><strong>CMYK</strong>: Various amounts of cyan, magenta, and yellow are combined to produce a particular color. Pure black is used to represent black or shades of gray. (Commonly used in print.)</li>
<li><strong>HSL/HSV/HSB</strong>: Colors are represented by their hue (an angle) on the color wheel, a saturation of that color, and an amount of “lightness”/“brightness”/“value”.</li>
</ul>
<p>We will focus on RGB and HSV, because they’re the most commonly-used on the web. In CSS, colors can be declared several different ways:</p>
<ul>
<li><strong>RGB hexadecimal</strong>: An RGB value in hexadecimal hash-notation. Example: <span class="nonbreaking"><code class="color">#ff452b</code></span></li>
<li><strong>RGB decimal</strong>: An RGB value in “function-style” decimal notation. Example: <span class="nonbreaking"><code class="color">rgb(255, 69, 43)</code></span></li>
<li><strong>HSL</strong>: Hue, saturation, and lightness values. <span class="nonbreaking">Example: <code class="color">hsl(7, 100%, 58%)</code></span></li>
</ul> -->
<?= subhead("Inspirations") ?>
<p>There are numerous examples of apps — both desktop apps and mobile apps — which rely on web services to provide useful or novel experiences which can tremendously enhance our modern life.</p>
<p>Below are a few notable examples of useful applications which make use data:</p>
<h5><a href="http://www.wherethefuckshouldigotoeat.com">Where the F*** Should I Go to Eat?</a> / <a href="http://www.wherethefuckshouldigofordrinks.com"> Where the F*** Should I Go for Drinks?</a> by °coolography</h5>
<p>(Disclaimer: comical use of rude language.)</p>
<p>This comical app suggests a random nearby place to eat, with ironically-excessive use of rude words. It:</p>
<ul>
<li>Uses the HTML5 <a href="http://diveintohtml5.info/geolocation.html">Geolocation API</a> to find the user’s current location.</li>
<li>Uses the <a href="http://www.yelp.com/developers/documentation/v2/overview">Yelp API</a> (or something similar) to fetch nearby locations to eat which are highly rated and within a certain price range.</li>
<li>Chooses a random place to eat, and loads a Google Map with a route from the current location to the chosen restaurant.</li>
<li>Styles the page such that sizes are appropriate for any size screen, from mobile to desktop.</li>
<li>Provides a backup search tool which auto-completes neighborhood names if geolocation data is not available.</li>
</ul>
<h5><a href="http://www.520or90.com/">520 or 90?</a></h5>
<p>This app advises the user which bridge across Lake Washington is more cost- or time-effective at the current time, factoring in current traffic conditions, and gas prices. It:</p>
<ul>
<li>Fetches traffic data for two equidistant routes between Seattle and Bellevue — one traveling across SR-520, and the other across I-90.</li>
<li>Fetches data about current 520 tolls, and current gas prices in the Puget Sound Area.</li>
<li>Uses the traffic data to estimate the amount of gas consumed on either route (with more traffic wasting more gas).</li>
<li>Provides a summary of the cost and time associated with each bridge, and highlights the most cost- and time-effective route(s) at the current time. (The two may be different.)</li>
<li>Allows the user to configure fuel type, type of vehicle, and whether the user has a Good To Go! pass, all of which affect the cost estimate.</li>
</ul>
<h5><a href="http://www.onebusaway.org/">OneBusAway</a></h5>
<p>One of the first useful apps for real-time bus information. It:</p>
<ul>
<li>Allows the user to search for nearby stops, and see real-time arrival information for routes stopping there.</li>
<li>Uses proprietary data from regional transit services to predict real-time arrival information.</li>
<li>Acts as an upstream server of data for developers of other apps (requires an API key).</li>
<li>Offers several different interfaces: native iOS and Android apps, a desktop app, and a web-based mobile app.</li>
</ul>
</section>
<section>
<?= head("Your Mashup App", array('modified' => true)) ?>
<p>The requirements for your mashup app are as follows:</p>
<ol>
<li>
<p>You must load data from at least one web API.</p>
<p><ins datetime="Sat, Dec 1, 5:00 PM">If at all possible, try to find a service that supports JSONP, because that’s the only way to load data (strictly with JavaScript) from another domain.</ins></p>
<p><ins>However, if the data source you want to use does not support JSONP, you may still use it. You’ll just have to make the request through a proxy service we’ve set up here:</ins></p>
<p class="resource"><ins><a href="http://info343.ischool.uw.edu/proxy.php">http://info343.ischool.uw.edu/proxy.php</a></ins></p>
<p><ins>(Visit the service without passing parameters for instructions on how to use it.)</ins></p>
</li>
<li>
<p>If at all possible, you should use a “responsive” layout for your app which allows it to be viewed with ease on any size screen.</p>
<p class="note">Not all designs are equally receptive to using responsive CSS alone to adapt the page for smaller sizes. Some may require JavaScript as well. If your app is sophisticatedly desktop-centric, such that adapting to a smaller size would be a significant usability undertaking, it’s okay if your design is not responsive — but for any other designs, you will be expected to provide a responsive experience.</p>
</li>
<li>You must not replicate the functionality of any existing app, so far as you’re aware. (You don’t have to research existing apps before you begin — you just shouldn’t copy something you already know.)</li>
<li>It should be substantial enough for a final project. Ask the instructor if you’re unsure whether your idea is substantial enough.</li>
</ol>
<p>That’s it! You are given even more freedom for this project than for the mini-project: not only is there is no expected output, there is no expected behavior either. It’s all up to you!</p>
<?= subhead("Layout, Aesthetics, and Interaction Design") ?>
<p>As with the mini-project, considerably more emphasis will be placed on aesthetics and design than in your homework assignments. Your layout and design should be clean and elegant, and you should put considerable effort into the appearance and interactivity of your page.</p>
<p>Your page’s appearance and elegance are more important than its sophistication: You should spend a significant amount of time polishing the look & feel and interactivity of your page. It is far better to have a simple page that looks and works beautifully than an ugly, buggy page with sophisticated widgets.</p>
<p>If you are not comfortable with your design skills, consider grouping with someone who is. This project is a good opportunity for three people with complementary skills to collaborate.</p>
<p>While it’s difficult to provide concrete aesthetic requirements, here are a few simple guidelines to follow:</p>
<ul>
<li>Use a clean, simple, elegant typeface and colors that aren’t distracting.</li>
<li>Make optimal use of screen space by arranging things with usage patterns in mind.</li>
<li>A successful design is one which assists the user by getting out of the way.</li>
</ul>
<p><strong style="color: red">Consider this a portfolio piece! Create something you’re proud to show off to your classmates and to prospective employers.</strong></p>
</section>
<section>
<?= head("Stylistic Considerations") ?>
<p>As with homework assignments, 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", array('modified' => true)) ?>
<p>As stated on the course syllabus, this mini-project will be worth 20% of your final course grade.</p>
<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>~ 5 points</dt>
<dd>HTML code</dd>
<dt>~ <ins datetime="Thu, Dec 6, 1:45 PM">17</ins> points</dt>
<dd>JavaScript code</dd>
<dt>~ 12 points</dt>
<dd>Appearance, layout, aesthetics, and interaction design</dd>
<dt>~ <ins>9</ins> points</dt>
<dd>Stylistic and other considerations</dd>
<dt><ins>~7 points</ins></dt>
<dd><ins>Group presentation</ins></dd>
<dt class="total"><ins>50</ins> 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("Presentation During Final Exam Period") ?>
<p>You will present your final project to the class during your regularly-scheduled final exam period. These are as follows:</p>
<style type="text/css">
#exam-periods dt {
float: left;
width: 6em;
margin-bottom: .25em;
}
#exam-periods dt::after {
content: ':';
}
#exam-periods dd {
margin-left: 6em;
margin-bottom: .25em;
}
</style>
<dl id="exam-periods">
<dt>Section A</dt>
<dd>Tuesday, December 11, 10:30–12:20</dd>
<dt>Section B</dt>
<dd>Monday, December 10, 10:30–12:20</dd>
<dt>Section C</dt>
<dd>Monday, December 10, 8:30–10:20 am</dd>
</dl>
<p>If you are working with students from other sections, you must choose one of the sections you’re registered for to present.</p>
<p class="note"><em style="font-style: normal; font-family: 'Droid Sans'; color: red">All group members must be present for the final presentation.</em></p>
<?= subhead("Presentation Content", array('modified' => true)) ?>
<p>Incorporate information into your presentation which (generally) addresses the following subjects:</p>
<ul>
<li><strong>The motivation for your app.</strong> What problems does it solve? What needs does it fulfill? What is your target audience, and how is it useful/applicable to those users? What were your inspirations and influences — positive or negative?</li>
<li><strong>Your design goals.</strong> What were the initial goals you had in mind for the user experience of your app? Did you revise those goals or ideas partway through the development process? If so, how so?</li>
<li>
<p><strong>The implementation of your app.</strong> What data did you use, and from what sources? How were those sources helpful or unhelpful? What is the general approach you took to integrating the data into your app? What are the mechanics of navigation and presentation like? If your app incorporates an algorithmic approach, describe that algorithm. Are there any special tools or libraries you used to accomplish certain things?</p>
<div class="note">
You may use code examples or web service output as illustrations if you like, but bon’t get bogged down in implementation details.</p>
<p>Include a “goldilocks” amount of detail: just enough information to get a feel for how your program works, while remaining interesting and engaging.</p>
</div>
</li>
<li><strong>Highlights of the process.</strong> What parts of the development process were particularly interesting/exciting? difficult/frustrating? boring/tedious? Did you have any positive or negative learning experiences?</li>
<li><strong>The end result.</strong> Take us through your app. Show us typical use cases as well as a few bells and whistles. Highlight features or aspects of your app that you’re particularly proud of or that you feel best represent your accomplishments.</li>
<li><strong>Attributions.</strong> Is one person particularly responsible for the look and feel of your app? Another for a nifty algorithm? Point out notable contributions from group members, as well as ideas or techniques incorporated from other sources.</li>
</ul>
<p class="note important">You don’t have to explicitly address the above as bullet points — in fact, we’d recommend that you don’t. This information is intended only as a guide to help you decide what content to include in your presentation.</p>
<?= subhead("Presentation Format & Guidelines", array('modified' => true)) ?>
<p>Presentations should be about 5–7 minutes in length. (A few groups can have longer presentations, but every group cannot.)</p>
<p>The format should be <strong>professional but relaxed.</strong> No need to dress up, but develop a clear, structured, engaging presentation.</p>
<p><strong>Present as a group.</strong> No single group member should dominate the presentation; all members should have roughly equal time discussing the project.</p>
<p>Informational materials like slides, handouts, and webpages that document your app are <strong>optional</strong>. If you have time, go for it — materials are nice! — but be sure your app is solid first.</p>
<p>Group order will be determined on a volunteer basis at the beginning of the period, with stalemates broken by instructor nomination.</p>
<div class="note important">
<p><strong>Important:</strong> Please be courteous to your fellow classmates. Do not arrive late to class, and do not work on your project or presentation during other groups’ presentations.</p>
<p><em style="color: red; font-family: 'Droid Sans', sans-serif; font-style: normal; font-weight: bold">Anyone arriving late (without instructor permission) or working on their final projects during the presentation period may receive a penalty to their presentation grade.</em></p>
</div>
</section>
<section>
<?= head("Submitting Your Project") ?>
<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>final-project</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 class="note"><em style="font-family: 'Droid Sans'; font-style: normal; color: red">Choose <strong>one</strong> team member to submit the assignment. Ensure all team members are named in the file header comments.</em></p>
<p>This assignment will not be accepted by any other means of submission without permission by the instructor or a TA.</p>
</section>