-
Notifications
You must be signed in to change notification settings - Fork 0
/
info.html
252 lines (216 loc) · 13.7 KB
/
info.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
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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="en">
<head>
<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="">
<meta name="author" content="">
<title>Digital Globe - Information</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/content-theme.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-40159744-2', 'auto');
ga('send', 'pageview');
</script>
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="pull-left"><img src="assets/info/logo-globe.png" class="nav-logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a href="index.html">View Globe</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#survey">Survey</a>
</li>
<li>
<a class="page-scroll" href="#credits">Credits</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<h1>Digital Globe</h1>
<p>The Digital Globe is a project by <a href="https://51degrees.com/" target="_blank" class="textLink">51Degrees</a> and <a href="http://awaystudios.com/" target="_blank" class="textLink">Away Studios</a> that explores the delivery of native application experiences and data visualisations directly in your mobile web browser.</p>
<a class="btn btn-default page-scroll" href="#about">Find out more</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>About this project</h2>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
What do the cones mean?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>The cones are located at geographic positions where web activity has been observed from devices manufactured by the selected vendor. The width and height of the cone is a relative indicator of the percentage of web activity attributable to the vendor at the location and selected time. The wider and higher the cone the more popular the vendor. As time is a factor in the percentage calculation the cone will typically reduce during the night time hours and grow during the day.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Where does the data come from?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>51Degrees provide web site optimisation and analytics services to millions of web sites and businesses. Some of these web sites share anonymous usage information. Over 30,000,000,000 data points were aggregated in 2014. The Digital Globe contains aggregated data from November 2014 to February 2015 inclusive.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
How is the user interface generated?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>The Away Foundation builds & maintains free open source software resources for use in graphics-rich applications on the Web. The Digital Globe uses a new accelerated graphics library called AwayJS, the latest to be produced by The Away Foundation. AwayJS implements a Web API known as WebGL that is rapidly becoming a graphics standard for many web-enabled devices, including the latest iOS and Android platforms. By leveraging the power of WebGL, AwayJS is able to offer lightening-fast graphics rendering in a browser, with compatibility across a wide range of devices. This makes real-time data visualisations such as those see here a realistic prospect for future browser-based apps.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Is it really all done in a web browser?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<p>Yes. The project demonstrates that all main stream web devices can now deliver native application experiences in a web browser. This technology has 2 key advantages over native apps.</p>
<ol>
<li>The cost of developing applications will reduce as separate versions won’t be needed for each different type of device and operating system. One version will run everywhere.</li>
<li>Loading applications will be as simple as accessing a web address. No need for app stores.</li>
</ol>
<p>These advantages will have a profound impact on the mobile web and application business model over the next few years. You saw it here first.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
What is the purpose of the project?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<p>Over the past few years the small screen of a smartphone has become our preferred way to quickly access information. Presenting complex data sets to such a constrained screen is a challenge. The Digital Globe explores one way an intuitive user interface can be created to generate a fantastic user experience. The proof of concept that can be used with any global data set. Technical challenges associated with aggregating and delivering large datasets to bandwidth constrained devices, supporting multiple web browsers and devices, and optimising the user interface have all been overcome. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- survey Section -->
<section id="survey" class="survey-section">
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 text-center">
<h2>Please take our survey</h2>
<p>We would really love your feedback as it would help us with the next stage of development on our path to creating a fully useable product.</p>
<p>Thank you.</p>
<a class="btn btn-default page-scroll" href="https://s.on-device.com/w/bfht5?ts=preview" target="_blank">Take The Survey</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="credits" class="credits-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<p>This project was produced by:</p>
</div>
</div>
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-3">
<a href="https://51degrees.com/" target="_blank"><img src="assets/info/logo-51degrees.png" /></a>
</div>
<div class="col-lg-3">
<a href="http://awaystudios.com/" target="_blank"><img src="assets/info/logo-away.png" /></a>
</div>
<div class="col-lg-3">
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="js/jquery-1.10.2.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>
</html>