forked from ober0ngh/Popbox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopbox.html
349 lines (320 loc) · 12.1 KB
/
popbox.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Popbox | Home</TITLE>
<META NAME="description"
CONTENT="Popbox Project Page Author: Linus Chang">
<LINK href="css/bootstrap.css" rel="stylesheet" type="text/css">
<LINK href="css/popbox.css" rel="stylesheet" type="text/css">
</HEAD>
<body>
<a name="title"></a>
<!-- Menu -->
<center>
<div id="header">
<!-- <ul class="nav nav-pills">
<li><a href="#overview">Overview</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#home"><img src="img/justLogo.png" width="100px" align= "middle"></a></li>
<li><a href="#research">Research</a></li>
<li><a href="#design">Design</li>
</ul>-->
<span><a href="#project_description">Project</a></span>
<span><a href="#team">Team</a></span>
<span><a href="#home"><img id=header_logo src="img/justLogo.png" width="100px" align="middle"></a></span>
<span><a href="#research_intro">Research</a></span>
<span><a href="#design">Design</a></span>
</div>
</center>
<div id=title>
<center>
<img src="img/Popbox_Logo.png" width="300px">
<div id="words">"Out of the box thinking for a healthier lifestyle."</div>
</center>
</div>
<div id="project_description">
<!-- <h1> Overview </h1> ci-lightbulb.png-->
<div id="project_description_words">
<center><h1>Project</h1></center>
<h2>About the Project</h2>
<p> Team Popbox is a group of five masters
students in the Human-Computer Interaction Institute at Carnegie
Mellon University. Each team member has a unique skillset and set
of experiences that guides their approach to user-centered research
and design. We are currently engaged in an 8-month capstone
project, which represents the culmination of our studies at
Carnegie Mellon University. During this 8-month period, we
research, design, and develop a conceptual prototype for an
industry sponsor. We are currently working with Panasonic R&D on a
solution that will help address the growing childhood obesity
epidemic.
</p>
<h2> Project Overview </h2>
<p> Team Popbox practices a user-centered
research approach with a strong focus on field work. However, we
first reviewed the vast body of existing literature on childhood
obesity to ensure that our field work was actually exploring new
ground and was conducted in a manner sensitive to the social stigma
surrounding childhood obesity.
</p>
</div>
</div>
<div id="overview">
<!-- <h1> Overview </h1> ci-lightbulb.png-->
<center>
<img src="img/ci-lightbulb.png" width="200px">
<h2>
"To understand the dynamics of childhood obesity </br> and develop a
digital experience that engages </br> children in healthier behaviors,
empowering them to be </br> agents of change in their communities."
</h2>
</center>
</div>
<a name="team"></a>
<div id="team">
<center>
<h1>The Team</h1>
</center>
<span class=team_description>
<center>
<img src="img/Nikhil_Face.png" onmouseover="changeimage(this)" onmouseout="revertimage(this)"> <br>
<span class=name><b>Nikhil Popat</b></span>
<h2>Research Lead</h2>
</center>
<p>Nikhil’s undergraduate
background is in Political Science. His passion lies in exploring
novel new ways to bring great design and compelling technology
together to enhance everyday life. He enjoy playing tennis,
re-watching Battlestar Galactica (2003), and having a good laugh.
</p>
</span>
<span class=team_description>
<center>
<img src="img/Barath_Face.png" onmouseover="changeimage(this)" onmouseout="revertimage(this)"> <br>
<span class=name><b>Barath Jawahar</b></span>
<h2>UX Lead</h2>
</center>
<p>Barath’s undergraduate background is
in electrical engineering. He previously worked at Samsung as a
software engineer. Barath loves playing soccer, travelling, and
meeting new people.
</p>
</span>
<span class=team_description>
<center>
<img src="img/Caroline_Face.png" onmouseover="changeimage(this)" onmouseout="revertimage(this)"> <br>
<span class=name><b>Caroline Record</b></span>
<h2>Project Lead</h2>
</center>
<p> Caroline’s undergraduate
background is in the Fine Arts. She is an exhibiting media artist,
a passionate student leader, and lover of Latin dance.
</p>
</span>
<span class=team_description>
<center><img src="img/Montse_Face.png" onmouseover="changeimage(this)" onmouseout="revertimage(this)"> <br>
<span class=name><b>Montse Lobos</b></span>
<h2>Design Lead</h2>
</center>
<p>Montse is a graphic designer and
front end developer with seven years of professional experience.
She previously worked as the Design lead at Ciudadano Intelligente,
a Chilean non-governmental organization. Montse’s undergraduate
design thesis focused on an an Attention Enhancer prototype for
children with a specific language impairment.
</p>
</span>
<span class=team_description>
<center><img src="img/Linus_Face.png" onmouseover="changeimage(this)" onmouseout="revertimage(this)"> <br>
<span class=name><b>Linus Chang</b></span>
<h2>Tech Lead</h2>
</center>
<p>Linus pursued his undergraduate
education at UC Berkeley as a Cognitive Science Major. He has over
eight years of professional software engineering experience and
previously worked at Lockheed Martin Corporation and Sun
Microsystems. He is an avid climber and certified diver.
</p>
</span>
</div>
<a name="research"></a>
<div id="research_intro">
<div id="research_intro_description">
<center><h1>Research</h1></center>
<p>We conducted an extensive literature review and interviewed an
assortment of weight management <b>experts</b>, which suggested that a
<b>family</b>-centered approach was most effective in addressing childhood
obesity. Our focus on families centered primarily on how parents
communicated healthy lifestyle choices to their <b>children</b> (ages 6-9).
</p>
<p>
To understand this problem space we employed a variety of field
research techniques. We conducted <b>interviews</b> with parents of young
children, <b>home-visits</b>, and family-<b>storytelling</b> sessions designed to
allow both parents and children to jointly walk us through a typical
day in their lives.</p>
</div>
</div>
<div id="research">
<div id="literature_review">
<img src="img/Popbox_LitReview_Circle_35.png" width="250px" align="left">
<div class=research_words>
<h1>Literature Review</h1>
<p>Our literature review was particularly important to our
research process given the wide body of research already available
on childhood obesity. We conducted an exhaustive review of over
fifty research papers on the subject in order to gain an in-depth
understanding of the problem space. This review enabled us to
familiarize ourselves with existing treatments for childhood
obesity as well as ensure that our fieldwork was focused on
answering questions that had not been adequately addressed by
existing literature.</p>
</div>
</div>
<br>
<div id="competitive_analysis">
<img src="img/Popbox_CompAnalysis_Circle_50.png" width="250px"
align="left">
<div class=research_words>
<h1>Competitive Landscape</h1>
<p>Our literature review indicated that there was a wide variety
of existing solutions designed to combat obesity, and even more so
that addressed the idea of weight management and personal fitness
in general. To understand the breadth of existing solutions we
conducted a competitive analysis of these solutions, dividing these
competitors into the following categories: exercise, information,
dieting, communication, and game-centered solutions.</p>
</div>
</div>
</div>
<div id="interviews">
<span class="interview_div">
<center>
<img class="interview" src="img/expert_circle.png" width="300px">
<div class="interview_words">
<h1>Expert Interview</h1>
<p>There is a vast amount of knowledge surrounding childhood
obesity that exists within the expertise of various educators,
health-care professionals, and program organizers. We reached out
to these experts to take advantage of the wealth of knowledge they
offered regarding person-person motivation, policy changes, and
education about childhood obesity.</p>
</div>
</center>
</span> <span class="interview_div">
<center>
<img class="interview" src="img/observation.png" width="300px">
<div class="interview_words">
<h1>Guerilla Observation</h1>
<p>We identified and visited several locations frequented by
families with young children. During these visits we paid close
attention to any critical nutritional and fitness choices that
were made at these locations, how each location affected those
choices, and the manner in which caretakers and children
communicated with one another.</p>
</div>
</center>
</span> <span class="interview_div">
<center>
<img class="interview" src="img/family_storytelling_circle.png"
width="300px">
<div class="interview_words">
<h1>Family Storytelling</h1>
<p>Our extensive literature review strongly suggested that a
family-centered solution was the most effective approach in the
fight against childhood obesity. With this in mind, we conducted a
series of activities with families that encouraged family members
to collaborate and walk us through specific stories from their
daily lives. These activities were designed to elicit information
regarding the day-to-day choices families made surrounding
nutrition and fitness.</p>
</div>
</center>
</span>
</div>
<a name="design"></a>
<div id="design">
<center><h1>Design Process</h1></center>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/skrollr.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/skrollr.ie.min.js"></script>
<![endif]-->
<script type="text/javascript">
var s = skrollr.init({
edgeStrategy: 'set',
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
function changeimage(x)
{
x.src = x.src.slice(0 , x.src.length -4) + "1.png";
//x.src = "img/Nikhil" + x.src.slice(59);
}
function revertimage(x)
{
x.src = x.src.slice(0 , x.src.length -5) + ".png";
}
// Cache selectors
var lastId,
header = $("#header"),
headerHeight = header.outerHeight(),
// All list items
headerItems = header.find("a"),
// Anchors corresponding to menu items
scrollItems = headerItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get scroll animation
headerItems.click(function(e){
var href = $(this).attr("href");
if(typeof $(href).offset() != 'undefined')
offsetTop = href === "#" ? 0 : $(href).offset().top-headerHeight+1;
else
offsetTop=1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+headerHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop){
//console.log(this);
return this;
}
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
//console.log(id);
if ((id == "title") || (id == "")) {
//window.alert(id);
$('#header_logo').css('visibility', 'hidden');
} else {
$('#header_logo').css('visibility', 'visible');
}
if (lastId !== id) {
lastId = id;
// Set/remove active class
headerItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
</script>
</body>
</HTML>