-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
176 lines (176 loc) · 9.2 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://www.digitalinclusiontoolkit.org/">
<meta name="author" content="Digital Inclusion and Participation Toolkit project team">
<meta name="description" content="The Digital Inclusion and Participation Toolkit">
<meta property="og:site_name" content="Digital Inclusion and Participation Toolkit">
<meta property="og:title" content="The Digital Inclusion and Participation Toolkit">
<meta property="og:description" content="A method and set of open source future-looking digital and mobile tools created with and for currently under-served users">
<meta property="og:image" content="https://www.digitalinclusiontoolkit.org/css/toolkit-banner.png">
<meta property="og:image:width" content="1430">
<meta property="og:image:height" content="628">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_GB">
<meta property="og:url" content="https://www.digitalinclusiontoolkit.org/">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="The Digital Inclusion and Participation Toolkit">
<meta property="twitter:description" content="A collection of methods and open-source tools to support digital inclusion and participation">
<meta property="twitter:image" content="https://www.digitalinclusiontoolkit.org/css/toolkit-banner.png">
<meta property="twitter:url" content="https://www.digitalinclusiontoolkit.org/">
<link rel="icon" href="css/favicon.png">
<title>The Digital Inclusion and Participation Toolkit</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/flickity-1.1.1.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 shim and Respond.js 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]-->
<script src="js/flickity-1.1.1.pkgd.min.js"></script>
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner wrapper-faded">
<div class="cover-container">
<div class="masthead masthead-faded clearfix">
<div class="inner">
<a href="index.html"><h1 class="masthead-brand">The Digital Inclusion and Participation Toolkit<br></h1></a>
<ul class="nav masthead-nav">
<li><a href="/">About</a></li>
<li>
<div class="dropdown">
<button class="dropbtn">Tools</button>
<div class="dropdown-content">
<a href="/better-together/">Better Together</a>
<a href="/appropriate/">APPropriate</a>
<a href="/streetwise/">StreetWise</a>
<a href="/sustainabot/">Sustainabot</a>
<a href="/chameleon/">Chameleon</a>
<a href="/shopping-beacons/">Shopping Beacons</a>
</div>
</div>
</li>
<li><a href="/methodology.html">Methods</a></li>
</ul>
</div>
</div>
<div class="inner cover">
<div class="js-flickity" data-flickity-options='{"wrapAround": true, "autoPlay": 5000, "pageDots": true, "cellAlign": "left", "prevNextButtons": true }'>
<div class="hero-gallery__cell hero-gallery__cell--1">
</div>
<div class="hero-gallery__cell hero-gallery__cell--2">
</div>
<div class="hero-gallery__cell hero-gallery__cell--3">
</div>
<div class="hero-gallery__cell hero-gallery__cell--4">
</div>
<div class="hero-gallery__cell hero-gallery__cell--5">
</div>
<div class="hero-gallery__cell hero-gallery__cell--6">
</div>
<div class="hero-gallery__cell hero-gallery__cell--7">
</div>
</div>
<div class="content">
<h1>Designing for Innovative Digital Inclusion and Participation</h1>
<p>The Digital Inclusion and Participation Toolkit is a combination of innovation methods and open-source, future-looking digital and mobile tools created with and for currently under-served users in diverse communities in South Africa, India and Kenya.</p>
<p>This overall framework is the outcome of a four-year multi-disciplinary, multi-sited project, led by Swansea University, funded by the EPSRC and undertaken in collaboration with a range of stakeholders including IBM, Microsoft, the University of Cape Town, IIT Bombay and Google.</p>
</div>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<a href="methodology.html"><img src="img/Methodology.png" class="img-responsive"></a>
</div>
<div class="col-xs-7 col-sm-8 col-md-9 col-lg-10 col-xl-10">
<h2><a href="methodology.html">Methodology</a></h2>
<p>A key contribution of the toolkit is the methodology we used throughout the process of co-creating the resulting apps and services. Documentation is included in the reports of two separate innovation sprints.</p>
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<a href="better-together/"><img src="img/BetterTogether.png" class="img-responsive"></a>
</div>
<div class="col-xs-7 col-sm-8 col-md-9 col-lg-10 col-xl-10">
<h2><a href="better-together/">Better Together</a></h2>
Better Together is a plug-in based platform designed to disaggregate the components of complex services, allowing separate mobile phones to each represent and provide a single component of the overall interaction.
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<a href="appropriate/"><img src="img/Appropriate.png" class="img-responsive"></a>
</div>
<div class="col-xs-7 col-sm-8 col-md-9 col-lg-10 col-xl-10">
<h2><a href="appropriate/">APPropriate</a></h2>
APPropriate is a small storage device that contains the owner's digital possessions, allowing them to leave their phone behind, but pick up and use any other device at will, as if it were their own.
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<a href="streetwise/"><img src="img/Streetwise.png" class="img-responsive"></a>
</div>
<div class="col-xs-7 col-sm-8 col-md-9 col-lg-10 col-xl-10">
<h2><a href="streetwise/">StreetWise</a></h2>
StreetWise is a human-powered smart speaker system for use in public emergent-user settings. After asking a question, the user receives a code, which can be entered after 10 minutes to receive a human answer.
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<a href="sustainabot/"><img src="img/Sustainabot.png" class="img-responsive"></a>
</div>
<div class="col-xs-7 col-sm-8 col-md-9 col-lg-10 col-xl-10">
<h2><a href="sustainabot/">Sustainabot</a></h2>
Sustainabot is a small robot printer that deposits everyday materials – foodstuffs, powders and so on – on flat surfaces to create patterns and shapes directly from a mobile device.
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<a href="chameleon/"><img src="img/Chameleon.png" class="img-responsive"></a>
</div>
<div class="col-xs-7 col-sm-8 col-md-9 col-lg-10 col-xl-10">
<h2><a href="chameleon/">Chameleon</a></h2>
Chameleon devices can change colour to blend into their surroundings, while also providing subtle glowing cues for notifications that not only respect their users' privacy, but also minimise social interruption.
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-4 col-md-3 col-lg-2 col-xl-2">
<a href="shopping-beacons/"><img src="img/Beacons.png" class="img-responsive"></a>
</div>
<div class="col-xs-7 col-sm-8 col-md-9 col-lg-10 col-xl-10">
<h2><a href="shopping-beacons/">Shopping Beacons</a></h2>
Using Bluetooth low energy beacons, this system gives small businesses the ability to quickly create a simple online presence and broadcast it digitally to the local environment to attract potential customers.
</div>
</div>
</div>
</div>
<div class="mastcredits">This work was funded by EPSRC grant <a href="https://gow.epsrc.ukri.org/NGBOViewGrant.aspx?GrantRef=EP/M00421X/1">EP/M00421X/1</a></div>
<div class="mastfoot"><a href="mailto:[email protected]">Contact</a></div>
</div>
</div>
</div>
</div>
</body>
</html>