forked from japacible/project-harmony
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (128 loc) · 5.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="project, harmony, project harmony, david mailhot, jennifer apacible, eve zhao, eric oltean, university of washington, cse, cse 440, cse440, hci" />
<title>Project Harmony</title>
<link href="css/reset.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/main.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/harmony.css" type="text/css" rel="stylesheet" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="images/icons/harmony.jpg">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script src="js/jquery.history.js"></script>
<script src="js/scrollto.min.js"></script>
<script src="js/main.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="overhang"></div>
<div id="wrap" class="container">
<div id="titlearea">
<div class="row">
<div class="span2">
<img src="images/icons/harmony.jpg"/>
</div>
<div class="span6">
<h1><span id="smalltext">Project</span><span>Harmony</span></h1>
</div>
</div>
<div class="backlight fade-in one"></div>
<p class="fade-in one">If people had more empathy,</p>
<p class="fade-in two">the world would be a better place.</p>
</div>
<div id="menu">
<div>
<ul>
<li class="active"><a href="#home">Home</a></li>
<li><a href="#projectharmony">Project Harmony</a></li>
<li><a href="#documentation">Documentation</a></li>
<li><a href="#prototype">Prototype</a></li>
<li><a href="#team">Team</a></li>
</ul>
</div>
</div>
<!-- TODO: Get rid of whitespace -->
<div id="projectharmony_wrap" class="section">
<h2>Project Harmony</h2>
<h4 class="inline">Concept Video</h4>
<span><a class="btn btn-mini btn-info" href="projectHarmony.mov">Download [1.25GB]</a></span>
<div class="centered">
<iframe width="560" height="315" src="http://www.youtube.com/embed/GdJqQ_XR59o" frameborder="0" allowfullscreen></iframe>
</div>
<div class="row">
<div class="span8">
<h4>Being considerate isn't always easy</h4>
<p>Every time we interact with another person there is a natural expectation that each person will be considerate of the other. Unfortunately, sometimes - whether by accident or ignorance - people can do or say things that are thoughtless, rude, or may even hurt someone's feelings. It doesn't have to be this way.</p>
<h4>Helping people find Harmony</h4>
<p>We envision a future in which people can use Project Harmony to improve their social performance. Designed to be deployed on a wearable computing device, our application will analyze the visual and vocal social cues of nearby people in any given social situation. On the spot, it will display to the wearer feedback about their current social performance by giving quick advice and pointing out mistakes. The wearer can also review this information with video playback of each social encounter. Armed with this information, the wearer can learn to be more considerate to the people they interact with in everyday situations. In this way, the world can become a better place, one person at a time.</p>
</div>
</div>
</div>
<div id="documentation_wrap" class="section">
<h2>Documentation</h2>
<div class="row">
<div class="span3">
<h3>Reports</h3>
<div class="row">
<div class="span3 offset1">
<p>Project Proposal <a href="documents/Project_Proposal.pdf">[PDF]</a></p>
<p>Contextual Inquiry <a href="documents/Contextual_Inquiry.pdf">[PDF]</a></p>
<p>Task Analysis <a href="documents/Task_Analysis_Questions.pdf">[PDF]</a></p>
<p>Concept Video Report <a href="documents/Concept_Video_Report.pdf">[PDF]</a></p>
<p>User Testing Report <a href="documents/User_Testing_report.pdf">[PDF]</a></p>
</div>
</div>
</div>
<div class="span3 offset1">
<h3>Presentations</h3>
<div class="row">
<div class="span4 offset1">
<p>Problem Finding and Research <a href="documents/React_Harmony_Introduction.pdf">[PDF]<a> <a href="documents/React_Harmony_Introduction.pptx">[PPTX]</a></p>
<p>Task Analysis Presentation <a href="documents/CI_TA_presentation.pdf">[PDF]</a> <a href="documents/CI_TA_presentation.pptx">[PPTX]</a></p>
<p>Low-Fi Prototype Presentation <a href="documents/User_Testing_presentation.pdf">[PDF]</a> <a href="documents/User_Testing_presentation.pptx">[PPTX]</a></p>
</div>
</div>
</div>
</div>
</div>
<div id="prototype_wrap" class="section">
<h2>Prototype</h2>
<p><a href="ui_prototype.html">[Under Construction]</a></p>
<br/>
<br/>
</div>
<div id="team_wrap" class="section">
<!-- Make this pretty! -->
<h2>Team</h2>
<div class="row">
<div class="span2 offset1">
<p>David Mailhot</p>
<p>Jennifer Apacible</p>
<p>Eve (Yi Zhao)</p>
<p>Eric Oltean</p>
</div>
<div class="span2">
<p>Team Manager</p>
<p>Design/Documention</p>
<p>User Testing</p>
<p>Development</p>
</div>
</div>
</div>
<div id="footer">
<!-- Do we need anything else here? -->
<p class="left">
Project Harmony | <a href="http://www.cs.washington.edu/education/courses/cse440/12au/">CSE 440 Au12<a>
</p>
<p class="right">
<a href="http://www.washington.edu/online/privacy" target="_blank">Privacy</a> |
<a href="http://www.washington.edu/online/terms" target="_blank">Terms</a>
</p>
</div>
</div>
</body>
</html>