adding files
This commit is contained in:
Jeremy Kidwell
parent
a878fcf3fc
commit
131ce4af86
77 changed files with 2765 additions and 0 deletions
Binary file not shown.
703
static/files/presentations/css/impress-demo.css
Normal file
703
static/files/presentations/css/impress-demo.css
Normal file
|
|
@ -0,0 +1,703 @@
|
|||
/*
|
||||
So you like the style of impress.js demo?
|
||||
Or maybe you are just curious how it was done?
|
||||
|
||||
You couldn't find a better place to find out!
|
||||
|
||||
Welcome to the stylesheet impress.js demo presentation.
|
||||
|
||||
Please remember that it is not meant to be a part of impress.js and is
|
||||
not required by impress.js.
|
||||
I expect that anyone creating a presentation for impress.js would create
|
||||
their own set of styles.
|
||||
|
||||
But feel free to read through it and learn how to get the most of what
|
||||
impress.js provides.
|
||||
|
||||
And let me be your guide.
|
||||
|
||||
Shall we begin?
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
We start with a good ol' reset.
|
||||
That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/
|
||||
|
||||
You can probably argue if it is needed here, or not, but for sure it
|
||||
doesn't do any harm and gives us a fresh start.
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Now here is when interesting things start to appear.
|
||||
|
||||
We set up <body> styles with default font and nice gradient in the background.
|
||||
And yes, there is a lot of repetition there because of -prefixes but we don't
|
||||
want to leave anybody behind.
|
||||
*/
|
||||
body {
|
||||
font-family: 'PT Sans', sans-serif;
|
||||
min-height: 740px;
|
||||
|
||||
background: rgb(215, 215, 215);
|
||||
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
|
||||
background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
|
||||
background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
|
||||
background: -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
|
||||
background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
|
||||
background: radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
|
||||
}
|
||||
|
||||
/*
|
||||
Now let's bring some text styles back ...
|
||||
*/
|
||||
b, strong { font-weight: bold }
|
||||
i, em { font-style: italic }
|
||||
|
||||
/*
|
||||
... and give links a nice look.
|
||||
*/
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0 0.1em;
|
||||
background: rgba(255,255,255,0.5);
|
||||
text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
|
||||
border-radius: 0.2em;
|
||||
|
||||
-webkit-transition: 0.5s;
|
||||
-moz-transition: 0.5s;
|
||||
-ms-transition: 0.5s;
|
||||
-o-transition: 0.5s;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
background: rgba(255,255,255,1);
|
||||
text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
|
||||
}
|
||||
|
||||
/*
|
||||
Because the main point behind the impress.js demo is to demo impress.js
|
||||
we display a fallback message for users with browsers that don't support
|
||||
all the features required by it.
|
||||
|
||||
All of the content will be still fully accessible for them, but I want
|
||||
them to know that they are missing something - that's what the demo is
|
||||
about, isn't it?
|
||||
|
||||
And then we hide the message, when support is detected in the browser.
|
||||
*/
|
||||
|
||||
.fallback-message {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.3;
|
||||
|
||||
width: 780px;
|
||||
padding: 10px 10px 0;
|
||||
margin: 20px auto;
|
||||
|
||||
border: 1px solid #E4C652;
|
||||
border-radius: 10px;
|
||||
background: #EEDC94;
|
||||
}
|
||||
|
||||
.fallback-message p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.impress-supported .fallback-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Now let's style the presentation steps.
|
||||
|
||||
We start with basics to make sure it displays correctly in everywhere ...
|
||||
*/
|
||||
|
||||
.step {
|
||||
position: relative;
|
||||
width: 900px;
|
||||
padding: 40px;
|
||||
margin: 20px auto;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-family: 'PT Serif', georgia, serif;
|
||||
font-size: 48px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/*
|
||||
... and we enhance the styles for impress.js.
|
||||
|
||||
Basically we remove the margin and make inactive steps a little bit transparent.
|
||||
*/
|
||||
.impress-enabled .step {
|
||||
margin: 0;
|
||||
opacity: 0.3;
|
||||
|
||||
-webkit-transition: opacity 1s;
|
||||
-moz-transition: opacity 1s;
|
||||
-ms-transition: opacity 1s;
|
||||
-o-transition: opacity 1s;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.impress-enabled .step.active { opacity: 1 }
|
||||
|
||||
/*
|
||||
These 'slide' step styles were heavily inspired by HTML5 Slides:
|
||||
http://html5slides.googlecode.com/svn/trunk/styles.css
|
||||
|
||||
;)
|
||||
|
||||
They cover everything what you see on first three steps of the demo.
|
||||
*/
|
||||
.slide {
|
||||
display: block;
|
||||
|
||||
width: 900px;
|
||||
height: 700px;
|
||||
padding: 40px 60px;
|
||||
|
||||
background-color: white;
|
||||
border: 1px solid rgba(0, 0, 0, .3);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
|
||||
|
||||
color: rgb(102, 102, 102);
|
||||
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
|
||||
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.slide q {
|
||||
display: block;
|
||||
font-size: 50px;
|
||||
line-height: 72px;
|
||||
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.slide q strong {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/*
|
||||
And now we start to style each step separately.
|
||||
|
||||
I agree that this may be not the most efficient, object-oriented and
|
||||
scalable way of styling, but most of steps have quite a custom look
|
||||
and typography tricks here and there, so they had to be styled separately.
|
||||
|
||||
First is the title step with a big <h1> (no room for padding) and some
|
||||
3D positioning along Z axis.
|
||||
*/
|
||||
|
||||
#title {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#title .try {
|
||||
font-size: 64px;
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
left: 1.5em;
|
||||
|
||||
-webkit-transform: translateZ(20px);
|
||||
-moz-transform: translateZ(20px);
|
||||
-ms-transform: translateZ(20px);
|
||||
-o-transform: translateZ(20px);
|
||||
transform: translateZ(20px);
|
||||
}
|
||||
|
||||
#title h1 {
|
||||
font-size: 190px;
|
||||
|
||||
-webkit-transform: translateZ(50px);
|
||||
-moz-transform: translateZ(50px);
|
||||
-ms-transform: translateZ(50px);
|
||||
-o-transform: translateZ(50px);
|
||||
transform: translateZ(50px);
|
||||
}
|
||||
|
||||
#title .footnote {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/*
|
||||
Second step is nothing special, just a text with a link, so it doesn't need
|
||||
any special styling.
|
||||
|
||||
Let's move to 'big thoughts' with centered text and custom font sizes.
|
||||
*/
|
||||
#big {
|
||||
width: 600px;
|
||||
text-align: center;
|
||||
font-size: 60px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#big b {
|
||||
display: block;
|
||||
font-size: 250px;
|
||||
line-height: 250px;
|
||||
}
|
||||
|
||||
#big .thoughts {
|
||||
font-size: 90px;
|
||||
line-height: 150px;
|
||||
}
|
||||
|
||||
/*
|
||||
'Tiny ideas' just need some tiny styling.
|
||||
*/
|
||||
#tiny {
|
||||
width: 500px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
This step has some animated text ...
|
||||
*/
|
||||
#ing { width: 500px }
|
||||
|
||||
/*
|
||||
... so we define display to `inline-block` to enable transforms and
|
||||
transition duration to 0.5s ...
|
||||
*/
|
||||
#ing b {
|
||||
display: inline-block;
|
||||
-webkit-transition: 0.5s;
|
||||
-moz-transition: 0.5s;
|
||||
-ms-transition: 0.5s;
|
||||
-o-transition: 0.5s;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
/*
|
||||
... and we want 'positioning` word to move up a bit when the step gets
|
||||
`present` class ...
|
||||
*/
|
||||
#ing.present .positioning {
|
||||
-webkit-transform: translateY(-10px);
|
||||
-moz-transform: translateY(-10px);
|
||||
-ms-transform: translateY(-10px);
|
||||
-o-transform: translateY(-10px);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
/*
|
||||
... 'rotating' to rotate a quarter of a second later ...
|
||||
*/
|
||||
#ing.present .rotating {
|
||||
-webkit-transform: rotate(-10deg);
|
||||
-moz-transform: rotate(-10deg);
|
||||
-ms-transform: rotate(-10deg);
|
||||
-o-transform: rotate(-10deg);
|
||||
transform: rotate(-10deg);
|
||||
|
||||
-webkit-transition-delay: 0.25s;
|
||||
-moz-transition-delay: 0.25s;
|
||||
-ms-transition-delay: 0.25s;
|
||||
-o-transition-delay: 0.25s;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
|
||||
/*
|
||||
... and 'scaling' to scale down after another quarter of a second.
|
||||
*/
|
||||
#ing.present .scaling {
|
||||
-webkit-transform: scale(0.7);
|
||||
-moz-transform: scale(0.7);
|
||||
-ms-transform: scale(0.7);
|
||||
-o-transform: scale(0.7);
|
||||
transform: scale(0.7);
|
||||
|
||||
-webkit-transition-delay: 0.5s;
|
||||
-moz-transition-delay: 0.5s;
|
||||
-ms-transition-delay: 0.5s;
|
||||
-o-transition-delay: 0.5s;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
/*
|
||||
The 'imagination' step is again some boring font-sizing.
|
||||
*/
|
||||
|
||||
#imagination {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
#imagination .imagination {
|
||||
font-size: 78px;
|
||||
}
|
||||
|
||||
/*
|
||||
There is nothing really special about 'use the source, Luke' step, too,
|
||||
except maybe of the Yoda background.
|
||||
|
||||
As you can see below I've 'hard-coded' it in data URL.
|
||||
That's not the best way to serve images, but because that's just this one
|
||||
I decided it will be OK to have it this way.
|
||||
|
||||
Just make sure you don't blindly copy this approach.
|
||||
*/
|
||||
#source {
|
||||
width: 700px;
|
||||
padding-bottom: 300px;
|
||||
|
||||
/* Yoda Icon :: Pixel Art from Star Wars http://www.pixeljoint.com/pixelart/1423.htm */
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==);
|
||||
background-position: bottom right;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#source q {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
/*
|
||||
And the "it's in 3D" step again brings some 3D typography - just for fun.
|
||||
|
||||
Because we want to position <span> elements in 3D we set transform-style to
|
||||
`preserve-3d` on the paragraph.
|
||||
It is not needed by webkit browsers, but it is in Firefox. It's hard to say
|
||||
which behaviour is correct as 3D transforms spec is not very clear about it.
|
||||
*/
|
||||
#its-in-3d p {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d; /* Y U need this Firefox?! */
|
||||
-ms-transform-style: preserve-3d;
|
||||
-o-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
/*
|
||||
Below we position each word separately along Z axis and we want it to transition
|
||||
to default position in 0.5s when the step gets `present` class.
|
||||
|
||||
Quite a simple idea, but lot's of styles and prefixes.
|
||||
*/
|
||||
#its-in-3d span,
|
||||
#its-in-3d b {
|
||||
display: inline-block;
|
||||
-webkit-transform: translateZ(40px);
|
||||
-moz-transform: translateZ(40px);
|
||||
-ms-transform: translateZ(40px);
|
||||
-o-transform: translateZ(40px);
|
||||
transform: translateZ(40px);
|
||||
|
||||
-webkit-transition: 0.5s;
|
||||
-moz-transition: 0.5s;
|
||||
-ms-transition: 0.5s;
|
||||
-o-transition: 0.5s;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
#its-in-3d .have {
|
||||
-webkit-transform: translateZ(-40px);
|
||||
-moz-transform: translateZ(-40px);
|
||||
-ms-transform: translateZ(-40px);
|
||||
-o-transform: translateZ(-40px);
|
||||
transform: translateZ(-40px);
|
||||
}
|
||||
|
||||
#its-in-3d .you {
|
||||
-webkit-transform: translateZ(20px);
|
||||
-moz-transform: translateZ(20px);
|
||||
-ms-transform: translateZ(20px);
|
||||
-o-transform: translateZ(20px);
|
||||
transform: translateZ(20px);
|
||||
}
|
||||
|
||||
#its-in-3d .noticed {
|
||||
-webkit-transform: translateZ(-40px);
|
||||
-moz-transform: translateZ(-40px);
|
||||
-ms-transform: translateZ(-40px);
|
||||
-o-transform: translateZ(-40px);
|
||||
transform: translateZ(-40px);
|
||||
}
|
||||
|
||||
#its-in-3d .its {
|
||||
-webkit-transform: translateZ(60px);
|
||||
-moz-transform: translateZ(60px);
|
||||
-ms-transform: translateZ(60px);
|
||||
-o-transform: translateZ(60px);
|
||||
transform: translateZ(60px);
|
||||
}
|
||||
|
||||
#its-in-3d .in {
|
||||
-webkit-transform: translateZ(-10px);
|
||||
-moz-transform: translateZ(-10px);
|
||||
-ms-transform: translateZ(-10px);
|
||||
-o-transform: translateZ(-10px);
|
||||
transform: translateZ(-10px);
|
||||
}
|
||||
|
||||
#its-in-3d .footnote {
|
||||
font-size: 32px;
|
||||
|
||||
-webkit-transform: translateZ(-10px);
|
||||
-moz-transform: translateZ(-10px);
|
||||
-ms-transform: translateZ(-10px);
|
||||
-o-transform: translateZ(-10px);
|
||||
transform: translateZ(-10px);
|
||||
}
|
||||
|
||||
#its-in-3d.present span,
|
||||
#its-in-3d.present b {
|
||||
-webkit-transform: translateZ(0px);
|
||||
-moz-transform: translateZ(0px);
|
||||
-ms-transform: translateZ(0px);
|
||||
-o-transform: translateZ(0px);
|
||||
transform: translateZ(0px);
|
||||
}
|
||||
|
||||
/*
|
||||
The last step is an overview.
|
||||
There is no content in it, so we make sure it's not visible because we want
|
||||
to be able to click on other steps.
|
||||
|
||||
*/
|
||||
#overview { display: none }
|
||||
|
||||
/*
|
||||
We also make other steps visible and give them a pointer cursor using the
|
||||
`impress-on-` class.
|
||||
*/
|
||||
.impress-on-overview .step {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Now, when we have all the steps styled let's give users a hint how to navigate
|
||||
around the presentation.
|
||||
|
||||
The best way to do this would be to use JavaScript, show a delayed hint for a
|
||||
first time users, then hide it and store a status in cookie or localStorage...
|
||||
|
||||
But I wanted to have some CSS fun and avoid additional scripting...
|
||||
|
||||
Let me explain it first, so maybe the transition magic will be more readable
|
||||
when you read the code.
|
||||
|
||||
First of all I wanted the hint to appear only when user is idle for a while.
|
||||
You can't detect the 'idle' state in CSS, but I delayed a appearing of the
|
||||
hint by 5s using transition-delay.
|
||||
|
||||
You also can't detect in CSS if the user is a first-time visitor, so I had to
|
||||
make an assumption that I'll only show the hint on the first step. And when
|
||||
the step is changed hide the hint, because I can assume that user already
|
||||
knows how to navigate.
|
||||
|
||||
To summarize it - hint is shown when the user is on the first step for longer
|
||||
than 5 seconds.
|
||||
|
||||
The other problem I had was caused by the fact that I wanted the hint to fade
|
||||
in and out. It can be easily achieved by transitioning the opacity property.
|
||||
But that also meant that the hint was always on the screen, even if totally
|
||||
transparent. It covered part of the screen and you couldn't correctly clicked
|
||||
through it.
|
||||
Unfortunately you cannot transition between display `block` and `none` in pure
|
||||
CSS, so I needed a way to not only fade out the hint but also move it out of
|
||||
the screen.
|
||||
|
||||
I solved this problem by positioning the hint below the bottom of the screen
|
||||
with CSS transform and moving it up to show it. But I also didn't want this move
|
||||
to be visible. I wanted the hint only to fade in and out visually, so I delayed
|
||||
the fade in transition, so it starts when the hint is already in its correct
|
||||
position on the screen.
|
||||
|
||||
I know, it sounds complicated ... maybe it would be easier with the code?
|
||||
*/
|
||||
|
||||
.hint {
|
||||
/*
|
||||
We hide the hint until presentation is started and from browsers not supporting
|
||||
impress.js, as they will have a linear scrollable view ...
|
||||
*/
|
||||
display: none;
|
||||
|
||||
/*
|
||||
... and give it some fixed position and nice styles.
|
||||
*/
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 200px;
|
||||
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: #EEE;
|
||||
text-align: center;
|
||||
|
||||
font-size: 50px;
|
||||
padding: 20px;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
/*
|
||||
By default we don't want the hint to be visible, so we make it transparent ...
|
||||
*/
|
||||
opacity: 0;
|
||||
|
||||
/*
|
||||
... and position it below the bottom of the screen (relative to it's fixed position)
|
||||
*/
|
||||
-webkit-transform: translateY(400px);
|
||||
-moz-transform: translateY(400px);
|
||||
-ms-transform: translateY(400px);
|
||||
-o-transform: translateY(400px);
|
||||
transform: translateY(400px);
|
||||
|
||||
/*
|
||||
Now let's imagine that the hint is visible and we want to fade it out and move out
|
||||
of the screen.
|
||||
|
||||
So we define the transition on the opacity property with 1s duration and another
|
||||
transition on transform property delayed by 1s so it will happen after the fade out
|
||||
on opacity finished.
|
||||
|
||||
This way user will not see the hint moving down.
|
||||
*/
|
||||
-webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
|
||||
-moz-transition: opacity 1s, -moz-transform 0.5s 1s;
|
||||
-ms-transition: opacity 1s, -ms-transform 0.5s 1s;
|
||||
-o-transition: opacity 1s, -o-transform 0.5s 1s;
|
||||
transition: opacity 1s, transform 0.5s 1s;
|
||||
}
|
||||
|
||||
/*
|
||||
Now we 'enable' the hint when presentation is initialized ...
|
||||
*/
|
||||
.impress-enabled .hint { display: block }
|
||||
|
||||
/*
|
||||
... and we will show it when the first step (with id 'bored') is active.
|
||||
*/
|
||||
.impress-on-bored .hint {
|
||||
/*
|
||||
We remove the transparency and position the hint in its default fixed
|
||||
position.
|
||||
*/
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
|
||||
/*
|
||||
Now for fade in transition we have the oposite situation from the one
|
||||
above.
|
||||
|
||||
First after 4.5s delay we animate the transform property to move the hint
|
||||
into its correct position and after that we fade it in with opacity
|
||||
transition.
|
||||
*/
|
||||
-webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s;
|
||||
-moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s;
|
||||
-ms-transition: opacity 1s 5s, -ms-transform 0.5s 4.5s;
|
||||
-o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s;
|
||||
transition: opacity 1s 5s, transform 0.5s 4.5s;
|
||||
}
|
||||
|
||||
/*
|
||||
And as the last thing there is a workaround for quite strange bug.
|
||||
It happens a lot in Chrome. I don't remember if I've seen it in Firefox.
|
||||
|
||||
Sometimes the element positioned in 3D (especially when it's moved back
|
||||
along Z axis) is not clickable, because it falls 'behind' the <body>
|
||||
element.
|
||||
|
||||
To prevent this, I decided to make <body> non clickable by setting
|
||||
pointer-events property to `none` value.
|
||||
Value if this property is inherited, so to make everything else clickable
|
||||
I bring it back on the #impress element.
|
||||
|
||||
If you want to know more about `pointer-events` here are some docs:
|
||||
https://developer.mozilla.org/en/CSS/pointer-events
|
||||
|
||||
There is one very important thing to notice about this workaround - it makes
|
||||
everything 'unclickable' except what's in #impress element.
|
||||
|
||||
So use it wisely ... or don't use at all.
|
||||
*/
|
||||
.impress-enabled { pointer-events: none }
|
||||
.impress-enabled #impress { pointer-events: auto }
|
||||
|
||||
/*
|
||||
There is one funny thing I just realized.
|
||||
|
||||
Thanks to this workaround above everything except #impress element is invisible
|
||||
for click events. That means that the hint element is also not clickable.
|
||||
So basically all of this transforms and delayed transitions trickery was probably
|
||||
not needed at all...
|
||||
|
||||
But it was fun to learn about it, wasn't it?
|
||||
*/
|
||||
|
||||
/*
|
||||
That's all I have for you in this file.
|
||||
Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it
|
||||
for you.
|
||||
*/
|
||||
BIN
static/files/presentations/images/ECS_map.1.png
Normal file
BIN
static/files/presentations/images/ECS_map.1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
BIN
static/files/presentations/images/UR8_fold.png
Normal file
BIN
static/files/presentations/images/UR8_fold.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
static/files/presentations/images/carto_groups_screen1.tiff
Normal file
BIN
static/files/presentations/images/carto_groups_screen1.tiff
Normal file
Binary file not shown.
BIN
static/files/presentations/images/carto_groups_screen2.tiff
Normal file
BIN
static/files/presentations/images/carto_groups_screen2.tiff
Normal file
Binary file not shown.
BIN
static/files/presentations/images/community_map.tiff
Normal file
BIN
static/files/presentations/images/community_map.tiff
Normal file
Binary file not shown.
6
static/files/presentations/images/community_map.tiffw
Normal file
6
static/files/presentations/images/community_map.tiffw
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
2299.26205120632039325
|
||||
0
|
||||
0
|
||||
-2299.26205120632039325
|
||||
-1428005.4290809566155076
|
||||
8627021.73014170490205288
|
||||
BIN
static/files/presentations/images/dtas_map.png
Normal file
BIN
static/files/presentations/images/dtas_map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 825 KiB |
BIN
static/files/presentations/images/dtas_map.tiff
Normal file
BIN
static/files/presentations/images/dtas_map.tiff
Normal file
Binary file not shown.
BIN
static/files/presentations/images/ecs_map.png
Normal file
BIN
static/files/presentations/images/ecs_map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 597 KiB |
BIN
static/files/presentations/images/ecs_map.tiff
Normal file
BIN
static/files/presentations/images/ecs_map.tiff
Normal file
Binary file not shown.
BIN
static/files/presentations/images/group_map.png
Normal file
BIN
static/files/presentations/images/group_map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
static/files/presentations/images/motivations.png
Normal file
BIN
static/files/presentations/images/motivations.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
static/files/presentations/images/partner-logos.jpg
Normal file
BIN
static/files/presentations/images/partner-logos.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
static/files/presentations/images/sccan_map.png
Normal file
BIN
static/files/presentations/images/sccan_map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 486 KiB |
BIN
static/files/presentations/images/sccan_map.tiff
Normal file
BIN
static/files/presentations/images/sccan_map.tiff
Normal file
Binary file not shown.
BIN
static/files/presentations/images/simd_jitterplot.png
Normal file
BIN
static/files/presentations/images/simd_jitterplot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 573 KiB |
BIN
static/files/presentations/images/spiritual_landscapes.jpg
Normal file
BIN
static/files/presentations/images/spiritual_landscapes.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
static/files/presentations/images/team_photo.jpg
Normal file
BIN
static/files/presentations/images/team_photo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
836
static/files/presentations/js/impress.js
Normal file
836
static/files/presentations/js/impress.js
Normal file
|
|
@ -0,0 +1,836 @@
|
|||
/**
|
||||
* impress.js
|
||||
*
|
||||
* impress.js is a presentation tool based on the power of CSS3 transforms and transitions
|
||||
* in modern browsers and inspired by the idea behind prezi.com.
|
||||
*
|
||||
*
|
||||
* Copyright 2011-2012 Bartek Szopka (@bartaz)
|
||||
*
|
||||
* Released under the MIT and GPL Licenses.
|
||||
*
|
||||
* ------------------------------------------------
|
||||
* author: Bartek Szopka
|
||||
* version: 0.6.0
|
||||
* url: http://bartaz.github.com/impress.js/
|
||||
* source: http://github.com/bartaz/impress.js/
|
||||
*/
|
||||
|
||||
/*jshint bitwise:true, curly:true, eqeqeq:true, forin:true, latedef:true, newcap:true,
|
||||
noarg:true, noempty:true, undef:true, strict:true, browser:true */
|
||||
|
||||
// You are one of those who like to know how things work inside?
|
||||
// Let me show you the cogs that make impress.js run...
|
||||
( function( document, window ) {
|
||||
"use strict";
|
||||
|
||||
// HELPER FUNCTIONS
|
||||
|
||||
// `pfx` is a function that takes a standard CSS property name as a parameter
|
||||
// and returns it's prefixed version valid for current browser it runs in.
|
||||
// The code is heavily inspired by Modernizr http://www.modernizr.com/
|
||||
var pfx = ( function() {
|
||||
|
||||
var style = document.createElement( "dummy" ).style,
|
||||
prefixes = "Webkit Moz O ms Khtml".split( " " ),
|
||||
memory = {};
|
||||
|
||||
return function( prop ) {
|
||||
if ( typeof memory[ prop ] === "undefined" ) {
|
||||
|
||||
var ucProp = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ),
|
||||
props = ( prop + " " + prefixes.join( ucProp + " " ) + ucProp ).split( " " );
|
||||
|
||||
memory[ prop ] = null;
|
||||
for ( var i in props ) {
|
||||
if ( style[ props[ i ] ] !== undefined ) {
|
||||
memory[ prop ] = props[ i ];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return memory[ prop ];
|
||||
};
|
||||
|
||||
} )();
|
||||
|
||||
// `arrayify` takes an array-like object and turns it into real Array
|
||||
// to make all the Array.prototype goodness available.
|
||||
var arrayify = function( a ) {
|
||||
return [].slice.call( a );
|
||||
};
|
||||
|
||||
// `css` function applies the styles given in `props` object to the element
|
||||
// given as `el`. It runs all property names through `pfx` function to make
|
||||
// sure proper prefixed version of the property is used.
|
||||
var css = function( el, props ) {
|
||||
var key, pkey;
|
||||
for ( key in props ) {
|
||||
if ( props.hasOwnProperty( key ) ) {
|
||||
pkey = pfx( key );
|
||||
if ( pkey !== null ) {
|
||||
el.style[ pkey ] = props[ key ];
|
||||
}
|
||||
}
|
||||
}
|
||||
return el;
|
||||
};
|
||||
|
||||
// `toNumber` takes a value given as `numeric` parameter and tries to turn
|
||||
// it into a number. If it is not possible it returns 0 (or other value
|
||||
// given as `fallback`).
|
||||
var toNumber = function( numeric, fallback ) {
|
||||
return isNaN( numeric ) ? ( fallback || 0 ) : Number( numeric );
|
||||
};
|
||||
|
||||
// `byId` returns element with given `id` - you probably have guessed that ;)
|
||||
var byId = function( id ) {
|
||||
return document.getElementById( id );
|
||||
};
|
||||
|
||||
// `$` returns first element for given CSS `selector` in the `context` of
|
||||
// the given element or whole document.
|
||||
var $ = function( selector, context ) {
|
||||
context = context || document;
|
||||
return context.querySelector( selector );
|
||||
};
|
||||
|
||||
// `$$` return an array of elements for given CSS `selector` in the `context` of
|
||||
// the given element or whole document.
|
||||
var $$ = function( selector, context ) {
|
||||
context = context || document;
|
||||
return arrayify( context.querySelectorAll( selector ) );
|
||||
};
|
||||
|
||||
// `triggerEvent` builds a custom DOM event with given `eventName` and `detail` data
|
||||
// and triggers it on element given as `el`.
|
||||
var triggerEvent = function( el, eventName, detail ) {
|
||||
var event = document.createEvent( "CustomEvent" );
|
||||
event.initCustomEvent( eventName, true, true, detail );
|
||||
el.dispatchEvent( event );
|
||||
};
|
||||
|
||||
// `translate` builds a translate transform string for given data.
|
||||
var translate = function( t ) {
|
||||
return " translate3d(" + t.x + "px," + t.y + "px," + t.z + "px) ";
|
||||
};
|
||||
|
||||
// `rotate` builds a rotate transform string for given data.
|
||||
// By default the rotations are in X Y Z order that can be reverted by passing `true`
|
||||
// as second parameter.
|
||||
var rotate = function( r, revert ) {
|
||||
var rX = " rotateX(" + r.x + "deg) ",
|
||||
rY = " rotateY(" + r.y + "deg) ",
|
||||
rZ = " rotateZ(" + r.z + "deg) ";
|
||||
|
||||
return revert ? rZ + rY + rX : rX + rY + rZ;
|
||||
};
|
||||
|
||||
// `scale` builds a scale transform string for given data.
|
||||
var scale = function( s ) {
|
||||
return " scale(" + s + ") ";
|
||||
};
|
||||
|
||||
// `getElementFromHash` returns an element located by id from hash part of
|
||||
// window location.
|
||||
var getElementFromHash = function() {
|
||||
|
||||
// Get id from url # by removing `#` or `#/` from the beginning,
|
||||
// so both "fallback" `#slide-id` and "enhanced" `#/slide-id` will work
|
||||
return byId( window.location.hash.replace( /^#\/?/, "" ) );
|
||||
};
|
||||
|
||||
// `computeWindowScale` counts the scale factor between window size and size
|
||||
// defined for the presentation in the config.
|
||||
var computeWindowScale = function( config ) {
|
||||
var hScale = window.innerHeight / config.height,
|
||||
wScale = window.innerWidth / config.width,
|
||||
scale = hScale > wScale ? wScale : hScale;
|
||||
|
||||
if ( config.maxScale && scale > config.maxScale ) {
|
||||
scale = config.maxScale;
|
||||
}
|
||||
|
||||
if ( config.minScale && scale < config.minScale ) {
|
||||
scale = config.minScale;
|
||||
}
|
||||
|
||||
return scale;
|
||||
};
|
||||
|
||||
// CHECK SUPPORT
|
||||
var body = document.body;
|
||||
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
var impressSupported =
|
||||
|
||||
// Browser should support CSS 3D transtorms
|
||||
( pfx( "perspective" ) !== null ) &&
|
||||
|
||||
// Browser should support `classList` and `dataset` APIs
|
||||
( body.classList ) &&
|
||||
( body.dataset ) &&
|
||||
|
||||
// But some mobile devices need to be blacklisted,
|
||||
// because their CSS 3D support or hardware is not
|
||||
// good enough to run impress.js properly, sorry...
|
||||
( ua.search( /(iphone)|(ipod)|(android)/ ) === -1 );
|
||||
|
||||
if ( !impressSupported ) {
|
||||
|
||||
// We can't be sure that `classList` is supported
|
||||
body.className += " impress-not-supported ";
|
||||
} else {
|
||||
body.classList.remove( "impress-not-supported" );
|
||||
body.classList.add( "impress-supported" );
|
||||
}
|
||||
|
||||
// GLOBALS AND DEFAULTS
|
||||
|
||||
// This is where the root elements of all impress.js instances will be kept.
|
||||
// Yes, this means you can have more than one instance on a page, but I'm not
|
||||
// sure if it makes any sense in practice ;)
|
||||
var roots = {};
|
||||
|
||||
// Some default config values.
|
||||
var defaults = {
|
||||
width: 1024,
|
||||
height: 768,
|
||||
maxScale: 1,
|
||||
minScale: 0,
|
||||
|
||||
perspective: 1000,
|
||||
|
||||
transitionDuration: 1000
|
||||
};
|
||||
|
||||
// It's just an empty function ... and a useless comment.
|
||||
var empty = function() { return false; };
|
||||
|
||||
// IMPRESS.JS API
|
||||
|
||||
// And that's where interesting things will start to happen.
|
||||
// It's the core `impress` function that returns the impress.js API
|
||||
// for a presentation based on the element with given id ('impress'
|
||||
// by default).
|
||||
var impress = window.impress = function( rootId ) {
|
||||
|
||||
// If impress.js is not supported by the browser return a dummy API
|
||||
// it may not be a perfect solution but we return early and avoid
|
||||
// running code that may use features not implemented in the browser.
|
||||
if ( !impressSupported ) {
|
||||
return {
|
||||
init: empty,
|
||||
goto: empty,
|
||||
prev: empty,
|
||||
next: empty
|
||||
};
|
||||
}
|
||||
|
||||
rootId = rootId || "impress";
|
||||
|
||||
// If given root is already initialized just return the API
|
||||
if ( roots[ "impress-root-" + rootId ] ) {
|
||||
return roots[ "impress-root-" + rootId ];
|
||||
}
|
||||
|
||||
// Data of all presentation steps
|
||||
var stepsData = {};
|
||||
|
||||
// Element of currently active step
|
||||
var activeStep = null;
|
||||
|
||||
// Current state (position, rotation and scale) of the presentation
|
||||
var currentState = null;
|
||||
|
||||
// Array of step elements
|
||||
var steps = null;
|
||||
|
||||
// Configuration options
|
||||
var config = null;
|
||||
|
||||
// Scale factor of the browser window
|
||||
var windowScale = null;
|
||||
|
||||
// Root presentation elements
|
||||
var root = byId( rootId );
|
||||
var canvas = document.createElement( "div" );
|
||||
|
||||
var initialized = false;
|
||||
|
||||
// STEP EVENTS
|
||||
//
|
||||
// There are currently two step events triggered by impress.js
|
||||
// `impress:stepenter` is triggered when the step is shown on the
|
||||
// screen (the transition from the previous one is finished) and
|
||||
// `impress:stepleave` is triggered when the step is left (the
|
||||
// transition to next step just starts).
|
||||
|
||||
// Reference to last entered step
|
||||
var lastEntered = null;
|
||||
|
||||
// `onStepEnter` is called whenever the step element is entered
|
||||
// but the event is triggered only if the step is different than
|
||||
// last entered step.
|
||||
var onStepEnter = function( step ) {
|
||||
if ( lastEntered !== step ) {
|
||||
triggerEvent( step, "impress:stepenter" );
|
||||
lastEntered = step;
|
||||
}
|
||||
};
|
||||
|
||||
// `onStepLeave` is called whenever the step element is left
|
||||
// but the event is triggered only if the step is the same as
|
||||
// last entered step.
|
||||
var onStepLeave = function( step ) {
|
||||
if ( lastEntered === step ) {
|
||||
triggerEvent( step, "impress:stepleave" );
|
||||
lastEntered = null;
|
||||
}
|
||||
};
|
||||
|
||||
// `initStep` initializes given step element by reading data from its
|
||||
// data attributes and setting correct styles.
|
||||
var initStep = function( el, idx ) {
|
||||
var data = el.dataset,
|
||||
step = {
|
||||
translate: {
|
||||
x: toNumber( data.x ),
|
||||
y: toNumber( data.y ),
|
||||
z: toNumber( data.z )
|
||||
},
|
||||
rotate: {
|
||||
x: toNumber( data.rotateX ),
|
||||
y: toNumber( data.rotateY ),
|
||||
z: toNumber( data.rotateZ || data.rotate )
|
||||
},
|
||||
scale: toNumber( data.scale, 1 ),
|
||||
el: el
|
||||
};
|
||||
|
||||
if ( !el.id ) {
|
||||
el.id = "step-" + ( idx + 1 );
|
||||
}
|
||||
|
||||
stepsData[ "impress-" + el.id ] = step;
|
||||
|
||||
css( el, {
|
||||
position: "absolute",
|
||||
transform: "translate(-50%,-50%)" +
|
||||
translate( step.translate ) +
|
||||
rotate( step.rotate ) +
|
||||
scale( step.scale ),
|
||||
transformStyle: "preserve-3d"
|
||||
} );
|
||||
};
|
||||
|
||||
// `init` API function that initializes (and runs) the presentation.
|
||||
var init = function() {
|
||||
if ( initialized ) { return; }
|
||||
|
||||
// First we set up the viewport for mobile devices.
|
||||
// For some reason iPad goes nuts when it is not done properly.
|
||||
var meta = $( "meta[name='viewport']" ) || document.createElement( "meta" );
|
||||
meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no";
|
||||
if ( meta.parentNode !== document.head ) {
|
||||
meta.name = "viewport";
|
||||
document.head.appendChild( meta );
|
||||
}
|
||||
|
||||
// Initialize configuration object
|
||||
var rootData = root.dataset;
|
||||
config = {
|
||||
width: toNumber( rootData.width, defaults.width ),
|
||||
height: toNumber( rootData.height, defaults.height ),
|
||||
maxScale: toNumber( rootData.maxScale, defaults.maxScale ),
|
||||
minScale: toNumber( rootData.minScale, defaults.minScale ),
|
||||
perspective: toNumber( rootData.perspective, defaults.perspective ),
|
||||
transitionDuration: toNumber(
|
||||
rootData.transitionDuration, defaults.transitionDuration
|
||||
)
|
||||
};
|
||||
|
||||
windowScale = computeWindowScale( config );
|
||||
|
||||
// Wrap steps with "canvas" element
|
||||
arrayify( root.childNodes ).forEach( function( el ) {
|
||||
canvas.appendChild( el );
|
||||
} );
|
||||
root.appendChild( canvas );
|
||||
|
||||
// Set initial styles
|
||||
document.documentElement.style.height = "100%";
|
||||
|
||||
css( body, {
|
||||
height: "100%",
|
||||
overflow: "hidden"
|
||||
} );
|
||||
|
||||
var rootStyles = {
|
||||
position: "absolute",
|
||||
transformOrigin: "top left",
|
||||
transition: "all 0s ease-in-out",
|
||||
transformStyle: "preserve-3d"
|
||||
};
|
||||
|
||||
css( root, rootStyles );
|
||||
css( root, {
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
perspective: ( config.perspective / windowScale ) + "px",
|
||||
transform: scale( windowScale )
|
||||
} );
|
||||
css( canvas, rootStyles );
|
||||
|
||||
body.classList.remove( "impress-disabled" );
|
||||
body.classList.add( "impress-enabled" );
|
||||
|
||||
// Get and init steps
|
||||
steps = $$( ".step", root );
|
||||
steps.forEach( initStep );
|
||||
|
||||
// Set a default initial state of the canvas
|
||||
currentState = {
|
||||
translate: { x: 0, y: 0, z: 0 },
|
||||
rotate: { x: 0, y: 0, z: 0 },
|
||||
scale: 1
|
||||
};
|
||||
|
||||
initialized = true;
|
||||
|
||||
triggerEvent( root, "impress:init", { api: roots[ "impress-root-" + rootId ] } );
|
||||
};
|
||||
|
||||
// `getStep` is a helper function that returns a step element defined by parameter.
|
||||
// If a number is given, step with index given by the number is returned, if a string
|
||||
// is given step element with such id is returned, if DOM element is given it is returned
|
||||
// if it is a correct step element.
|
||||
var getStep = function( step ) {
|
||||
if ( typeof step === "number" ) {
|
||||
step = step < 0 ? steps[ steps.length + step ] : steps[ step ];
|
||||
} else if ( typeof step === "string" ) {
|
||||
step = byId( step );
|
||||
}
|
||||
return ( step && step.id && stepsData[ "impress-" + step.id ] ) ? step : null;
|
||||
};
|
||||
|
||||
// Used to reset timeout for `impress:stepenter` event
|
||||
var stepEnterTimeout = null;
|
||||
|
||||
// `goto` API function that moves to step given with `el` parameter
|
||||
// (by index, id or element), with a transition `duration` optionally
|
||||
// given as second parameter.
|
||||
var goto = function( el, duration ) {
|
||||
|
||||
if ( !initialized || !( el = getStep( el ) ) ) {
|
||||
|
||||
// Presentation not initialized or given element is not a step
|
||||
return false;
|
||||
}
|
||||
|
||||
// Sometimes it's possible to trigger focus on first link with some keyboard action.
|
||||
// Browser in such a case tries to scroll the page to make this element visible
|
||||
// (even that body overflow is set to hidden) and it breaks our careful positioning.
|
||||
//
|
||||
// So, as a lousy (and lazy) workaround we will make the page scroll back to the top
|
||||
// whenever slide is selected
|
||||
//
|
||||
// If you are reading this and know any better way to handle it, I'll be glad to hear
|
||||
// about it!
|
||||
window.scrollTo( 0, 0 );
|
||||
|
||||
var step = stepsData[ "impress-" + el.id ];
|
||||
|
||||
if ( activeStep ) {
|
||||
activeStep.classList.remove( "active" );
|
||||
body.classList.remove( "impress-on-" + activeStep.id );
|
||||
}
|
||||
el.classList.add( "active" );
|
||||
|
||||
body.classList.add( "impress-on-" + el.id );
|
||||
|
||||
// Compute target state of the canvas based on given step
|
||||
var target = {
|
||||
rotate: {
|
||||
x: -step.rotate.x,
|
||||
y: -step.rotate.y,
|
||||
z: -step.rotate.z
|
||||
},
|
||||
translate: {
|
||||
x: -step.translate.x,
|
||||
y: -step.translate.y,
|
||||
z: -step.translate.z
|
||||
},
|
||||
scale: 1 / step.scale
|
||||
};
|
||||
|
||||
// Check if the transition is zooming in or not.
|
||||
//
|
||||
// This information is used to alter the transition style:
|
||||
// when we are zooming in - we start with move and rotate transition
|
||||
// and the scaling is delayed, but when we are zooming out we start
|
||||
// with scaling down and move and rotation are delayed.
|
||||
var zoomin = target.scale >= currentState.scale;
|
||||
|
||||
duration = toNumber( duration, config.transitionDuration );
|
||||
var delay = ( duration / 2 );
|
||||
|
||||
// If the same step is re-selected, force computing window scaling,
|
||||
// because it is likely to be caused by window resize
|
||||
if ( el === activeStep ) {
|
||||
windowScale = computeWindowScale( config );
|
||||
}
|
||||
|
||||
var targetScale = target.scale * windowScale;
|
||||
|
||||
// Trigger leave of currently active element (if it's not the same step again)
|
||||
if ( activeStep && activeStep !== el ) {
|
||||
onStepLeave( activeStep );
|
||||
}
|
||||
|
||||
// Now we alter transforms of `root` and `canvas` to trigger transitions.
|
||||
//
|
||||
// And here is why there are two elements: `root` and `canvas` - they are
|
||||
// being animated separately:
|
||||
// `root` is used for scaling and `canvas` for translate and rotations.
|
||||
// Transitions on them are triggered with different delays (to make
|
||||
// visually nice and 'natural' looking transitions), so we need to know
|
||||
// that both of them are finished.
|
||||
css( root, {
|
||||
|
||||
// For IE 11 support we must specify perspective independent
|
||||
// of transform.
|
||||
perspective: ( config.perspective / targetScale ) + "px",
|
||||
|
||||
// To keep the perspective look similar for different scales
|
||||
// we need to 'scale' the perspective, too
|
||||
transform: scale( targetScale ),
|
||||
transitionDuration: duration + "ms",
|
||||
transitionDelay: ( zoomin ? delay : 0 ) + "ms"
|
||||
} );
|
||||
|
||||
css( canvas, {
|
||||
transform: rotate( target.rotate, true ) + translate( target.translate ),
|
||||
transitionDuration: duration + "ms",
|
||||
transitionDelay: ( zoomin ? 0 : delay ) + "ms"
|
||||
} );
|
||||
|
||||
// Here is a tricky part...
|
||||
//
|
||||
// If there is no change in scale or no change in rotation and translation, it means
|
||||
// there was actually no delay - because there was no transition on `root` or `canvas`
|
||||
// elements. We want to trigger `impress:stepenter` event in the correct moment, so
|
||||
// here we compare the current and target values to check if delay should be taken into
|
||||
// account.
|
||||
//
|
||||
// I know that this `if` statement looks scary, but it's pretty simple when you know
|
||||
// what is going on
|
||||
// - it's simply comparing all the values.
|
||||
if ( currentState.scale === target.scale ||
|
||||
( currentState.rotate.x === target.rotate.x &&
|
||||
currentState.rotate.y === target.rotate.y &&
|
||||
currentState.rotate.z === target.rotate.z &&
|
||||
currentState.translate.x === target.translate.x &&
|
||||
currentState.translate.y === target.translate.y &&
|
||||
currentState.translate.z === target.translate.z ) ) {
|
||||
delay = 0;
|
||||
}
|
||||
|
||||
// Store current state
|
||||
currentState = target;
|
||||
activeStep = el;
|
||||
|
||||
// And here is where we trigger `impress:stepenter` event.
|
||||
// We simply set up a timeout to fire it taking transition duration
|
||||
// (and possible delay) into account.
|
||||
//
|
||||
// I really wanted to make it in more elegant way. The `transitionend` event seemed to
|
||||
// be the best way to do it, but the fact that I'm using transitions on two separate
|
||||
// elements and that the `transitionend` event is only triggered when there was a
|
||||
// transition (change in the values) caused some bugs and made the code really
|
||||
// complicated, cause I had to handle all the conditions separately. And it still
|
||||
// needed a `setTimeout` fallback for the situations when there is no transition at
|
||||
// all.
|
||||
// So I decided that I'd rather make the code simpler than use shiny new
|
||||
// `transitionend`.
|
||||
//
|
||||
// If you want learn something interesting and see how it was done with `transitionend`
|
||||
// go back to
|
||||
// version 0.5.2 of impress.js:
|
||||
// http://github.com/bartaz/impress.js/blob/0.5.2/js/impress.js
|
||||
window.clearTimeout( stepEnterTimeout );
|
||||
stepEnterTimeout = window.setTimeout( function() {
|
||||
onStepEnter( activeStep );
|
||||
}, duration + delay );
|
||||
|
||||
return el;
|
||||
};
|
||||
|
||||
// `prev` API function goes to previous step (in document order)
|
||||
var prev = function() {
|
||||
var prev = steps.indexOf( activeStep ) - 1;
|
||||
prev = prev >= 0 ? steps[ prev ] : steps[ steps.length - 1 ];
|
||||
|
||||
return goto( prev );
|
||||
};
|
||||
|
||||
// `next` API function goes to next step (in document order)
|
||||
var next = function() {
|
||||
var next = steps.indexOf( activeStep ) + 1;
|
||||
next = next < steps.length ? steps[ next ] : steps[ 0 ];
|
||||
|
||||
return goto( next );
|
||||
};
|
||||
|
||||
// Adding some useful classes to step elements.
|
||||
//
|
||||
// All the steps that have not been shown yet are given `future` class.
|
||||
// When the step is entered the `future` class is removed and the `present`
|
||||
// class is given. When the step is left `present` class is replaced with
|
||||
// `past` class.
|
||||
//
|
||||
// So every step element is always in one of three possible states:
|
||||
// `future`, `present` and `past`.
|
||||
//
|
||||
// There classes can be used in CSS to style different types of steps.
|
||||
// For example the `present` class can be used to trigger some custom
|
||||
// animations when step is shown.
|
||||
root.addEventListener( "impress:init", function() {
|
||||
|
||||
// STEP CLASSES
|
||||
steps.forEach( function( step ) {
|
||||
step.classList.add( "future" );
|
||||
} );
|
||||
|
||||
root.addEventListener( "impress:stepenter", function( event ) {
|
||||
event.target.classList.remove( "past" );
|
||||
event.target.classList.remove( "future" );
|
||||
event.target.classList.add( "present" );
|
||||
}, false );
|
||||
|
||||
root.addEventListener( "impress:stepleave", function( event ) {
|
||||
event.target.classList.remove( "present" );
|
||||
event.target.classList.add( "past" );
|
||||
}, false );
|
||||
|
||||
}, false );
|
||||
|
||||
// Adding hash change support.
|
||||
root.addEventListener( "impress:init", function() {
|
||||
|
||||
// Last hash detected
|
||||
var lastHash = "";
|
||||
|
||||
// `#/step-id` is used instead of `#step-id` to prevent default browser
|
||||
// scrolling to element in hash.
|
||||
//
|
||||
// And it has to be set after animation finishes, because in Chrome it
|
||||
// makes transtion laggy.
|
||||
// BUG: http://code.google.com/p/chromium/issues/detail?id=62820
|
||||
root.addEventListener( "impress:stepenter", function( event ) {
|
||||
window.location.hash = lastHash = "#/" + event.target.id;
|
||||
}, false );
|
||||
|
||||
window.addEventListener( "hashchange", function() {
|
||||
|
||||
// When the step is entered hash in the location is updated
|
||||
// (just few lines above from here), so the hash change is
|
||||
// triggered and we would call `goto` again on the same element.
|
||||
//
|
||||
// To avoid this we store last entered hash and compare.
|
||||
if ( window.location.hash !== lastHash ) {
|
||||
goto( getElementFromHash() );
|
||||
}
|
||||
}, false );
|
||||
|
||||
// START
|
||||
// by selecting step defined in url or first step of the presentation
|
||||
goto( getElementFromHash() || steps[ 0 ], 0 );
|
||||
}, false );
|
||||
|
||||
body.classList.add( "impress-disabled" );
|
||||
|
||||
// Store and return API for given impress.js root element
|
||||
return ( roots[ "impress-root-" + rootId ] = {
|
||||
init: init,
|
||||
goto: goto,
|
||||
next: next,
|
||||
prev: prev
|
||||
} );
|
||||
|
||||
};
|
||||
|
||||
// Flag that can be used in JS to check if browser have passed the support test
|
||||
impress.supported = impressSupported;
|
||||
|
||||
} )( document, window );
|
||||
|
||||
// NAVIGATION EVENTS
|
||||
|
||||
// As you can see this part is separate from the impress.js core code.
|
||||
// It's because these navigation actions only need what impress.js provides with
|
||||
// its simple API.
|
||||
//
|
||||
// In future I think about moving it to make them optional, move to separate files
|
||||
// and treat more like a 'plugins'.
|
||||
( function( document, window ) {
|
||||
"use strict";
|
||||
|
||||
// Throttling function calls, by Remy Sharp
|
||||
// http://remysharp.com/2010/07/21/throttling-function-calls/
|
||||
var throttle = function( fn, delay ) {
|
||||
var timer = null;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
clearTimeout( timer );
|
||||
timer = setTimeout( function() {
|
||||
fn.apply( context, args );
|
||||
}, delay );
|
||||
};
|
||||
};
|
||||
|
||||
// Wait for impress.js to be initialized
|
||||
document.addEventListener( "impress:init", function( event ) {
|
||||
|
||||
// Getting API from event data.
|
||||
// So you don't event need to know what is the id of the root element
|
||||
// or anything. `impress:init` event data gives you everything you
|
||||
// need to control the presentation that was just initialized.
|
||||
var api = event.detail.api;
|
||||
|
||||
// KEYBOARD NAVIGATION HANDLERS
|
||||
|
||||
// Prevent default keydown action when one of supported key is pressed.
|
||||
document.addEventListener( "keydown", function( event ) {
|
||||
if ( event.keyCode === 9 ||
|
||||
( event.keyCode >= 32 && event.keyCode <= 34 ) ||
|
||||
( event.keyCode >= 37 && event.keyCode <= 40 ) ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Trigger impress action (next or prev) on keyup.
|
||||
|
||||
// Supported keys are:
|
||||
// [space] - quite common in presentation software to move forward
|
||||
// [up] [right] / [down] [left] - again common and natural addition,
|
||||
// [pgdown] / [pgup] - often triggered by remote controllers,
|
||||
// [tab] - this one is quite controversial, but the reason it ended up on
|
||||
// this list is quite an interesting story... Remember that strange part
|
||||
// in the impress.js code where window is scrolled to 0,0 on every presentation
|
||||
// step, because sometimes browser scrolls viewport because of the focused element?
|
||||
// Well, the [tab] key by default navigates around focusable elements, so clicking
|
||||
// it very often caused scrolling to focused element and breaking impress.js
|
||||
// positioning. I didn't want to just prevent this default action, so I used [tab]
|
||||
// as another way to moving to next step... And yes, I know that for the sake of
|
||||
// consistency I should add [shift+tab] as opposite action...
|
||||
document.addEventListener( "keyup", function( event ) {
|
||||
|
||||
if ( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( event.keyCode === 9 ||
|
||||
( event.keyCode >= 32 && event.keyCode <= 34 ) ||
|
||||
( event.keyCode >= 37 && event.keyCode <= 40 ) ) {
|
||||
switch ( event.keyCode ) {
|
||||
case 33: // Page up
|
||||
case 37: // Left
|
||||
case 38: // Up
|
||||
api.prev();
|
||||
break;
|
||||
case 9: // Tab
|
||||
case 32: // Space
|
||||
case 34: // Page down
|
||||
case 39: // Right
|
||||
case 40: // Down
|
||||
api.next();
|
||||
break;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Delegated handler for clicking on the links to presentation steps
|
||||
document.addEventListener( "click", function( event ) {
|
||||
|
||||
// Event delegation with "bubbling"
|
||||
// Check if event target (or any of its parents is a link)
|
||||
var target = event.target;
|
||||
while ( ( target.tagName !== "A" ) &&
|
||||
( target !== document.documentElement ) ) {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
if ( target.tagName === "A" ) {
|
||||
var href = target.getAttribute( "href" );
|
||||
|
||||
// If it's a link to presentation step, target this step
|
||||
if ( href && href[ 0 ] === "#" ) {
|
||||
target = document.getElementById( href.slice( 1 ) );
|
||||
}
|
||||
}
|
||||
|
||||
if ( api.goto( target ) ) {
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Delegated handler for clicking on step elements
|
||||
document.addEventListener( "click", function( event ) {
|
||||
var target = event.target;
|
||||
|
||||
// Find closest step element that is not active
|
||||
while ( !( target.classList.contains( "step" ) &&
|
||||
!target.classList.contains( "active" ) ) &&
|
||||
( target !== document.documentElement ) ) {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
if ( api.goto( target ) ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Touch handler to detect taps on the left and right side of the screen
|
||||
// based on awesome work of @hakimel: https://github.com/hakimel/reveal.js
|
||||
document.addEventListener( "touchstart", function( event ) {
|
||||
if ( event.touches.length === 1 ) {
|
||||
var x = event.touches[ 0 ].clientX,
|
||||
width = window.innerWidth * 0.3,
|
||||
result = null;
|
||||
|
||||
if ( x < width ) {
|
||||
result = api.prev();
|
||||
} else if ( x > window.innerWidth - width ) {
|
||||
result = api.next();
|
||||
}
|
||||
|
||||
if ( result ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Rescale presentation when window is resized
|
||||
window.addEventListener( "resize", throttle( function() {
|
||||
|
||||
// Force going to active step again, to trigger rescaling
|
||||
api.goto( document.querySelector( ".step.active" ), 500 );
|
||||
}, 250 ), false );
|
||||
|
||||
}, false );
|
||||
|
||||
} )( document, window );
|
||||
|
||||
// THAT'S ALL FOLKS!
|
||||
//
|
||||
// Thanks for reading it all.
|
||||
// Or thanks for scrolling down and reading the last part.
|
||||
//
|
||||
// I've learnt a lot when building impress.js and I hope this code and comments
|
||||
// will help somebody learn at least some part of it.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
static/files/presentations/presentation-201601-issrnc.key.zip
Normal file
BIN
static/files/presentations/presentation-201601-issrnc.key.zip
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
static/files/presentations/presentation-20160920-scotgov.pdf
Normal file
BIN
static/files/presentations/presentation-20160920-scotgov.pdf
Normal file
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,186 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1024" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<title>Mapping Community by Jeremy Kidwell</title>
|
||||
|
||||
<meta name="description" content="Mapping Community by Jeremy Kidwell" />
|
||||
<meta name="author" content="Jeremy Kidwell" />
|
||||
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
|
||||
|
||||
<link href="css/impress-demo.css" rel="stylesheet" />
|
||||
|
||||
<link rel="shortcut icon" href="favicon.png" />
|
||||
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
||||
</head>
|
||||
|
||||
<body class="impress-not-supported">
|
||||
|
||||
<div class="fallback-message">
|
||||
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
|
||||
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
|
||||
</div>
|
||||
|
||||
<div id="impress">
|
||||
|
||||
<div id="title" class="step" data-x="0" data-y="0" data-scale="2">
|
||||
<h1>Mapping Community<sup></sup></h1>
|
||||
<span class="footnote">by <a href="http://twitter.com/kidwellj">@kidwellj</a></span>
|
||||
</div>
|
||||
|
||||
<div id="slide1" class="step" data-x="2800" data-y="2000" data-z="-3000" data-rotate="300" data-scale="1">
|
||||
<p><b>We have social problems.</b></p>
|
||||
</div>
|
||||
|
||||
<div id="slide1a" class="step" data-x="2800" data-y="2325" data-z="-3000" data-rotate="240" data-scale="1">
|
||||
<p><b>The recession</b></p>
|
||||
</div>
|
||||
|
||||
<div id="slide1b" class="step" data-x="2800" data-y="2325" data-z="-3000" data-rotate="180" data-scale="1">
|
||||
<p><b>Climate change</b></p>
|
||||
</div>
|
||||
|
||||
<div id="slide1c" class="step" data-x="2800" data-y="2325" data-z="-3000" data-rotate="120" data-scale="1">
|
||||
<p><b>Donald trump</b></p>
|
||||
</div>
|
||||
|
||||
<div id="slide2" class="step" data-x="3800" data-y="2325" data-z="-3000" data-rotate="280" data-scale="1">
|
||||
<p>These all require creative solutions</p>
|
||||
</div>
|
||||
|
||||
<div id="slide3" class="step" data-x="3600" data-y="1300" data-z="-2500" data-rotate="280" data-scale="0.5" style="width: 600px;"><p>And far too often, we look in vain to experts "out there" for solutions</p>
|
||||
</div>
|
||||
|
||||
<div id="slide4" class="step" data-x="3000" data-y="500" data-z="-2500" data-rotate="260" data-scale="1">
|
||||
<p>All around us there are community level solutions that are:</p>
|
||||
- innovative<br />
|
||||
- impactful<br />
|
||||
- sustainable<br />
|
||||
</div>
|
||||
|
||||
<div id="slide5" class="step" data-x="3300" data-y="250" data-z="-3500" data-rotate="260" data-scale=".5">
|
||||
<p style="margin-top: 200px; margin-left: -2px; margin-right: 100px; left: -106px; position: relative;">
|
||||
...but community groups go un-noticed
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="slide6" class="step" data-x="3500" data-y="150" data-z="-4000" data-rotate="260" data-scale=".4">
|
||||
<p style="margin-top: 200px; margin-left: -2px; margin-right: 100px; left: -106px; position: relative;">
|
||||
This is a visibility problem
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="slide7" class="step" data-x="3500" data-y="0" data-z="-3750" data-rotate="260" data-scale=".4">
|
||||
<p style="margin-top: 200px; margin-left: -2px; margin-right: 100px; left: -106px; position: relative;">
|
||||
which impedes funding, collaboration, and multiplication
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="slide8" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="3">
|
||||
<p>We want to be visible!</p>
|
||||
</div>
|
||||
|
||||
<div id="slide8b" class="step" data-x="850" data-y="4000" data-rotate="90" data-scale="3">
|
||||
<img src="images/group_map.png" alt="picture of a map with lots of dots" style="max-width:120%;">
|
||||
</div>
|
||||
|
||||
<div id="slide9" class="step" data-x="250" data-y="3000" data-rotate="90" data-scale="2">
|
||||
<p>And maps are a fantastic way <br /> to communicate this significance visually.</p>
|
||||
</div>
|
||||
|
||||
<div id="slide10" class="step" data-x="-1250" data-y="3000" data-rotate="90" data-scale="2">
|
||||
<p>And we know this - </p>
|
||||
</div>
|
||||
|
||||
<div id="slide11" class="step" data-x="-1650" data-y="3000" data-rotate="90" data-scale="1">
|
||||
<p>Everyone has a map on their website - </p>
|
||||
</div>
|
||||
|
||||
<div id="slide12" class="step" data-x="-1500" data-y="4500" data-rotate="90" data-scale="1">
|
||||
<p>Development Trust Association Scotland</p>
|
||||
<img src="images/dtas_map.png" alt="picture of dtas website" style="max-width:100%;">
|
||||
</div>
|
||||
|
||||
<div id="slide13" class="step" data-x="-1500" data-y="5500" data-rotate="90" data-scale="1">
|
||||
<p>Scottish Communities Climate Action Network</p>
|
||||
<img src="images/sccan_map.png" alt="picture of dtas website" style="max-width:100%;">
|
||||
</div>
|
||||
|
||||
<div id="slide14" class="step" data-x="-1500" data-y="6500" data-rotate="90" data-scale="1">
|
||||
<p>Eco-Congregation Scotland</p>
|
||||
<img src="images/ecs_map.png" alt="picture of dtas website" style="max-width:100%;">
|
||||
</div>
|
||||
|
||||
<div id="slide15" class="step" data-x="-2500" data-y="4500" data-rotate="90" data-scale="5">
|
||||
<p>And these maps are all hosted by google.</p>
|
||||
</div>
|
||||
|
||||
<div id="slide16" class="step" data-x="-3500" data-y="4500" data-rotate="90" data-scale="5">
|
||||
<p>This is a bad thing.</p>
|
||||
</div>
|
||||
|
||||
<div id="slide17" class="step" data-x="-5500" data-y="4500" data-rotate="90" data-scale="4">
|
||||
<p>- The Google interface is user friendly<br />
|
||||
- But in exchange for this "free" service,</br you agree to some pretty predatory Terms of Service<br />
|
||||
- They can (and probably will) cancel your service at any time without warning<br />
|
||||
- You get no analytics<br />
|
||||
- And the data is stuck in a black box that doesn't interconnect<br /></p>
|
||||
</div>
|
||||
|
||||
<div id="slide18" class="step" data-x="-7500" data-y="6500" data-rotate="90" data-scale="3">
|
||||
<p>Let's recap:</p>
|
||||
</div>
|
||||
|
||||
<div id="slide19" class="step" data-x="-8500" data-y="6500" data-rotate="90" data-scale="3">
|
||||
<p>
|
||||
- Community groups are providing innovation and value<br />
|
||||
- This is going un-noticed<br />
|
||||
- and lack of knowledge impedes funding and collaboration<br />
|
||||
- We can address this problem cartographically<br />
|
||||
- But our options stink<br />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="slide20" class="step" data-x="-6000" data-y="10000" data-rotate="90" data-scale="3">
|
||||
<p>We are working on a solution to these problems:</p>
|
||||
</div>
|
||||
|
||||
<div id="slide21" class="step" data-x="-8500" data-y="11000" data-scale="3">
|
||||
<p>- By improving public knowledge of community groups</p>
|
||||
</div>
|
||||
|
||||
<div id="slide22" class="step" data-x="-8500" data-y="12250" data-scale="3">
|
||||
<p>- By enabling location-based analytics for groups and their umbrella organisations</p>
|
||||
<img src="images/simd_jitterplot.png" alt="picture of dtas website" style="max-width:50%">
|
||||
</div>
|
||||
|
||||
<div id="slide23" class="step" data-x="-8500" data-y="13250" data-scale="3">
|
||||
<p>- By providing sustainable and open data to social policy researchers</p>
|
||||
</div>
|
||||
<div id="slide23a" class="step" data-x="-8500" data-y="14500" data-scale="3">
|
||||
<iframe src="https://zenodo.org/communities/mapping-community/?page=1&size=20" height="480" width="600"></iframe>
|
||||
</div>
|
||||
|
||||
<div id="slide24" class="step" data-x="-8500" data-y="15500" data-scale="3">
|
||||
<p>- By documenting best-practices for local cross-network collaborations</p>
|
||||
</div>
|
||||
|
||||
<div id="slide25" class="step" data-x="-8500" data-y="16500" data-scale="3">
|
||||
<p>- By providing an industry-leading digital mapping platform for free to community groups</p>
|
||||
</div>
|
||||
|
||||
<div id="slide26" class="step" data-x="-7500" data-y="17500" data-scale="5">
|
||||
<h2><a href="http://mapping.community">Now Let's Demo!</a></h2>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script src="js/impress.js"></script>
|
||||
<script>impress().init();</script>
|
||||
</body>
|
||||
</html>
|
||||
240
static/files/presentations/presentation-20170511-bl_mapping.html
Normal file
240
static/files/presentations/presentation-20170511-bl_mapping.html
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1024" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<title>Mapping Community by Jeremy Kidwell</title>
|
||||
|
||||
<meta name="description" content="Enhancing Public Understanding of Activists, Religion (and Religious Activists!) through the Geo+Digital-Humanities" />
|
||||
<meta name="author" content="Jeremy Kidwell" />
|
||||
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
|
||||
|
||||
<link href="https://jeremykidwell.info/files/presentations/css/impress-demo.css" rel="stylesheet" />
|
||||
|
||||
<link rel="shortcut icon" href="favicon.png" />
|
||||
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
||||
</head>
|
||||
|
||||
<body class="impress-not-supported">
|
||||
|
||||
<div class="fallback-message">
|
||||
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
|
||||
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
|
||||
</div>
|
||||
|
||||
<div id="impress">
|
||||
|
||||
<div id="title" class="step" data-x="0" data-y="0" data-scale="2">
|
||||
<p>Enhancing Public Understanding of Activists, Religion<br />
|
||||
(and Religious Activists!)<br />
|
||||
through the Geo+Digital-Humanities"</p>
|
||||
<span class="footnote">by <a href="http://twitter.com/kidwellj">@kidwellj</a></span>
|
||||
</div>
|
||||
|
||||
<div id="slide0a" class="step" data-x="1800" data-y="1000" data-z="-3000" data-rotate="300" data-scale="1">
|
||||
<h3>What is the point of the digital humanities?</h3>
|
||||
</div>
|
||||
|
||||
<div id="slide0b" class="step" data-x="1800" data-y="1000" data-z="-5500" data-rotate="300" data-scale="1">
|
||||
possibly better engagement with (public AND scholarly) audiences?
|
||||
</div>
|
||||
|
||||
<div id="slide0c" class="step" data-x="2000" data-y="1500" data-z="-5500" data-rotate="300" data-scale="1">
|
||||
but why might digital be better?
|
||||
</div>
|
||||
|
||||
<div id="slide0d" class="step" data-x="3800" data-y="1000" data-z="-5500" data-rotate="0" data-scale="1">
|
||||
<p>We can learn in different and more in-depth ways through play</p>
|
||||
</div>
|
||||
|
||||
<div id="slide0e" class="step" data-x="4800" data-y="1000" data-z="-5500" data-rotate="0" data-scale="1">
|
||||
<p>Digital engagement can be scaled to include two-way interaction, i.e. co-research</p>
|
||||
</div>
|
||||
|
||||
<div id="slide0f" class="step" data-x="5800" data-y="1000" data-z="-5500" data-rotate="0" data-scale="1">
|
||||
<p>Digital tools can be multi-scalar and multi-dimensional, enabling shallow and deep interactions depending on interest and skill</p>
|
||||
</div>
|
||||
|
||||
<div id="slide0f" class="step" data-x="5800" data-y="1000" data-z="-5500" data-rotate="0" data-scale="1">
|
||||
<p>Digital tools can be multi-scalar and multi-dimensional, enabling shallow and deep interactions depending on interest and skill</p>
|
||||
</div>
|
||||
|
||||
<div id="slide0g" class="step" data-x="4900" data-y="1800" data-z="-4000" data-rotate="0" data-scale="1">
|
||||
<p>Let's recap:</p>
|
||||
<p>Digital humanities = <br />playing around +<br /> co-researching +<br /> reaching lots of folks.</p>
|
||||
</div>
|
||||
|
||||
<div id="slide0h" class="step" data-x="5900" data-y="1800" data-z="-4000" data-rotate="0" data-scale="1">
|
||||
Why do I do the digital humanities?
|
||||
</div>
|
||||
|
||||
<div id="slide0i" class="step" data-x="6900" data-y="1800" data-z="-4000" data-rotate="0" data-scale="1">
|
||||
Mostly because I'm a bit of an activist.
|
||||
</div>
|
||||
|
||||
|
||||
<div id="slide1" class="step" data-x="800" data-y="3000" data-z="-3000" data-rotate="300" data-scale="1">
|
||||
<p><b>Community groups across Britain are doing amazing things to fix</b></p>
|
||||
</div>
|
||||
|
||||
<div id="slide1a" class="step" data-x="800" data-y="3325" data-z="-3000" data-rotate="240" data-scale="1">
|
||||
<p><b>The recession</b></p>
|
||||
</div>
|
||||
|
||||
<div id="slide1b" class="step" data-x="800" data-y="3325" data-z="-3000" data-rotate="180" data-scale="1">
|
||||
<p><b>Climate change</b></p>
|
||||
</div>
|
||||
|
||||
<div id="slide1c" class="step" data-x="800" data-y="3325" data-z="-3000" data-rotate="120" data-scale="1">
|
||||
<p><b>Donald trump</b></p>
|
||||
</div>
|
||||
|
||||
<div id="slide2" class="step" data-x="800" data-y="4325" data-z="-3000" data-rotate="280" data-scale="1">
|
||||
<p>and while things look pretty hopeless from a birds-eye view</p>
|
||||
</div>
|
||||
|
||||
<div id="slide3" class="step" data-x="3600" data-y="4300" data-z="-2500" data-rotate="280" data-scale="0.5" style="width: 600px;"><p>when you look more closely at communities across Britain you discover that amazing things are underway</p>
|
||||
</div>
|
||||
|
||||
<div id="slide4" class="step" data-x="3000" data-y="4500" data-z="-2500" data-rotate="260" data-scale="1">
|
||||
<p>Community level solutions are:</p>
|
||||
- innovative<br />
|
||||
- impactful<br />
|
||||
- sustainable<br />
|
||||
</div>
|
||||
|
||||
<div id="slide5" class="step" data-x="3300" data-y="22500" data-z="-3500" data-rotate="260" data-scale=".5">
|
||||
<p style="margin-top: 200px; margin-left: -2px; margin-right: 100px; left: -106px; position: relative;">
|
||||
...they're also invisible to our political and scholarly communities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="slide6" class="step" data-x="3500" data-y="21500" data-z="-4000" data-rotate="260" data-scale=".4">
|
||||
<p style="margin-top: 200px; margin-left: -2px; margin-right: 100px; left: -106px; position: relative;">
|
||||
This visibility problem
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="slide7" class="step" data-x="3500" data-y="20000" data-z="-3750" data-rotate="260" data-scale=".4">
|
||||
<p style="margin-top: 200px; margin-left: -2px; margin-right: 100px; left: -106px; position: relative;">
|
||||
impedes funding, collaboration, and multiplication
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="slide8" class="step" data-x="6850" data-y="7000" data-rotate="90" data-scale="3">
|
||||
<p>These groups desparately want to be visible!</p>
|
||||
</div>
|
||||
|
||||
<div id="slide8b" class="step" data-x="6850" data-y="8000" data-rotate="90" data-scale="3">
|
||||
<img src="images/group_map.png" alt="picture of a map with lots of dots" style="max-width:120%;">
|
||||
</div>
|
||||
|
||||
<div id="slide9" class="step" data-x="6250" data-y="7000" data-rotate="90" data-scale="2">
|
||||
<p>And maps are a fantastic way <br /> to communicate this significance visually.</p>
|
||||
</div>
|
||||
|
||||
<div id="slide10" class="step" data-x="5250" data-y="7000" data-rotate="90" data-scale="2">
|
||||
<p>And they know this - everyone has a map on their website</p>
|
||||
</div>
|
||||
|
||||
<div id="slide12" class="step" data-x="5500" data-y="7500" data-rotate="90" data-scale="1">
|
||||
<p>Development Trust Association Scotland</p>
|
||||
<img src="images/dtas_map.png" alt="picture of dtas website" style="max-width:100%;">
|
||||
</div>
|
||||
|
||||
<div id="slide13" class="step" data-x="5500" data-y="8500" data-rotate="90" data-scale="1">
|
||||
<p>Scottish Communities Climate Action Network</p>
|
||||
<img src="images/sccan_map.png" alt="picture of dtas website" style="max-width:100%;">
|
||||
</div>
|
||||
|
||||
<div id="slide14" class="step" data-x="5500" data-y="9500" data-rotate="90" data-scale="1">
|
||||
<p>Eco-Congregation Scotland</p>
|
||||
<img src="images/ecs_map.png" alt="picture of dtas website" style="max-width:100%;">
|
||||
</div>
|
||||
|
||||
<div id="slide15" class="step" data-x="4500" data-y="8500" data-rotate="90" data-scale="5">
|
||||
<p>And these maps are all hosted by google.</p>
|
||||
</div>
|
||||
|
||||
<div id="slide16" class="step" data-x="3500" data-y="8500" data-rotate="90" data-scale="5">
|
||||
<p>This is a bad thing.</p>
|
||||
</div>
|
||||
|
||||
<div id="slide17" class="step" data-x="1500" data-y="8500" data-rotate="90" data-scale="1">
|
||||
<p>- The Google interface is user friendly<br />
|
||||
But in exchange for this "free" service,</br> you agree to some pretty predatory Terms of Service<br />
|
||||
They can (and probably will) cancel your service at any time without warning<br />
|
||||
You get no analytics<br />
|
||||
And the data is stuck in a black box that doesn't interconnect<br /></p>
|
||||
</div>
|
||||
|
||||
<div id="slide18" class="step" data-x="-1500" data-y="10500" data-rotate="90" data-scale="3">
|
||||
<p>Let's recap:</p>
|
||||
</div>
|
||||
|
||||
<div id="slide19" class="step" data-x="-2500" data-y="10500" data-rotate="90" data-scale="3">
|
||||
<p>
|
||||
Community groups are providing innovation and value<br />
|
||||
This is going un-noticed<br />
|
||||
and lack of knowledge impedes funding and collaboration<br />
|
||||
We can address this problem cartographically<br />
|
||||
But our options stink<br />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="slide20" class="step" data-x="0" data-y="12000" data-rotate="90" data-scale="3">
|
||||
<p>Digital Humanities to the rescue!</p>
|
||||
|
||||
</div>
|
||||
<div id="slide20b" class="step" data-x="-1000" data-y="12000" data-rotate="90" data-scale="3">
|
||||
<p>Let me introduce you to the (AHRC funded) Mapping Community project</p>
|
||||
</div>
|
||||
|
||||
<div id="slide21" class="step" data-x="-8500" data-y="11000" data-scale="1">
|
||||
<p>The University of Birmingham now hosts a "spatial intelligence" platform</p>
|
||||
</div>
|
||||
|
||||
<div id="slide22" class="step" data-x="-9500" data-y="12000" data-scale="1">
|
||||
<p>This enables community groups (co-researchers!) to maintain a live database of their networks</p>
|
||||
<img src="images/carto_groups_screen1.tiff" alt="picture of permaculture groups" style="max-width:50%">
|
||||
</div>
|
||||
|
||||
<div id="slide22b" class="step" data-x="-8500" data-y="12000" data-scale="1">
|
||||
<p>That database is the back-end for a map</p>
|
||||
<img src="images/carto_groups_screen2.tiff" alt="picture of permaculture groups" style="max-width:50%">
|
||||
</div>
|
||||
|
||||
|
||||
<div id="slide23" class="step" data-x="-7500" data-y="12000" data-scale="1">
|
||||
Using these data sets scholarly researchers (like me!) can conduct location-based analytics for groups and their umbrella organisations</p>
|
||||
<img src="images/simd_jitterplot.png" alt="picture of dtas website" style="max-width:50%">
|
||||
</div>
|
||||
<div id="slide23a" class="step" data-x="-6500" data-y="12000" data-scale="1">
|
||||
<p><a href="https://zenodo.org/communities/mapping-community/?page=1&size=20">open data</a> is more sustainable and can be re-used by other social policy researchers</p>
|
||||
<iframe src="https://zenodo.org/communities/mapping-community/?page=1&size=20" height="480" width="600"></iframe>
|
||||
</div>
|
||||
|
||||
<div id="slide24" class="step" data-x="-5500" data-y="12000" data-scale="1">
|
||||
<p>we can help groups to find new local cross-network collaborations</p>
|
||||
<iframe src="http://findcommonground.uk" height="480" width="600"></iframe>
|
||||
</div>
|
||||
|
||||
<div id="slide25" class="step" data-x="-8500" data-y="16500" data-scale="1">
|
||||
<p>The map provides a sandbox where we can find new alliances, new research partnerships and generate more accurate data!</p>
|
||||
</div>
|
||||
|
||||
<div id="slide26" class="step" data-x="-7500" data-y="17500" data-scale="5">
|
||||
<h2><a href="http://mapping.community">Now Let's Demo!</a></h2>
|
||||
<iframe src="https://kidwellj.carto.com/viz/136540a8-dc0c-11e6-b3ff-0ee66e2c9693/public_map" height="600" width="800"></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://jeremykidwell.info/files/presentations/js/impress.js"></script>
|
||||
<script>impress().init();</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
BIN
static/files/presentations/presentation_201406_blogging.key.zip
Normal file
BIN
static/files/presentations/presentation_201406_blogging.key.zip
Normal file
Binary file not shown.
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="reveal.js/css/reveal.css">
|
||||
<link rel="stylesheet" href="reveal.js/css/theme/solarized.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<section>
|
||||
<section>
|
||||
<h1>Who Are Eco-Congregations?</h1>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Began in 1999</h1>
|
||||
<p>Initiated by Forth Environment Link outreach (central Scotland, environmental education charity), later funded by Keep Scotland Beautiful, Scottish Government and ECS member congregations.</p>
|
||||
</section>
|
||||
<section>
|
||||
<div align="left"><h2>Over 350 Churches in Scotland Participate (~9%)</h2>
|
||||
<p style="text-align:left">Compare that with...</p>
|
||||
<ul>
|
||||
<li>233 Development Trusts</li>
|
||||
<li>88 Climate Action Groups<br>
|
||||
&Transition Initiatives</li>
|
||||
<li>14 Permaculture Projects</li>
|
||||
</ul></div></section>
|
||||
<section><div align="right"><img style="" data-natural-width="530" data-natural-height="630" data-src="images/ECS_map.png"></div>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Participating in a variety of low carbon activities...</h2>
|
||||
<p>including 41 CCF funded projects</p>
|
||||
<ul>
|
||||
<li>Recycling</li>
|
||||
<li>Food growing</li>
|
||||
<li>Improving building heating & energy use</li>
|
||||
<li>Implementing renewables</li>
|
||||
<li>Hosting educational events</li>
|
||||
<li>Linking religious values and pro-environmental behaviour</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Slightly more urban, but with a strong presence in specific remote areas</h4>
|
||||
<img style="" data-natural-width="900" data-natural-height="500" data-src="images/UR8_fold.png">
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<h1>Our Research</h1>
|
||||
</section>
|
||||
<section>
|
||||
<p><span style="font-size:1.6em">Co-funded by AHRC / ESRC<br>
|
||||
2013-2016</span></p>
|
||||
<p><span style="font-size:1.6em">http://ancestraltime.org.uk</span></p>
|
||||
</section>
|
||||
<section>
|
||||
<img data-src="images/team_photo.jpg">
|
||||
</section>
|
||||
<section>
|
||||
<h4>Working with a lot of data</h4>
|
||||
<ul>
|
||||
<li><span style="font-size:0.7em">participant observation at worship and community events</span></li>
|
||||
<li><span style="font-size:0.7em">researchers assisted with site visits / assessments</span></li>
|
||||
<li><span style="font-size:0.7em">documentary analysis of a Eco- Congregation award applications<br>
|
||||
(90 of 133 total awarded sites, or 67.7%)</span></li>
|
||||
<li><span style="font-size:0.7em">analysis of ECS church websites</span></li>
|
||||
<li><span style="font-size:0.7em">researchers attended, participated and observed at network events, board meetings, green group meetings, and annual conferences</span></li>
|
||||
<li><span style="font-size:0.7em">social network engagement analysis of ECS</span></li>
|
||||
<li><span style="font-size:0.7em">interviews with individuals and groups across Scotland</span></li>
|
||||
<li><span style="font-size:0.7em">interviews with volunteers and executives at related secular groups</span></li>
|
||||
<li><span style="font-size:0.7em">interviews with the ECS staff team and board members</span></li>
|
||||
<li><span style="font-size:0.7em">GIS-based comparative demographic analysis</span></li>
|
||||
<li><span style="font-size:0.7em">sampling of at least 10% across a variety of demographics (denomination, region, urban/rural, deprivation)</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Our primary research question:</h2>
|
||||
<p>Do unique conceptions of time maintained within spiritual communities offer a possible synergy between heritage and environment?</p>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<h1>Our Findings?</h1>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Eco-Congregations tend to stay "off the radar"</h2>
|
||||
<ul>
|
||||
<li>No mention in 2015 Changeworks study (cf. p. 31; Table 7.2)</li>
|
||||
<li>Active but silent partner behind some Community Development Trusts and Transition Groups, but also working in some communities in an independent capacity.</li>
|
||||
<li>Partnerships with large environmental charities<br>
|
||||
(RSPB, WWF)</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Reasons for Action?<br>
|
||||
<span style="font-size:0.5em">Climate justice, stewardship, love of nature, intergenerational concern...</span>
|
||||
</h2>
|
||||
<img data-src="images/motivations.png">
|
||||
</section>
|
||||
<section>
|
||||
<h3>A place where values are linked with pro-environmental behaviours, but more than this as well...</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Hidden pro-Climate Impacts?</h2>
|
||||
<ul>
|
||||
<li>Trialing new ideas for sustainability<br>
|
||||
(case study: solar panels, community gardens, boilers)</li>
|
||||
<li>Provide personnel and "endurance" for CCF grants, sustainability projects, venues for other groups</li>
|
||||
<li>Linking spirituality with environmental concern</li>
|
||||
<li>Validating "moral" aspect to climate change mitigation</li>
|
||||
<li>Highlighting the international aspect of climate impacts and relational side to mitigation</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>For discussion</h2>
|
||||
<ul>
|
||||
<li>How can our research assist government in improving outreach to and targetting of and support for religious communities in Scotland on low-carbon activities?</li>
|
||||
</ul>
|
||||
|
||||
<ol>
|
||||
<li>Covering the spectrum, from "uninvolved" to "climate champions"</li>
|
||||
<li>Mobilising values frameworks, but also affirming the role of lay knowledge in reckoning with climate change</li>
|
||||
<li>CCF engagement with churches</li>
|
||||
<li>RPP3</li>
|
||||
</ol>
|
||||
</section>
|
||||
</section>
|
||||
</div></div>
|
||||
<script src="reveal.js/js/reveal.js"></script>
|
||||
<script>
|
||||
Reveal.initialize();
|
||||
</script>
|
||||
</body></html>
|
||||
BIN
static/files/presentations/presentation_20160618_solas.key.zip
Normal file
BIN
static/files/presentations/presentation_20160618_solas.key.zip
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://jeremykidwell.info/files/presentations/reveal.js/css/reveal.css">
|
||||
<link rel="stylesheet" href="https://jeremykidwell.info/files/presentations/reveal.js/css/theme/solarized.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<section>
|
||||
<h1>My Digital Humanities Rabbit Trails in 2016</h1>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<h1>Teaching Theological Ethics</h1>
|
||||
<p>Goal: To give students agency in course planning; design term 2 teaching around student-led presentations.</p>
|
||||
</section>
|
||||
<section>
|
||||
<ul>
|
||||
<li>Low-fi beginnings: whiteboarding topics</li>
|
||||
<li>Going digital: Fed 35 topics into a digital survey</li>
|
||||
<li>First roadblock: canvas survey tool stinks</li>
|
||||
<li>Second roadblock: central IT unwilling to deploy lightweight, open-source alternative without "a business case"</li>
|
||||
<li>Solution: rolled my own instance of LimeSurvey on personal webhost (reclaim.com)</li>
|
||||
<li>Example: <a href=http://sccs-survey.org.uk/index.php/162945>http://sccs-survey.org.uk/index.php/162945</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<ul>
|
||||
<li>Third roadblock: Need to level playing field for students without tablets and smartphones</li>
|
||||
<li>Solution: Thanks to Arts IT! Discovered a big box full of iPads</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Results?</h2>
|
||||
</section>
|
||||
<section>
|
||||
<p>Worked well. iPads had trouble with wifi, but students just shared the 8-10 that worked.</p>
|
||||
<p>Really interesting differences in engagement styles with the tool</p>
|
||||
<p>Have a fantastic store of data I need to parse through to see how topic choices map onto student demographics</p>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<h1>Research?</h1>
|
||||
</section>
|
||||
<section>
|
||||
<p>Topic: climate change and low-carbon action in religious communities</p>
|
||||
<p>Digital solution: Generate a map to consolidate practitioner relationships; resource third sector groups; parse demographics</p>
|
||||
</section>
|
||||
<section><h1>Research challenge?</h1></section>
|
||||
<section><p>Data exists, but huge problems with transparency, accuracy, sustainability</p></section>
|
||||
<section>
|
||||
<h2>Technical solution?</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>OPEN EVERYTHING! Source! Data! Tools!</h2>
|
||||
<p>Mapping tools: QGIS, CartoDB, D3.js, carto.css</p>
|
||||
<p>Project website: Jekyll via github</p>
|
||||
<p>Sample: <a href="https://mapping.community">http://mapping.community</a></p>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<p>The next few rabbit trails:</p>
|
||||
<ul>
|
||||
<li>Decision time: Hacking resources list vs. Hacking a canvas wiki page</li>
|
||||
<li>Moving everything to github/gitlab</li>
|
||||
<li>Writing some "reproducible research" using RMarkdown</li>
|
||||
<li>Social network analysis</li>
|
||||
<li>Getting a discourse server (https://github.com/discourse/discourse)</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://jeremykidwell.info/files/presentations/reveal.js/js/reveal.js"></script>
|
||||
<script>
|
||||
Reveal.initialize();
|
||||
</script>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="http://jeremykidwell.info/presentations/reveal.js/css/reveal.css">
|
||||
<link rel="stylesheet" href="http://jeremykidwell.info/presentations/reveal.js/css/theme/solarized.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<section>
|
||||
<h1>Theological Ethics Final Exam</h1>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<h1>Exam Format</h1>
|
||||
<ul>
|
||||
<li>At least 12 questions</li>
|
||||
<li>90 minutes to answer 2 questions</li>
|
||||
<li>almost all topics will be represented</li>
|
||||
<li>questions will invite critical reflection on the issue as it might be framed by "theological ethics".</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<p>what we've covered so far</p>
|
||||
<ul>
|
||||
<li>genetic embryo screening</li>
|
||||
<li>animal testing</li>
|
||||
<li>pornography</li>
|
||||
<li>polygamy</li>
|
||||
<li>dating reality shows</li>
|
||||
<li>gun control</li>
|
||||
<li>drug legalization</li>
|
||||
<li>censorship</li>
|
||||
<li>abortion</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<p>coming up...</p>
|
||||
<ul>
|
||||
<li>immigration and asylum</li>
|
||||
<li>plastic surgery</li>
|
||||
<li>climate change</li>
|
||||
<li>Artificial intelligence</li>
|
||||
<li>surveillance</li>
|
||||
<li>social media</li>
|
||||
<li>etc.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Let's Discuss!</h2>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<h1>How to prepare?</h1>
|
||||
</section>
|
||||
<section>
|
||||
<p>Think about a range of these issues, consider theological resources and perspectives on those issues</p>
|
||||
</section>
|
||||
<section><h3>But how do I do critical theological reflection?</h3></section>
|
||||
<section>
|
||||
<p>pick one of the following, discuss with your neighbour - what are theological resources and perspectives for this issue?</p>
|
||||
<ul>
|
||||
<li>genetic embryo screening</li>
|
||||
<li>animal testing</li>
|
||||
<li>pornography</li>
|
||||
<li>polygamy</li>
|
||||
<li>dating reality shows</li>
|
||||
<li>gun control</li>
|
||||
<li>drug legalization</li>
|
||||
<li>censorship</li>
|
||||
<li>abortion</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<p>In my view good critical theological reflection will do one or more of the following</p>
|
||||
<ul>
|
||||
<li>compare differences and symmetries between theological and secular philosophical reflection (virtue, deontological, egoist, utilitarian, etc.</li>
|
||||
<li>reflect "from within" a tradition on that issue using resources like scripture, theological reflection (relationship between creatures and creator within Abrahamic traditions)</li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script src="http://jeremykidwell.info/presentations/reveal.js/js/reveal.js"></script>
|
||||
<script>
|
||||
Reveal.initialize();
|
||||
</script>
|
||||
</body></html>
|
||||
53
static/files/presentations/presentation_20170522_regen.html
Normal file
53
static/files/presentations/presentation_20170522_regen.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="reveal.js/css/reveal.css">
|
||||
<link rel="stylesheet" href="reveal.js/css/theme/solarized.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<section>
|
||||
<section>
|
||||
<h3>I am an (Christian) environmental political philosopher.</h3>
|
||||
</section>
|
||||
<section>
|
||||
<p>But as I hinted last night, I am part of a small but growing group of philosophers who recognise the dangers of a phioosopher who sits in a room by themself deductively solving the world crises. The way to avoid cultural and political irrelevance is to ground the research process in the messy reality of human communities and real ecologies.</p>
|
||||
</section>
|
||||
<section><p>I think that the scientific community has been learning something similar from the failure of the IPCC process, and as a result we have new energy being directed towards the "human dimension" of climate change. This is a broadening out of the cultural and empirical basis for measuring environmental change and its impacts, an attempt to participate in the broader re-orientation of environmental science to integrate the environmental humanities.</p>
|
||||
</section>
|
||||
<section><p>So in many ways, the kind of work I am doing is an exercise in translation for the various stakeholders involved in British policy reactions to climate change. Rooted in reflection on the political dimensions of our action, here are a few examples of what this looks like in practice:</p>
|
||||
</section>
|
||||
<section>
|
||||
<section><p>- Against the abstractive, nationalistic tendencies of cc mitigatin policy I am developing a series of digital datasets and maps of low-carbon community groups in the UK and eventually Europe.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Example 1</h3>
|
||||
<iframe width="100%" height="520" frameborder="0" src="https://carto.mapping.community/user/mapcomm-admin/builder/81a7f1dc-36f7-11e7-82f0-005056372088/embed" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
|
||||
<p>Churches and Conservation Map</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Example 2</h3>
|
||||
<iframe width="100%" height="520" frameborder="0" src="https://carto.mapping.community/user/mapcomm-admin/builder/ace61632-3d30-11e7-8f27-0242b6d3f185/embed" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
|
||||
<p>All groups in Britain</p>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<p>- Against the overly mathematized process of biological field recording in the UK, I am working with amateur biological field recorders, who in almost every case in their work are registering declining and degraded ecosystems, to augment their empirical domain to include presence and haunting in the landscape, and the presence of grief in their experience of the landscape.</p>
|
||||
</section>
|
||||
<section><img src="http://jeremykidwell.info/presentations/images/spiritual_landscapes.jpg"></section>
|
||||
</section>
|
||||
<section>
|
||||
<p>- In a similar way, I am working with architects, urban planners, and local community leaders in the W Midlands to integrate an account of spiritual landscapes in their planning work on urban green space.</p>
|
||||
</section>
|
||||
<section>
|
||||
<p>- And I am in the midst of long-term fieldwork with eco-churches, a'rocha groups, and Ecocongregations to better understand whether and why their work is different from other secular groups and then to communicate this to policy makers and environmental infrastructure who largely ignore them.</p>
|
||||
</section>
|
||||
</section>
|
||||
</div></div>
|
||||
<script src="reveal.js/js/reveal.js"></script>
|
||||
<script>
|
||||
Reveal.initialize();
|
||||
</script>
|
||||
</body></html>
|
||||
1
static/files/presentations/reveal.js
Submodule
1
static/files/presentations/reveal.js
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 568c7516f7ff7da7824db033946619d2c7ad761f
|
||||
Loading…
Add table
Add a link
Reference in a new issue