-
Notifications
You must be signed in to change notification settings - Fork 0
/
sonset.html
195 lines (171 loc) · 10.5 KB
/
sonset.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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Eliane Zalewski</title>
<link rel="stylesheet" href="style.css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Righteous&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
<script src="scripts/modernizr.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-131314732-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-131314732-1');
</script>
</head>
<body>
<a href="#cd-nav" class="cd-nav-trigger">Menu
<span class="cd-nav-icon"></span>
<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
<circle fill="transparent" stroke="#bd8c7d" stroke-width="2" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
</svg>
</a>
<div id="cd-nav" class="cd-nav">
<div class="cd-navigation-wrapper">
<div class="cd-half-block">
<nav>
<ul class="cd-primary-nav">
<li><a href="index.html" class="selected">Work</a></li>
<li><a href="profile.html">About</a></li>
</ul>
</nav>
</div><!-- .cd-half-block -->
<div class="cd-half-block">
<address>
<ul class="cd-contact-info">
<li><a href="mailto:[email protected]?subject=Portfolio">[email protected]</a></li>
<li>540.539.2528</li>
</ul>
<ul class="cd-contact-socials">
<li><a target="_blank" href="https://www.linkedin.com/in/eliane-zalewski/">Linkedin</a></li>
<li><a target="_blank" href="https://github.com/elzalewski">Github</a></li>
<li><a target="_blank" href="https://www.instagram.com/e_zalew22/">Instagram</a></li>
<li><a target="_blank" href="https://www.facebook.com/eliane.zalewski">Facebook</a></li>
</ul>
</address>
</div> <!-- .cd-half-block -->
</div> <!-- .cd-navigation-wrapper -->
</div> <!-- .cd-nav -->
<div class="site-container">
<header style="background-image: url(img/SonSet_Header.jpg);" class="site-header cf">
<div class="site-title"><a href="index.html">EL</a></div>
<div class="cf"></div>
<div>
<h1>SonSet Solutions</h1>
<p><strong>Fall 2018 - Spring 2019 </strong> | <i>University Capstone Project </i> | <strong>URL:</strong> <a href="https://elzalewski.github.io/sonset/"><i>Project Landing Page</i></a></p>
<p>Sonset Solutions has developed a portable, solar-powered radio for use by the 1.2 billion people without access to electricity. The radio is tuned to the frequency of SonSet’s local ministry partners, with the goal of bringing Christian radio to people who aren’t easily reachable otherwise. SonSet now wants to extend their radio with offline audio Bibles in different languages. Our Capstone team's task is to write human-facing software that SonSet’s partners can use to easily load content onto SD cards, which will then be inserted into the radios.</p>
</div>
</header><!-- / .site-header -->
<section class="site-content">
<article class="project">
<div class="project-assets">
<!-- SonSet 1 -->
<div class="page-desc sub"><h2><strong>Research & Preliminary Sketches</strong></h2>
<p>Our initial sketches were way more complex than they needed to be, but they really helped us communicate with our client and make sure we were on the same page with requirements.</p>
</div>
<div class="image">
<div data-picture>
<div data-src="img/SonSet_1.jpg"></div>
<div data-src="img/SonSet_1.jpg" data-media="(-webkit-min-device-pixel-ratio: 2),(min--moz-device-pixel-ratio: 2),(-o-min-device-pixel-ratio: 2/1),(min-device-pixel-ratio: 2),(min-resolution: 192dpi),(min-resolution: 2dppx)"></div>
<noscript>
<img src="img/SonSet_1.jpg" alt="" />
</noscript>
</div>
</div>
<!-- SonSet 2 -->
<div class="page-desc sub"><h2><strong>Requirements & 1st Round Mockups</strong></h2><br><br>
<p>Our software has to be able to:</p>
<ul>
<li>Download content from SonSet’s servers</li>
<li>Write data to SD card</li>
<li>Track accounting information</li>
<li>Support localization</li>
<li>Perform audio conversion</li>
<li>Allow users to add download credits</li>
</ul>
<p> The client has also requested that only content downloaded directly from SonSet's servers can be played on the radio. User-uploaded content can be accessed from the radio via USB, but not played. Since content is stored on different sections of the SD card depending on whether it comes from SonSet or the user's local disk, we decided to make this more obvious to the user by visually splitting up the sections. </p>
</div>
<div class="image">
<div data-picture>
<div data-src="img/SonSet_MockupTrans.jpg"></div>
<div data-src="img/SonSet_MockupTrans.jpg" data-media="(-webkit-min-device-pixel-ratio: 2),(min--moz-device-pixel-ratio: 2),(-o-min-device-pixel-ratio: 2/1),(min-device-pixel-ratio: 2),(min-resolution: 192dpi),(min-resolution: 2dppx)"></div>
<noscript>
<img src="img/SonSet_MockupTrans.jpg" alt="" />
</noscript>
</div>
</div>
<!-- SonSet 3 -->
<div class="page-desc sub"><h2><strong>Design Specification</strong></h2>
<p>We made a few changes. A darker UI gave our system better contrast and visibility. We also incorporated feedback notifications to update users on the status of their actions.</p>
</div>
<div class="image">
<div data-picture>
<div data-src="img/SonSet_Mockup2.jpg"></div>
<div data-src="img/SonSet_Mockup2.jpg" data-media="(-webkit-min-device-pixel-ratio: 2),(min--moz-device-pixel-ratio: 2),(-o-min-device-pixel-ratio: 2/1),(min-device-pixel-ratio: 2),(min-resolution: 192dpi),(min-resolution: 2dppx)"></div>
<noscript>
<img src="img/SonSet_Mockup2.jpg" alt="" />
</noscript>
</div>
</div>
<!-- SonSet 4 -->
<div class="page-desc sub"><h2><strong>Add Credits</strong></h2>
</div>
<div class="page-desc center" style="padding-bottom:0;">
<div class="row mid">
<img src="img/Credit.gif" alt="Offer">
</div>
</div>
<!-- SonSet 5 -->
<div class="page-desc sub"><h2><strong>Download Bible</strong></h2>
</div>
<div class="page-desc center" style="padding-bottom:0;">
<div class="row mid" >
<img src="img/Download.gif" alt="Offer">
</div>
</div>
<!-- SonSet 6 -->
<div class="page-desc sub"><h2><strong>Import Local Content</strong></h2>
</div>
<div class="page-desc center" style="padding-bottom:0;">
<div class="row mid">
<img src="img/Import.gif" alt="Offer">
</div>
</div>
<!-- SonSet 7 -->
<div class="page-desc sub"><h2><strong>Write to SD Card</strong></h2>
</div>
<div class="page-desc center" style="padding-bottom:0;">
<div class="row mid">
<img src="img/Write.gif" alt="Offer">
</div>
</div>
<!-- SonSet 8 -->
<div class="page-desc sub"><h2><strong>Status</strong></h2>
<p>We successfully delivered the first version of the application to our client and handed off our project to next year's capstone team! </p>
</div>
</div>
</article>
</section> <!--END .site-content-->
<nav role="navigation">
<ul class="cd-pagination animated-buttons custom-icons">
<li class="button"><a href="barter.html"><i>Prev</i></a></li>
<li class="button-main"><a href="index.html"><i>Portfolio</i></a></li>
<li class="button"><a href="compassion.html"><i>Next</i></a></li>
</ul>
</nav> <!-- cd-pagination-wrapper -->
<footer class="site-footer cf page-desc">
<p class="footer-text">Created by Eliane Zalewski </p>
</footer>
</div> <!--END .site-container-->
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/jquery.fitvids.js"></script>
<script src="scripts/jquery.imagesloaded.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>