forked from zmon/Code-for-America-Projects-Hub
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCfAprojectPage.htm
221 lines (201 loc) · 13.1 KB
/
CfAprojectPage.htm
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
index.html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Code for America. Project Page.">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Project Page. Code for America.</title>
<!-- Bootstrap relase 3 core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Project Hub custom styles -->
<link href="css/cfa-projects-hub.css" rel="stylesheet">
<!-- Project Page custom styles -->
<link href="css/cfa-project-page.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<ul class="list-unstyled OK-btn-edit-project">
<li><a href="https://docs.google.com/forms/d/1e1Ne69Dw7Pooicb9dTOEH49KvjQv1_x2F9q8tr27loI/viewform">Edit Project Description</a></li>
</ul>
<header class="container">
<div class="row">
<div class="col-xs-3 col-lg-2">
<img class="OK-logo" src="images/CfA_logo_132x53.png" width="132" height="53" alt="Code for America ">
<br><br>
<button type="button" onClick="location.href='index.html'" class="btn btn-primary btn-xs">Back to Projects Hub</button>
</div>
<div class="col-xs-9 col-lg-6">
<span class="OK-project-tag">project:</span>
<h1>Projects Hub <br />
<small>and where you can help</small>
</h1>
<ul class="list-inline list-unstyled">
<!-- project metadata -->
<li class="OK-tag bg-CfA" title="Civic category">Code for America Brigade Tool</li>
<li class="OK-tag bg-gray" title="Platform">Web App</li>
<li class="OK-tag bg-lightgray" title="Link to online product">Online: <a href="http://codeforkc.org/Code-for-America-Projects-Hub/prototype/index.html">Prototype</a></li>
</ul>
</div>
</div>
</header>
<!-- project cover image -->
<section class="OK-project-page-cover-img" style="background:url(https://cloud.githubusercontent.com/assets/10410203/6722601/93e5bc5c-cdaa-11e4-9011-58be0c02923a.png); background-size: cover;
background-position:top center;">
<!-- list of deployed cities, or country, or global. examples: Kansas City, San Francisco, USA, Global -->
<ul class="list-inline list-unstyled text-center">
<li>Developed in:</li>
<li>Kansas City</li>
</ul>
</section>
<!-- project social badges -->
<div class="container">
<div class="row">
<section class="OK-project-badges clearfix">
<ul class="list-inline list-unstyled clearfix">
<li title="Project stars on GitHub"><span class="glyphicon glyphicon-star OK-star-gold"></span> Starred by <span class="badge OK-badge-inverse">21</span></li>
<li title="Project followers on GitHub"><span class="glyphicon glyphicon-eye-open"></span> Watched by <span class="badge OK-badge-inverse">17</span></li>
<li><a hrer="https://github.com/codeforkansascity/Code-for-America-Projects-Hub/issues/21" title="View project's comments"><span class="glyphicon glyphicon-comment"></span></a><span class="badge OK-badge-inverse">32</li>
<li><span class="glyphicon glyphicon-hand-up" title="Project requested by civic organization"></span></a> Requested by Code for America brigade</li>
<li><span class="glyphicon glyphicon-ok" title="Project validated by research"></span> Validated by user research</li>
</ul>
</section>
</div>
</div>
<!-- project contributors -->
<div class="container">
<div class="row">
<section class="OK-project-contributors clearfix">
<a href="https://github.com/codeforkansascity/Code-for-America-Projects-Hub/graphs/contributors" title="Project contributors">
<ul class="list-inline list-unstyled OK-project-contributors-thumbs pull-left">
<li><img src="https://avatars2.githubusercontent.com/u/10410203?v=3&s=460" class="img-circle" width="40" height="40" alt="Project contributor"><span class="glyphicon glyphicon-flag OK-project-leader-badge" title="Project leader"></span></li>
<li><img src="https://avatars1.githubusercontent.com/u/447024?v=3&s=460" class="img-circle" width="40" height="40" alt="Project contributor"></li>
<li><img src="https://avatars1.githubusercontent.com/u/212227?v=3&s=460" class="img-circle" width="40" height="40" alt="Project contributor"></li>
<li><img src="https://avatars3.githubusercontent.com/u/3280502?v=3&s=460" class="img-circle" width="40" height="40" alt="Project contributor"></li>
<li><img src="https://avatars0.githubusercontent.com/u/2244915?v=3&s=460" class="img-circle" width="40" height="40" alt="Project contributor"></li>
</ul>
</a>
</section>
</div>
</div>
<!-- project definition -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 OK-project-definition-card OK-pdc-goals">
<span class="glyphicon glyphicon-send OK-pdcard-glyphicon"></span>
<h3>Goals</h3>
<p>Help brigade members to find projects to work on. <br>
Promote multi-brigade collaboration. <br>
New members onboarding. <br>
Let public contribute ideas. <br>
Karma. <br>
Code for America scope view. <br>
Provide filtered and sorted card list of projects and ideas for development. <br>
The list should be available nation-wide and by city. </p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 OK-project-definition-card OK-pdc-audience">
<span class="glyphicon glyphicon-user OK-pdcard-glyphicon"></span>
<h3>Target Audience</h3>
<p>1. New brigade members<br>
2. Established brigade members<br>
3. Brigades across the nation<br>
4. Civic-minded public
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 OK-project-definition-card OK-project-definition-card-tall OK-pdc-story pull-right">
<span class="glyphicon glyphicon-list-alt OK-pdcard-glyphicon"></span>
<h3>User Stories</h3>
<p>Dave is a member of brigade living in Kansas City. He does not have time to follow the latest developments in the brigade on a daily basis. He would like to choose where he can apply his skills for a few hours during Monday hack night. Dave does not need to see project details, rather where the help is needed. He opens Projects Hub and chooses an active project with relevant Help Wanted issues, where he can contribute.</p>
<p>Ashley has a great idea about building up community spaces in Kansas City. She does not know how to build an app for it, and thinks Code for America might help. Ashley opens the Projects Hub, filters Community projects and sees that similar, but not quite the same project is under development in Munich, Germany. She presses the big blue button on the Projects Hub and adds the idea for KC brigade to develop.</p>
<p>Kevin, DB admin at MicroBucks, Inc., has found out about Code for America on a date with Ashley. He is curious about Ashley and the idea behind civic coding, and would like to learn more about both. He also would like to improve his JavaScript skills. Kevin opens the ProjectsHub, finds all the projects in Kansas City, where Javascript help is wanted. One of them has Ashley as a contributor. Kevin chooses to work on this project.</p>
<p>Jim, is geomapping guru, has been out of work for a few months. He is looking for a challenging project to showcase his skills and to build up his portfolio. He finds one under development in Buenos Aires brigade.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 OK-project-definition-card OK-pdc-maintenance">
<span class="glyphicon glyphicon-wrench OK-pdcard-glyphicon"></span>
<h3>Maintenance Plan</h3>
<p>Project leaders for active projects will be able to keep the the data updated on GitHub, using the usual GitHub tools. Additional requirement for GitHub is making custom set of GitHub repo labels (see <a href="https://github.com/codeforkansascity/Code-for-America-Projects-Hub/issues/8">Custom Labels for Repos</a> on GitHub). </p>
<p>
Project Definition information can be updated either via Google form, when the project is created, or via Google miniforms, once project is established, or by editing Google spreasheet directly.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 OK-project-definition-card OK-pdc-blockers">
<span class="glyphicon glyphicon-save OK-pdcard-glyphicon OK-rotate-270-clockwise"></span>
<h3>Potential Blockers</h3>
<p>Maintanence related blockers: The workflow for updating project information in Google spreadsheet is clumsy (Google form does not pull data back from the spreadsheet, if data exists already).</p>
<p>The initial effort of creating custom repo labels and then applying them to repo issue, when the issue is created requires some discipline from project leader. </p>
</div>
</div>
<!-- code cards -->
<div class="row">
<h2>Development</h2>
<div class="col-xs-12 col-sm-12 col-md-4 OK-project-definition-card OK-pdc-progress">
<span class="glyphicon glyphicon-tasks OK-pdcard-glyphicon OK-rotate-180-clockwise"></span>
<h3>Progress</h3>
<p><span class="OK-tag bg-gray">Definition</span>
<span class="bg-white">research</span>
<span class="bg-white">workflow</span>
<span class="bg-white">information architecture</span>
<span class="bg-white">wireframes</span>
<span class="bg-yellow">visual design</span>
<span class="bg-yellow">prototype</span>
</p>
<p><span class="OK-tag bg-gray">Code</span>
<span class="bg-yellow">HTML/CSS</span>
<span class="bg-yellow">Javascript</span>
</p>
<p><span class="OK-tag bg-gray">Data</span>
<span class="bg-yellow">data entry</span>
</p>
<p><span class="OK-tag bg-gray">Analysis</span>
<span class="bg-yellow">usability</span>
</p>
<hr />
<p><span class="bg-white">done</span> <span class="bg-yellow">in the works</span></p>
<!-- project on hold banner (hidden for active projects
<p class="OK-project-onhold-message">On Hold<br>
Reason: to demonstrate On Hold banner</p>
-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 OK-project-definition-card OK-pdc-help">
<span class="glyphicon glyphicon-fire OK-pdcard-glyphicon"></span>
<h3>Help Wanted</h3>
<p><a title="View issue on GitHub" href="https://github.com/codeforkansascity/Code-for-America-Projects-Hub/issues/17">Projects Hub filter. Where does the data come from?</a></p>
<p><a title="View issue on GitHub" href="https://github.com/codeforkansascity/Code-for-America-Projects-Hub/issues/16">Script to display entered project data from Google spreadsheet in Google form to edit the data</a></p>
<p><a title="View issue on GitHub" href="https://github.com/codeforkansascity/Code-for-America-Projects-Hub/issues/11">Add infinite scroll to the hub</a></p>
<p><a title="View issue on GitHub" href="https://github.com/codeforkansascity/Code-for-America-Projects-Hub/issues/7">Usability evaluation</a></p>
<p><a title="View issue on GitHub" href="https://github.com/codeforkansascity/Code-for-America-Projects-Hub/issues/9">Project card data. Where does the data come from?</a></p>
<p><a title="View issue on GitHub" href="https://github.com/codeforkansascity/Code-for-America-Projects-Hub/issues/6">Coding projects filter</a></p>
<p><a title="View issue on GitHub" href="https://github.com/codeforkansascity/Code-for-America-Projects-Hub/issues/4">Map geolocation filter</a></p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 OK-project-definition-card OK-pdc-code">
<span class="glyphicon OK-pdcard-glyphicon"></></span>
<h3>Code used so far</h3>
<p>HTML/CSS, Javascript, Bootstrap
</p>
</div>
</div>
</div>
<footer class="container">
<div class="row">
<div class="col-xs-3 col-lg-2">
<img class="OK-logo" src="images/CfA_logo_132x53.png" width="132" height="53" alt="Code for America ">
<br><br>
<button type="button" onClick="location.href='index.html'" class="btn btn-primary btn-xs">Back to Projects Hub</button>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>