-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgoogle-1.html
150 lines (147 loc) · 10.9 KB
/
google-1.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>google editor 💻</title>
<link rel="icon" href="assets/img/cowboy.png">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body class="text-center" style="height: 400px;margin: 20px 0px ;">
<div></div>
<div>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-6">
<h5 class="text-left header" style="padding: 20px;"><a href="index.html">by: sona dolasia</a></h5>
</div>
<div class="col-sm-4">
<h5 class="text-right body" style="padding: 30px;"><span style="text-decoration: underline;"><a href="about.html">about</a></span> <span style="text-decoration: underline;"><a href="index.html">work</a></span> <span style="text-decoration: underline;"><a href="mailto:[email protected]" target="_top">contact</a></span></h5>
</div>
<div class="col-sm-1"></div>
</div>
</div>
</div>
<h1 class="text-center">💻 </h1>
<h1 class="text-center">google editor</h1>
<h3 class="display-3 text-center header" style="margin: 10px 0px 10px;">imagining a google drive collaborative code editor</h3>
<h3 class="display-3 text-center caption" style="margin: 0px 0px 20px;">*project not affiliated with google ;'(</h3><img class="shadow" src="assets/img/google.gif" style="height: 350px;margin: 20px 0px;">
<div class="text-center" style="padding: 0px 0px;">
<!-- <h5 class="text-center" style="margin: 0px 0px 0px 0px;font-size: 24px;">details</h5> -->
<div class="row">
<!-- <div class="col-md-6 text-right text-sm-right text-md-right text-lg-right text-xl-right" style="padding: 0px;">
<p class="text-left body" style="margin: 0px 0px 0px 170px;font-weight: normal;padding: 10px 0px;width: 400px;"><em>overview:</em> designing a collaborative code editor based in the google drive suite for computer science education </p>
</div> -->
<div class="col-3">
<h5 class="text-right" style="margin: 50px 10px 10px 0px;font-size: 24px;">details</h5>
</div>
<div class="col-8 text-left">
<p class="body" style="margin: 50px 0px 10px 50px; font-weight: normal;padding: 0px 10px;"><em>team:</em> sona dolasia + <a href="https://www.ivyn.co/"><span style="text-decoration: underline;">ivy nguyen</span></a> </p>
<p class="body" style="margin: 0px 50px;font-weight: normal;padding: 10px 10px;"><em>timeline:</em> april - may 2019</p>
<p class="body" style="margin: 0px 90px 0px 50px;font-weight: normal;padding: 10px 10px;"><em>deliverables:</em> high fidelity prototypes in figma, user research report, competitive analysis</p>
<!-- <button class="btn active btn-sm text-left text-dark border rounded-0 border-dark body" type="button" style="padding: 10px 50px;color: rgb(33,37,41);margin: 30px 0px 10px 60px;">view full case study</button> -->
</div>
</div>
<!-- </div><button class="btn active btn-sm text-left text-dark border rounded-0 border-dark body" type="button" style="padding: 10px 50px;color: rgb(33,37,41);margin: 40px 0px 0px 0px;">view full case study</button> -->
<!-- <h5 class="text-center" style="margin: 50px 0px 10px 0px;font-size: 24px;">the short story</h5>
<h6 class="text-center body" style="margin: 0px 0px 10px 0px;">a 6 minute abridged case study</h6> -->
<div class="row">
<div class="col-3">
<h5 class="text-right" style="margin: 50px 10px 10px 0px;font-size: 24px;">context</h5>
</div>
<div class="col-8">
<p class="text-left body" style="padding: 0px 10px;margin: 50px 0px 10px 50px;width: 700px;">As project partners in CS 188, Ivy and I had trouble working collaboratively and simultaniously understanding the material equally.</p>
<p class="text-left body" style="padding: 0px 10px;margin: 20px 0px 10px 50px;width: 700px;">We tried several different platforms advertising collaborative coding, but each was missing features we desired. </p>
<p class="text-left body" style="padding: 0px 10px;margin: 20px 0px 0px 50px;width: 700px;">After attempting to use google docs, we started imagining what a collaborative code editor might look like if it was a part of the Google Drive suite. </p>
</div>
</div>
<div class="row">
<div class="col-3">
<h5 class="text-right header" style="margin: 50px 10px 10px 0px;">research</h5>
</div>
<div class="col-8 text-left" style="margin: 0px 0px 0px 50px;">
<p class="text-left body" style="padding: 10px 10px;margin: 50px 0px 10px 0px;width: 700px;">We began by brainstorming a list of features we wanted in a collaborative code editor, and then compared it with exisiting products.</p>
<p class="text-left subheader" style="margin: 0px;padding: 10px;">competive analysis </p><img src="assets/img/Competitive%20Analysis.png" style="margin: 10px 0px;width: 800px;">
<p class="subheader"style="margin: 30px 0px 0px 10px;">research questions</p>
<p style="padding: 10px 0px;margin: 0px 0px 0px 10px;font-size: 16px;width: 700px;">We compiled a question guide and interviewed both students and educators to learn more about the role of collaboration in CS eduacation. </p>
</div>
</div>
<!-- <div class="row">
<div class="col-3"></div>
<div class="col-3" style="margin: 10px 0px 0px 50px;">
<h5 class="text-center subheader" style="padding: 20px;">cs students </h5>
<ul class="text-left body">
<li>How have you worked on group CS projects in the past?</li>
<li>What tools do you use when coding with others?</li>
<li>Do you feel that work is equally shared when using those tools?</li>
<li>How is your understanding of CS material affected by working with others?</li>
</ul>
</div>
<div class="col-3" style="margin: 10px 0px 0px 0px;">
<h5 class="text-center subheader" style="padding: 20px;">cs educators </h5>
<ul class="text-left body">
<li>how do you explain CS concepts to students?</li>
<li>for group projects, how do you judge whether everyone has done equal work? </li>
<li>what value does collaboration play in CS education?</li>
</ul>
</div>
</div> -->
<div class="row">
<div class="col-3">
<h5 class="text-right header" style="margin: 50px 0px 10px 0px;">insights</h5>
</div>
<div class="col-8 text-left">
<p class="text-left body" style="padding: 0px 10px;margin: 50px 0px 10px 50px;width: 700px;">These were some students (left) and professors' (right) insights when we questioned them about the value of collaboration in CS: </p>
<img src="assets/img/Research%20Quotes.png" style="margin: 20px 0px 10px 60px;width: 700px;">
</div>
</div>
<div class="row">
<div class="col-3 text-right">
<h5 class="header" style="margin: 50px 0px 10px 0px;">low fidelity</h5>
</div>
<div class="col-8 text-left"><img class="shadow" src="assets/img/lofi-1.jpeg" style="width: 500px;margin: 50px 0px 10px 60px;"><p class="body" style="margin: 20px 0px 10px 60px;">initial sketches of the product</p></div>
</div>
<div class="row">
<div class="col-3 text-right">
<h5 class="header" style="margin: 50px 0px 10px 0px;">mid fidelity</h5>
</div>
<div class="col-9 text-left"><img class="shadow" src="assets/img/Mid%20Fidelity.png" style="width: 700px;margin: 50px 0px 10px 60px;"></div>
</div>
<div class="row">
<div class="col-3 text-right">
<h5 class"header" style="margin: 50px 0px 10px 0px;">high fidelity</h5>
</div>
<div class="col-9 text-left"><img src="assets/img/Cover%20Sheet.png" style="width: 800px;margin: 50px 0px 10px 60px;"><img src="assets/img/Style%20Guide.png" style="width: 800px;margin: 50px 0px 10px 60px;">
<p class="body" style="margin: 0px 0px 10px 60px;">branding + style guide</p><img class="shadow" src="assets/img/Start%20Screen.png" style="width: 800px;margin: 50px 0px 10px 60px;">
<p class="body" style="margin: 20px 0px 10px 60px;">homepage</p><img class="shadow" src="assets/img/Highlight.png" style="width: 800px;margin: 50px 0px 10px 60px;">
<p class="body" style="margin: 20px 0px 10px 60px;">functionality to see where others are highlighting </p><img class="shadow" src="assets/img/Comment.png" style="width: 800px;margin: 50px 0px 10px 60px;">
<p class="body" style="margin: 20px 0px 10px 60px;">comment functionality and see collaborators comments</p><img class="shadow" src="assets/img/Auto%20Complete.png" style="width: 800px;margin: 50px 0px 10px 60px;">
<p class="body" style="margin: 20px 0px 10px 60px;">autocomplete with exisitng methods and language typechecking </p>
</div>
</div>
<div class="row">
<div class="col-3 text-right">
<h5 class="header" style="margin: 50px 0px 10px 0px;">reflection</h5>
</div>
<div class="col-9 text-left">
<p class="body" style="margin: 50px 0px 10px 60px;padding: 0px 0px;width: 700px;">This was a side project completed predominantly while procrastinating studying for finals. We came up with the idea early in the semester, but couldn't seem to find the time to work on it.</p>
<p class="body" style="margin: 20px 0px 10px 60px;padding: 0px 0px;width: 700px;">Google Drive already has a cohesive design aesthetic throughout its products. We wanted to maintain this, providing users with a seamless and familiar experience, but also add new elements that still fit. </p>
<p class="body" style="margin: 20px 0px 10px 60px;padding: 0px 0px;width: 700px;">Continuing this project, we are working on developing a Chrome extension to enable some of these features on Google Docs. We also are curious how a built-in terminal would look, seeing your code run alongside whomever else is on the document.</p>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col" style="margin: 100px 0px 30px 0px;">
<h5 class="display-4 text-left header" style="padding: 20px;">© sona dolasia, 2019</h5>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>