-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
245 lines (197 loc) · 10.1 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
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
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Southampton Python</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!--Sets all links to open in a new tab-->
<base target="_blank">
<style type="text/css">
.link-btn{
margin-top: 27px;
}
.centre-panel {
text-align: center;
}
.panel-logo {
display: block;
margin: 5px auto;
width: 120px;
}
</style>
<!-- HTML5 shim and Respond.js for 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/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>
<div class="navbar navbar-inverse" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-info" aria-expanded="false">
<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="" class="navbar-brand" target="_self">SPUG <small>Southampton Python Users Group</small></a>
</div>
<!--Dropdown menu for important links-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Links<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://groups.google.com/forum/#!members/southampton-python-user-group">Google Group</a></li>
<li><a href="https://github.com/southampton-python">Github Page</a></li>
<li><a href="https://southampton-python.slack.com">Slack Page</a></li>
</ul>
</li>
</ul>
</div> <!-- end of collapsable content -->
</div> <!--End of containter-->
</div> <!--End of navbar-->
<div class = "container">
<div class="jumbotron">
<img src="logos/python-snakes.png" style="float:right; width: 150px"/>
<h1>SPUG <small>Southampton Python Users Group</small></h1>
<p> <small>Southampton Python Users Group (SPUG) is a general users group for all things Python. We're based at the University of Southampton, but everyone is welcome. We usually have an invited guest speaker once a month to lead a session. We communicate through a mailing list and a Slack chat room. SPUG is open to absolutely anyone who is interested in Python regardless of experience or level. </small></p>
</div>
<div id="div2" class="main-div">
<div style="float:right;">
<a href="previously.html" style="font-size: 160%">Previous talks »</a>
</div>
<h2>Upcoming Talk</h2>
<div class = "row">
<div class="col-md-6">
<div class="list-group">
<div class="list-group-item">
<h3 class="list-group-item-heading">
Visualising data interactively
</h3>
<p class="list-group-item-text">
Compelling data visualisations are an essential way to make complex information more understandable. They can be used to provide valuable insights by enabling both exploratory and explanatory analysis. Even though there are a large number of python visualisation tools, not many of them can be used to create interactive visualisations. Interactive visualisations allow the viewer to be part of the visualising process by constructing a narrative of their choosing. Also, they typically have a higher engagement time frame than static visualisations.
Unfortunately, creating easily accessible and interactive visualisations with Python can be quite challenging. Some Python tools can be used to create and share interactive applications similar to dashboards and GUIs created using commercial software. In this talk, I shall discuss tools and techniques, particularly the dash framework, for building and sharing web-based interactive visualisations.
</p>
</div>
<div class="list-group-item" style="min-height: 300px; vertical-align: top; text-align: center">
<img src="images/nana.jpg" style="float: center; width: 192px" />
<p></p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">Who</h4>
<p class="list-group-item-text">Nana Abankwa</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">When</h4>
<p class="list-group-item-text">6pm–7.00pm, 28th February 2018</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">Where</h4>
<p class="list-group-item-text">
Southampton University, Highfield Campus, building 6 (Nuffield theatre), room 1077
(<a href="http://maps.southampton.ac.uk/#17/50.93540/-1.39640">map</a>)
</p>
</div>
</div>
</div>
<!--<div class="col-md-6">
<div class="list-group">
<div class="list-group-item">
<h4 class="list-group-item-heading">Title</h4>
<p class="list-group-item-text">—</p>
</div>
<div class="list-group-item" style="min-height: 300px; vertical-align: top;">
<h4 class="list-group-item-heading">Description</h4>
<p class="list-group-item-text">—</p>
<div id=imagecontainer style="height: 100px; display: flex; justify-content: center;">
<!- Use the CSS:
style="position: relative; transform: translateY(-50%); top: 50%;"
in an img include, in order to vertically centre the image within the div with id=imagecontainer.
You'll probably need to adjust the height of the parent div to get it to look correct.
->
</div>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">Who</h4>
<p class="list-group-item-text">—</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">When</h4>
<p class="list-group-item-text">—</p>
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">Where</h4>
<p class="list-group-item-text">—</p>
</div>
</div>
</div>-->
</div> <!-- End of talks row -->
</div> <!-- End of talks div -->
<div id="div3" class="main-div">
<h2>Get involved</h2>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
Google Group
</div>
<div class = "panel-body centre-panel">
<p><a href="https://groups.google.com/forum/#!forum/southampton-python-user-group">
<img src="logos/tango_newmail.png" class="panel-logo"/>
Google Group
</a></p>
<p>Sign up for our mailing list to hear about upcoming talks.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
Slack Channel
</div>
<div class = "panel-body centre-panel">
<p><a href="https://southampton-python.slack.com">
<img src="logos/Slack_Mark_Web.png" class="panel-logo"/>
Slack Group
</a></p>
<p>
In our chat room, we ask and answer questions, arrange meetings, and share our knowledge.
</p><p>
You can sign up directly with a <em>soton.ac.uk</em> email address.
Otherwise, we'll be happy to invite you if you send us a message in the Google Group.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
Github page
</div>
<div class = "panel-body centre-panel">
<p><a href="https://github.com/southampton-python">
<img src="logos/github_mark.png" class="panel-logo"/>
southampton-python
</a></p>
<p>Code and materials from our talks can be found on GitHub, along with the source of this website! It's all freely accessible to anyone.</p>
</div>
</div>
</div>
</div>
</div>
</div> <!--End of container-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>