-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
230 lines (221 loc) · 14.2 KB
/
index.html
File metadata and controls
230 lines (221 loc) · 14.2 KB
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
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome – TogetherNet</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Intro logo and stars -->
<div class="intro">
<div class="inner">
<div>
<img alt="white and curvy TogetherNet logo sits on top of a grainy dark blue background that is scattered by light blue, pixelated constellations." src="assets/icons/togethernet_logo.svg">
<p>Consentful tech for micro-communities</p>
</div>
</div>
</div>
<!-- Page Container -->
<div class="page">
<!-- <a href="#main" class="screenreader-text">skip to main content</a> -->
<!-- Navigation and intro with stars -->
<nav class="navigation">
<!-- Mobile Nav trigger -->
<button class="btn-nav-trigger" tabindex="0" aria-label='Navigation and Accessibility' aria-expanded="false" id="mobile-nav-trigger">
<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="13.6426" y1="29.142" x2="13.6426" y2="0.857921" stroke="#EDECE9"/>
<line y1="14.4999" x2="28.2841" y2="14.4999" stroke="#EDECE9"/>
</svg>
</button>
<!-- Global Navigation -->
<ul class="global-nav">
<li><a href="/">Welcome</a></li>
<li><a href="./getting-started.html">Getting Started</a></li>
<li><a href="./code-of-consent.html">Code of Consent</a></li>
<li><a href="./orientation.html">Software Orientation</a></li>
<li><a href="./community.html">Join the Community</a></li>
<li><a href="./accessibility-statement.html">Accessibility Statement</a></li>
<li><a href="https://github.com/together-support/togethernet">Download</a></li>
</ul>
<!-- Accessibility Settings -->
<div class="setting-toggles">
<form class="setting">
<p>Audio Mode:</p>
<fieldset>
<div class="twoCol">
<div class='option'>
<input type="radio" id="show-audio-off" name="contrast" value="off" checked><label for="show-audio-off">Off</label>
</div>
<div class='option'>
<input type="radio" id="show-audio-on" name="contrast" value="on"><label for="show-audio-on">On</label>
</div>
</div>
</fieldset>
</form>
<form class="setting">
<p>High Contrast Mode:</p>
<fieldset>
<div class="twoCol">
<div class='option'>
<input type="radio" id="high-contrast-off" name="contrast" value="off" checked><label for="high-contrast-off">Off</label>
</div>
<div class='option'>
<input type="radio" id="high-contrast-on" name="contrast" value="on"><label for="high-contrast-on">On</label>
</div>
</div>
</fieldset>
</form>
</div>
</nav>
<div id="left-sticky">
<!-- In Page Navigation -->
<ul class="in-page-navigation">
<li><a href="#section-1">Welcome!</a></li>
<li><a href="#section-2">1.1 What is TogetherNet?</a></li>
<li><a href="#section-3">1.2 How does it work?</a></li>
<li><a href="#section-4">1.3 Is TogetherNet for Me?</a></li>
</ul>
</div>
<!-- Page content -->
<main id="main">
<section id="section-1"><!-- Section with id for anchor link -->
<hr class="star-border"> <!-- Star horizontal rule -->
<h1>Welcome!</h1>
<div class="audio">
<p>Listen to this section:</p>
<audio controls>
<source src="assets/audio/1.0_TogetherNetWebRecording.mp3" type="audio/mpeg"> Your browser does not support the
audio element.
</audio>
</div>
<p>Hi! Thank you for visiting TogetherNet's website – we are thrilled to have you here. We have designed this site with you in mind. Before diving deeper, we invite you to learn about a couple possible ways to navigate this website:</p>
<h3>Audio</h3>
<ul>
<li>If you prefer listening to the recorded version of this site, press the "+" icon on the upper right to pull up a menu that includes the site navigation along with an option to turn on the Audio Mode. Playable audio clips will appear under every section of the web pages. Note that we use cookies to store your accessibility preference.</li>
<li>Alternatively, you may visit our <a href="https://soundcloud.com/xin-xin-861764591/togethernet-website-voiceover">SoundCloud page</a> to listen to an uncut recording of the entire site.</li>
</ul>
<h3>Visual</h3>
<ul>
<li>If you prefer viewing this website in black and white, press the "+" icon on the upper right to pull up a menu that includes the site navigation along with an option to turn on the High Contrast Mode.</li>
</ul>
<h3>Text-Only</h3>
<ul>
<li>We have also rendered this site into text-only documents, hosted on <a href="https://docs.google.com/document/d/1OS5cEJ4pCHlJe_MWzRHbakDHryMEl16idzZd68aOEvk/edit?usp=sharing"> Google
Doc</a> and downloadable as a <a href="./assets/accessibility/TogethernetWebsiteText-OnlyVersion.pdf">PDF</a>.</li>
</ul>
<h3>Accessibility Statement and VPAT</h3>
<p>This website was designed and tested with accessibility in mind. Check out our <a href="accessibility-statement.html">Accessibility Statement page</a>, which
includes a Voluntary Product Accessibility Template (VPAT).
We understand that access needs are nuanced, intersectional and expansive, and we welcome you reaching out to ask a question or make an accessibility request.</p>
<address><a class="button" href="mailto:support@togethernet.org">Email Us</a></address>
</section>
<section id="section-2">
<hr>
<h2>1.1 What is TogetherNet?</h2>
<div class="audio">
<p>Listen to this section:</p>
<audio controls>
<source src="assets/audio/1.1_TogetherNetWebRecording.mp3" type="audio/mpeg"> Your browser does not support the
audio element.
</audio>
</div>
<p>TogetherNet is an open-source software that invites groups of 10 or fewer participants to build community archives through practices of consent.</p>
<p>Designed around the ethos of data transparency and consent, TogetherNet's goal is to transform digital rights
policies such as the <a href="https://gdpr.eu/right-to-be-forgotten/">right to be forgotten</a> into an embodied
practice through re-imagining software architecture and user experience.</p>
<p>This tool and initiative stands on the shoulders of <a href="./assets/accessibility/ConsentfulTechZineTextVersion.pdf">Consentful Tech Zine</a> by Una Lee and Dann Toliver
and <a href="https://designjustice.org/read-the-principles">Design Justice Network Principles</a> — by considering transparency and consent every step of the way, the source
code serves as both a technical and a moral document that seeks to uncover systems of power and uncertainties
embedded in network technologies.</p>
</section>
<section id="section-3">
<hr>
<h2>1.2 How does it work?</h2>
<div class="audio">
<p>Listen to this section:</p>
<audio controls>
<source src="assets/audio/1.2_TogetherNetWebRecording.mp3" type="audio/mpeg"> Your browser does not support the
audio element.
</audio>
</div>
<p>TogetherNet contains two modes of communication: the <i>Ephemeral Channel</i> and the <i>Archival Channel</i>.</p>
<h3>Ephemeral Channel</h3>
<img class="screenshot" src="assets/screenshots/ephemeralChannel.png" alt="the TogetherNet interface contains multiple panels. In the upper-left panel, the TogetherNet logo is followed by links to Code of Conduct, Code of Consent, and Orientation. In the center-left panel there is an Ephemeral Channel called 'sitting at the park' and an Archival Channel called 'posting on a bulletin board'. In the center navigation space, a user named 'xin' appears as a bright purple square avatar on a warm, orange background. A message record – 'hi!' has been left in the navigation space and appears as a purple square a shade darker than xin's avatar. In the bottom-center panel, there is a message input field for the user to write their messages." />
<p>By default, your team will communicate in the <i>Ephemeral Channel</i>, which is built on <a href="https://en.wikipedia.org/wiki/WebRTC" >WebRTC</a>, a peer-to-peer protocol that encrypts your messages.</p>
<p>When you communicate with your team using the <i>Ephemeral Channel</i>, messages are only temporarily stored inside the browsers and do not go through a centralized server. This means that
once the last participant in the room closes their browser tab, messages that your team have not archived are permanently deleted.</p>
<p class="standout">Tip: messaging in the <i>Ephemeral Channel</i> is comparable to talking to friends on a picnic blanket at the
park — your conversations won’t be heard unless someone is intentionally trying to listen in.</p>
<h3>Consent to Archive</h3>
<img class="screenshot" src="assets/screenshots/archivedMessge.png" alt="two avatars appear on the TogetherNet interface. Yaqing appears as a bright green square and Xin appears as a bright pink square in the orange navigation space. A message record – 'this is history' written by xin has been archived. The archived message record appears as a square overlaid by a mosaic pattern interlaced with bright pink and green tiles, indicating yaqing and xin's co-authorship of the message." />
<p>In order to prevent permanently losing important messages, your team will need to go through a process called <i>Consent to Archive</i>.</p>
<p><i>Consent to Archive</i> is a feature that uploads a single message or thread from inside the <i>Ephemeral Channel</i> onto a centralized database. This database may be self-hosted or hosted externally on a third party’s server.</p>
<p class="standout">Tip: once a message has been archived, participants can use the <i>Revoke Consent</i> feature to reverse their decision.</p>
<h3>Archival Channel</h3>
<img class="screenshot" src="assets/screenshots/archivalChannel.png" alt="once the user enters the archival channel, the left-side panels of TogetherNet remain the same but the center navigation space is now replaced by the archive space, colored by a background as blue as the dark sky. Archived messages are displayed on the archived interface in white-colored fonts – 'February 17 2021, #sitting-at-the-park, 1. hi! written by xin, consent to archive participants: Yaqing, Xin'. On the bottom of the interface, there is a text input field that allows the user to comment on an archived message. On the right side of the input field there is a download icon to save the archive to the computer."/>
<p>The <i>Archival Channel</i> connects to the centralized server, and displays messages that your team have archived in the form of meeting notes.</p>
<p>From here a participant has the ability to comment on an archived message. There is also an option to download the meeting notes as an HTML file.</p>
<p class="standout">Tip: using the <i>Archival Channel</i> is comparable to posting a note on a bulletin board — your words are now floating out there on the World Wide Web as a form of public record, and others may quote or use it in ways that are outside of your control. Organizations often need to create content that needs to be seen by the public and this feature is useful for that.</p>
</section>
<section id="section-4">
<hr>
<h2>1.3 Is TogetherNet for me?</h2>
<div class="audio">
<p>Listen to this section:</p>
<audio controls>
<source src="assets/audio/1.3_TogetherNetWebRecording.mp3" type="audio/mpeg"> Your browser does not support the
audio element.
</audio>
</div>
<p>TogetherNet is created with micro-communities in mind. In particular, those who work under the broad umbrella of
art, design, culture and technology. This software is for you if you are an artist, designer, community
organizer, technologist, researcher, educator, or student interested in –</p>
<ul>
<li>Exiting surveillance capitalism</li>
<li>Participating in consentful communications on the web</li>
<li>Building community-owned digital archives</li>
</ul>
<h3>Use Cases</h3>
<ul>
<li>You may be a book club, and instead of defaulting to Facebook groups, you might use TogetherNet to create a
list of books to read.</li>
<li>You may be a group of art students working on a community agreement, and instead of defaulting to Google Doc,
you might use TogetherNet to document your collective needs.</li>
<li>You may be a group of community organizers and instead of defaulting to Instagram, you might use TogetherNet
to save a list of teach-in content.</li>
</ul>
<h3>Known Vulnerabilities</h3>
<p>That said, this software is still in an experimental stage and there are known vulnerabilities. If you are someone who is looking to work with highly sensitive content or if you are concerned with targeted surveillance, we recommend you look into <a href="https://www.signal.org/">Signal</a>.</p>
</section>
<hr>
<h2>Next Chapter</h2>
<div class="audio">
<p>Listen to this section:</p>
<audio controls>
<source src="assets/audio/1.4_TogetherNetWebRecording.mp3" type="audio/mpeg"> Your browser does not support the
audio element.
</audio>
</div>
<p>If you're feeling ready to dig deeper, we invite you to proceed to the Getting Started page.</p>
<a class="button" href="getting-started.html">Ready to Get Started</a>
</main>
</div>
<!-- Footer -->
<footer>
<!-- Newsletter -->
<div class="footer-left">
</div>
<!-- Social Media -->
<div class="footer-right">
<ul class="social-media">
<li><a href="https://www.instagram.com/togethernet/"><img src="assets/icons/instagram.svg" alt="instagram" /></a></li>
<li><a href="https://discord.gg/ysJTwasuAX"><img src="assets/icons/discord.svg" alt="discord" /></a></li>
<li><a href="https://github.com/together-support/togethernet" ><img src="assets/icons/github.svg"
alt="github" /></a></li>
</ul>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>