adding files

This commit is contained in:
Jeremy Kidwell 2017-06-27 21:08:37 +01:00
parent a878fcf3fc
commit 131ce4af86
77 changed files with 2765 additions and 0 deletions

8
.gitignore vendored Normal file
View file

@ -0,0 +1,8 @@
public
yugo
.oldgit
static/css/hyde-min.css
static/css/poole-min.css
static/css/stylesheet-min.css
static/css/stylesheet.css
static/css/syntax-min.css

View file

@ -0,0 +1,16 @@
---
author: Jeremy Kidwell
date: "2014-09-30"
#layout: post
slug: climate_march
status: publish
title: Address to the Peoples Climate March
categories:
- Speeches
---
I devoted some time these past six weeks to helping organise a <a href="http://peoplesclimate.org/" target="_blank">people's climate march</a> in Edinburgh. Given our research focus on how Christians and faith communities mobilise for action around climate change and other related ecological issues, this probably doesn't come as a surprise. What did surprise many people, myself included, was the extent of the march (pictures <a href="https://www.flickr.com/groups/2747585@N23/pool" target="_blank">here</a>) that occurred last Sunday (21 Sep 2014). We had hoped for 200-300 and by most estimates, we had nearly 3000 people marching through the streets of Edinburgh committing themselves to action and calling on our nation's leaders here in Scotland to address climate change in substantial ways. I gave a short speech to those gathered before we set off to march, and I offer the text of my speech here:
[![march-photo](images/climate_march.jpg "My address")]
Its great to see so many of you here! Im really excited to see such a huge crowd here today and our march and gathering here is a big part of an even bigger gathering that is going on today across the world. Peoples Climate Marches are happening in over 1500 cities today, with over 2 million people marching. The UN meets this week for a global summit on climate change. This is the first of three summits, and were going to be marching in Edinburgh and across the world at all of them. We are here today because we all know that we have a problem. The consequences of climate change are now impossible to ignore, as human activity has pushed the atmospheric concentration of CO2 way past the danger zone of 350 parts per million. Atmosphere may be invisible, but climate change is not. Boats are sailing through the arctic in the summer now, and our weather has become chaotic and dangerous, as so many people in Britain experienced with flooding last year, and that was just a preview - island nations which have been subjected to a relentless barrage of superstorms - have begged the rest of the world to join them in taking action to avoid catastrophic climate change. Though we often talk about the big problems surrounding climate change, it isn't just about big things, though the loss of public health and safety is a key concern. As our climate changes we grieve the loss of familiar and small things as well; birds, butterflies and frogs are disappearing at an alarming rate. My son Noah loves frogs, and as I see the world through his eyes with wonderment each day, I think, we have to stop this madness. We have to address climate change for his future. You see, I'm here today, not because of fear, but because of love. That great commandment to love your neighbour as yourself compels me to stop climate change for Noah's future, for all the people who live in vulnerable areas, for the beautiful creatures and landscapes which are a gift entrusted to all of us. I'm here today because of love. So why haven't we solved climate change? It isn't invisble, and as Aaron will share with you in a few moments, we've known about it for decades. Our civilization has accomplished many astonishing things: we've eradicated polio and written the magna carta. But there are lobbyists who are working hard on behalf of fossil fuel companies to obstruct change because they stand to lose a lot of money. So even though our best scientists have helped heighten our awareness of climate change and our most skilled diplomats and policy makers are about to meet in the UN, this march, and all the other marches across the world are absolutely crucial. This march today demonstrates the strengthening of a movement, here in Edinburgh and across the world as we all join in marching to show our concern and solidarity on this issue. This movement is one which will provide us with a new opportunity to show our best side: to show our innovation on clean energy, to reclaim the beauty and joy of living simply, to remember the fun that comes when a whole city comes together. That is what we are starting here today, and this isn't the end - we're going to have a bigger march in nine months in December before the UN Climate Change conference in Lima, and even bigger again before the conference in Paris in 2015. We are all here today because we know that we are the solution to the problem of climate change. Marching today is just the start, as we will go home to organise and mobilise: join a group, start a group, speak to our neighbours, write letters, start a book club, write to and visit our MPs, etc etc etc. Our standing here together shows our commitment to building a new society and it is a privilege for me to stand here with you today as we march through the centre of our Nations capitol.

62
content/blog/fridaypoem.md Executable file
View file

@ -0,0 +1,62 @@
---
author: Jeremy Kidwell
date: "2016-02-08"
#layout: post
slug: friday-poem
status: publish
title: A poem for your friday
wordpress_id: '468'
categories:
- Poems
---
"The Heaven of Animals" by James L. Dickey
Here they are. The soft eyes open.
If they have lived in a wood
It is a wood.
If they have lived on plains
It is grass rolling
Under their feet forever.
Having no souls, they have come,
Anyway, beyond their knowing.
Their instincts wholly bloom
And they rise.
The soft eyes open.
To match them, the landscape flowers,
Outdoing, desperately
Outdoing what is required:
The richest wood,
The deepest field.
For some of these,
It could not be the place
It is, without blood.
These hunt, as they have done,
But with claws and teeth grown perfect,
More deadly than they can believe.
They stalk more silently,
And crouch on the limbs of trees,
And their descent
Upon the bright backs of their prey
May take years
In a sovereign floating of joy.
And those that are hunted
Know this as their life,
Their reward: to walk
Under such trees in full knowledge
Of what is in glory above them,
And to feel no fear,
But acceptance, compliance.
Fulfilling themselves without pain
At the cycles center,
They tremble, they walk
Under the tree,
They fall, they are torn,
They rise, they walk again.

View file

@ -0,0 +1,14 @@
---
author: Jeremy Kidwell
date: "2014-05-20"
#layout: post
slug: on_dying
status: publish
title: Fr Schmemann on Dying
categories:
- Quotes
---
This morning during Matins I had a “jolt of happiness,” of fullness of life, and at the same time the thought: I will have to die! But in such a fleeting breath of happiness, time usually “gathers” itself. In an instant, not only are all such breaths of happiness remembered but they are present and alive— that Holy Saturday in Paris when I was a young man—and many such “breaks.” It seems to me that eternity might be not the stopping of time, but precisely its resurrection and gathering. The fragmentation of time, its division, is the fall of eternity. Maybe the words of Christ are about time when He said: “... not to destroy anything but will raise it all on the last day.” The thirst for solitude, peace, freedom, is thirst for the liberation of time from cumbersome dead bodies, from hustle; thirst for the transformation of time into what it should be—the receptacle, the chalice of eternity. Liturgy is the conversion of time, its filling with eternity. There are two irreconcilable types of spirituality: one that strives to liberate man from time (Buddhism, Hinduism, Nirvana, etc.); the other that strives to liberate time. In genuine eternity, all is alive. The limit and the fullness: the whole of time, the whole of life is in each moment. But there is also the perpetual problem: What about the evil moments? Evil time? The terrible fear before dying of the drowning man, of the man falling from the tenth floor about to be crushed on the pavement? What about the tears of an abused child?
From The Journals of Father Alexander Schmemann 1973—1983, p. 78. Cited in Gallaher, Chalice of eternity: an Orthodox theology of time, St Vladimir's Theological Quarterly 57:1, 5-35 (2013).

14
content/blog/surprising_turn.md Executable file
View file

@ -0,0 +1,14 @@
---
author: Jeremy Kidwell
date: "2014-09-06"
#layout: post
slug: surprising_turn
status: publish
title: When a surprising turn occurs
categories:
- Quotes
---
"It is pertinent to see that in a world of becoming this or that force-field can go through a long period of relative equilibrium, or even gradual progression as defined by standards extrapolated from that equilibrium. Much of social thought and political theory takes such periods as the base from which to define time and progress themselves, making the practitioners all the more disoriented when a surprising turn occurs, that is, when a period of intense disequilibrium issues in a new plateau that scrambles the old sense of progress and regress in this or that way. There may be long chrono-periods of relative stabilization in several zones that matter to human participants, but during a time of accelerated disequilibrium the ethico-politics of judgment through extrapolation from the recent past to the medium or distant future becomes rattled or breaks down. It is now time to modify old extrapolations of possibility and desirability. During such periods Kantian and neoKantian ideas of the universal are retrospectively shown to have been filled with more material from a historically specific mode of common sense than their carriers had imagined. The Augustinian-Kantian sense that human beings are unique agents in the world, while the rest of the world must be comprehended through non-agentic patterns of causality, may turn out to be one of them. To the extent this idea takes hold, established notions of the human science and morality become ripe candidates for reconstitution."
WE Connolly, A World of Becoming (Duke UP, 2010), 150.

View file

@ -0,0 +1,12 @@
---
date: "2017-05-10T15:00:00+01:00"
title: "Enhancing Public Understanding of Activists, Religion (and Religious Activists!) through the Geo+Digital-Humanities"
host: "British Library Labs event, University of Birmingham"
publishdate: "2017-05-10"
---
Presentation on "Enhancing Public Understanding of Activists, Religion (and Religious Activists!) through the Geo+Digital-Humanities".
This is a talk presented at the [British Library Labs Road Show](https://www.eventbrite.co.uk/e/learning-the-lessons-of-working-with-the-british-librarys-digital-content-and-data-for-your-tickets-32351805120), at the University of Birmingham
My slides (which used [http://impress.github.io/impress.js/](impress.js)) are [available here](https://jeremykidwell.info/files/presentations/presentation-20170511-bl_mapping.html")

View file

@ -0,0 +1,8 @@
---
date: "2017-01-06T15:00:00+01:00"
title: "Mapping Churches"
host: "Annual meeting of British and Irish church statisticians, Cardiff, Wales"
publishdate: "2017-01-06"
---
Keynote (sorry!) slides can be [downloaded here](https://jeremykidwell.info/files/presentations/presentation-20160106-mapping_churches.key.zip)

View file

@ -0,0 +1,8 @@
---
date: "2017-01-19T15:00:00+01:00"
title: "Digital Humanities projects in 2016"
host: "Digital Champions forum at the University of Birmingham"
publishdate: "2017-01-19"
---
My slides (which used [http://lab.hakim.se/reveal-js/#/](reveal.js)) are [available here](https://jeremykidwell.info/files/presentations/presentation_20170118_digital_hum.html")

View file

@ -0,0 +1,8 @@
---
date: "2017-01-20T15:00:00+01:00"
title: "Presentation on Mapping Community to representatives of the Scottish Community Alliance and Scottish Government"
host: "Scottish Community Alliance, Edinburgh"
publishdate: "2017-01-20"
---
My slides (which used [http://impress.github.io/impress.js/](impress.js)) are [available here](https://jeremykidwell.info/files/presentations/presentation-20170120-comm_anchors.html")

View file

@ -0,0 +1,14 @@
---
title: “Radical or Realist? The Ethics of Work in John Chrysostom"
author: Jeremy Kidwell
status: Published
type: published
citation: “Radical or Realist? The Ethics of Work in John Chrysostom” in Theology and Economics, ed. By Jeremy Kidwell and Sean Doherty, Palgrave.
tag: business-ethics
subjects: patristics chrysostom work political-economy
comments: no
date: 2015-06-01
publishdate: 2015-06-15
---
Abstract

View file

@ -0,0 +1,21 @@
---
title: "The Theology of Craft and the Craft of Work: From Tabernacle to Eucharist"
author: Jeremy Kidwell
status: Published
type: monograph
kind: book
citation: "<em>The Theology of Craft and the Craft of Work: From Tabernacle to Eucharist</em>. Routledge."
tag: craft
subjects: work craft
comments: no
date: 2016-09-01
publishdate: 2016-09-15
---
<p><figure><img class="craftbook" src="http://jeremykidwell.info/images/theology_of_craft-medium.jpg" align="right" width=300px alt="The Theology of Craft and the Craft of Work"></figure>An important reconceptualisation is taking place in the way people express creativity, work together, and engage in labour; particularly with the rise of the maker movement and craft work. But is this a new phenomenon? In <em>The Theology of Craft</em> I explore the Hebrew bible and Greek New Testament in conversation with other ancient craft narratives to see whether there is a model for good work embedded there. Through an examination of themes such as agency, aesthetics, sociality, skill, and the material culture of work, I argue that the church (or new temple) is both the product and the site of moral work and furthermore that Christian worship provides a moral context for work.
<a href="https://www.routledge.com/products/9781472476517">Publisher</a> - <a href="http://www.hive.co.uk/Product/Jeremy-Kidwell/The-Theology-of-Craft-and-the-Craft-of-Work--From-Tabernacle-to-Eucharist/18798594">Hive Books (UK indy sellers)</a> - <a href="http://www.indiebound.org/book/9781472476517">IndieBound (Independent booksellers in the USA) </a>
<!---
<p><em>Reviews:</em> <a href="http://www.journals.uchicago.edu/doi/pdf/10.1086/522391"><em>American Journal of Sociology</em></a> (Greta Krippner), <a href="http://www.kieranhealy.org/files/misc/hippenajot.pdf"><em>American Journal of Transplantation</em></a> (Ben Hippen), <em>Social Forces</em> (Jane Allyn Piliavin), <a href="http://www.ingentaconnect.com/content/asoca/cs/2008/00000037/00000006/art00018"><em>Contemporary Sociology</em></a> (Carol Heimer), <a href="http://www.nytimes.com/2007/01/28/books/review/Postrel.t.html?ex=157680000&amp;en=f390b3396e0ec28a&amp;ei=5124&amp;partner=permalink&amp;exprod=permalink"><em>The New York Times</em></a> (Virginia Postrel), <a href="http://nvs.sagepub.com/cgi/rapidpdf/0899764008319689v1"><em>Nonprofit and Voluntary Sector Quarterly</em></a> (E. Gil Clary), <a href="http://ser.oxfordjournals.org/cgi/reprint/6/2/365"><em>Socio-Economic Review</em></a> (Philippe Steiner), <em>Le Mouvement Social</em> (Sophie Chauveau), <a href="http://www.australianreview.net/digest/2007/06/waldby.html"><em>Australian Review of Public Affairs</em></a> (Catherine Waldby), <a href="http://econsoc.mpifg.de/archive/econ_soc_08-1.pdf"><em>EES Newsletter</em></a> (Rene Almeling), <a href="http://www.anthrosource.net/doi/pdfplus/10.1111/j.1548-1387.2008.00006_3.x"><em>Medical Anthropology Quarterly</em></a> (Lesley Sharp), <a href="http://www.sciencedirect.com/science?_ob=ArticleURL&amp;_udi=B6VR1-4RTCPT9-B&amp;_user=56761&amp;_coverDate=03%2F31%2F2008&amp;_alid=760447016&amp;_rdoc=1&amp;_fmt=high&amp;_orig=search&amp;_cdi=6221&amp;_sort=d&amp;_docanchor=&amp;view=c&amp;_ct=1&amp;_acct=C000059541&amp;_version=1&amp;_urlVersion=0&amp;_userid=56761&amp;md5=4e61d07203022b07cbdc0d671747f7b3"><em>Sociologie du Travail</em></a> (Philippe Steiner). <br /> <br /></p>
-->

View file

@ -0,0 +1,20 @@
---
title: "Theology and Economics: A Christian Vision of the Common Good"
author: Jeremy Kidwell
status: Published
type: monograph
kind: book
citation: "<em>Theology and Economics: A Christian Vision of the Common Good</em>, edited by Jeremy Kidwell and Sean Doherty. Palgrave McMillan"
tag: economics
subjects: economics theology
comments: no
date: 2015-06-01
publishdate: 2015-06-15
---
<p><figure><img class="econbook" src="http://jeremykidwell.info/images/theology_and_economics-medium.jpg" align="right" width=300px alt="Theology and Economics: A Christian Vision of the Common Good"></figure> This volume brings together a prominent group of Christian economists and theologians to provide an interdisciplinary look at how we might use the tools of economic and theological reasoning to cultivate more just and moral economies for the 21st century.
<a href="http://www.palgrave.com/gb/book/9781137552235">Publisher</a> - <a href="http://www.hive.co.uk/Product/Jeremy-Kidwell/Theology-and-Economics--A-Christian-Vision-of-the-Common-Good/17570373">Hive Books (UK indy sellers)</a> - <a href="https://books.google.co.uk/books?id=JMOhCgAAQBAJ&printsec=frontcover&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false">Google Books</a> - <a href="http://www.indiebound.org/book/9781472476517">IndieBound (Independent booksellers in the USA) </a>
<em>Reviews:</em> <a href="http://www.theosthinktank.co.uk/comment/2016/03/17/theology-and-economics"><em>Theos</em></a> (Nick Spencer) <br /> <br /></p>
--->

View file

@ -0,0 +1,15 @@
---
title: "Hybrid Encounters in Reconciliation Ecology"
author: Jeremy Kidwell
status: Published
type: published
citation: "&ldquo;Hybrid Encounters in Reconciliation Ecology&rdquo; in <em>Worldviews: Global Religions, Culture, and Ecology</em>, vol 20, issue 3, (Oct, 2016)"
tag: business-ethics
subjects: patristics chrysostom work political-economy
comments: no
file: hybrid_encounters.pdf
date: 2016-03-01
publishdate: 2016-03-20
---
Over the past century, environmental scientists have developed a range of conservation approaches. Each of these, from management to restoration has embedded within it certain dualisms which create exclusive spaces or agencies for “human” and “nature.” I begin with a critique of these binaries as they occur in philosopher, Florence R. Kluck- hohns influential model and in more recent narratives about the “Anthropocene,” and then turn to examine some of the novel features of “reconciliation ecology” as it has recently been deployed in the environmental sciences. Though this model is beginning to see wider use by scientists, it has not yet been explored within a religious framework. Taking up Miroslav Volfs suggestion that reconciliation involves a “double strategy” I highlight ways that reconciliation can (1) provide a viable model for promoting an “embrace” of the other and (2) better integrate the past history of negative human biotic impacts.

View file

@ -0,0 +1,20 @@
---
title: "Mapping Environmental Action"
author: Jermey Kidwell
status: Forthcoming
type: unpublished
citation: "&ldquo;Mapping Environmental Action.&rdquo; <em>TBD</em>"
tag:
file:
subjects:
comments: no
date: 2017-02-24
publishdate: 2017-02-24
filter:
- erb
- markdown
- rubypants
---
This article (PDF coming soon!) presents a GIS-based analysis using R which analyses the footprint of several environmental groups in Scotland against standard demographics. This is my first attempt to use RMarkdown in a sustained way, so it's taking a long time. Bear with me!

View file

@ -0,0 +1,20 @@
---
title: "Changing Uses of Old and New Media in World Christianity"
author: Jeremy Kidwell
status: Published
type: published
citation: "&ldquo;Changing Uses of Old and New Media in World Christianity&rdquo; co-authored with Jolyon Mitchell, in Lamin Sanneh and Michael McClymond, eds., <em>The Wiley-Blackwell Companion to World Christianity</em> (Oxford: Blackwell, 2016)"
tag: media
subjects: media world-christianity
doi: 10.1002/9781118556115.ch31
comments: no
file: media_world_christianity.pdf
date: 2016-05-20
publishdate: 2016-05-20
---
Abstract
Through a series of case studies we analyze different ways in which “old” and “new” media are being used in world Christianity. Cases considered include Russian Orthodox attitudes towards television, colonial engagement with media and Christianity in Africa, use of television by Pentecostal preachers in South America, film production in Nigeria by independent Pentecostal or Charismatic churches, the use of radio in El Salvador, portrayals of Jesus in Indian film productions, and receptions of television in India. Through these and other studies, we investigate the dynamic use of media by Christians around the world who have appropriated different media in both creative and traditional ways to teach, evangelize, perform, and communicate their forms of Christianity. This dynamic use of media is evolving, remarkable, and yet also consonant with the diverse texture of Christian communities across the world.
<a href="http://eu.wiley.com/WileyCDA/WileyTitle/productCd-1405153768.html" target="_blank" rel="noopener noreferrer">Publisher</a> - <a href="http://onlinelibrary.wiley.com/doi/10.1002/9781118556115.ch31/summary" target="_blank" rel="noopener noreferrer">Digital Version via Wiley</a>

View file

@ -0,0 +1,15 @@
---
title: "The Righteousness of Industrialism: Understanding the Legacy Behind The Present Moment in Technological Ethics"
author: Jeremy Kidwell
status: Published
type: published
citation: "&ldquo;The Righteousness of Industrialism: Understanding the Legacy Behind The Present Moment in Technological Ethics,&rdquo; in <em>The Present Moment</em>, ed. Markus Bockmuehl (Oxford: ORA, 2011)"
tag: technology
subjects: technology
comments: no
file: righteousness_industrialism.pdf
date: 2011-06-01
publishdate: 2011-06-15
---
Several prominent moral theologians have suggested that the current environmental crisis is a consequence of disordered accounts of human work and labour. Though this has inspired abstract speculation about the modern transformation of labour, few analyses anchor such reflection in the concrete historical experience of Christian labourers or probe for theologically construed responses in context. In this paper, I will seek to identify a framework which can better represent the complex relation between Christian moral reflection and industrialisation as it developed in the nineteenth-century by offering brief but sustained analysis of two test cases: the Luddite revolts (1811-1812) and the Great Exhibition (1851). Contrary to the narrative which holds that the industrial transformation of labour emerged while theological reflection was increasingly marginalised by secularisation, I will seek to draw attention to the presence of theological reflection in two different means of historical response, the protest and promotion of industry.

View file

@ -0,0 +1,19 @@
---
title: "Time for Business: Business Ethics, Sustainability, and Giorgio Agambens Messianic Time"
author: Jeremy Kidwell
status: Published
type: published
citation: "Time for Business: Business Ethics, Sustainability, and Giorgio Agambens Messianic Time in <em>De Ethica</em> vol 2, issue 3, pp. 39-51 (Jan 29, 2016)."
tag: business
subjects: sustainability agamben business
comments: no
file: de_ethica_15v2i3a06.pdf
date: 2016-01-20
publishdate: 2016-01-29
---
Abstract
Contemporary business continues to intensify its radical relation to time. The New York Stock Exchange recently announced that in pursuing (as traders call it) the race to zero they will begin using laser technology originally developed for military communications to send information about trades nearly at the speed of light. This is just one example of short-term temporal rhythms embedded in the practices of contemporary firms which watch their stock price on an hourly basis, report their earnings quarterly, and dissolve future consequences and costs through discounting procedures. There is reason to believe that these radical conceptions of time and its passing impair the ability of businesses to function in a morally coherent manner. In the spirit of other recent critiques of modern temporality such as David Couzen Hoy's The Time of Our Lives, in this paper, I present a critique of the temporality of modern business. In response, I assess the recent attempt to provide an alternative account of temporality using theological concepts by Giorgio Agamben. I argue that Agambens more integrative account of messianic time provides a richer ambitemporal account which might provide a viable temporality for a new sustainable economic future.
<a href="http://www.de-ethica.com/archive/articles/default.asp?DOI=10.3384/de-ethica.2001-8819.152339" target="_blank" rel="noopener noreferrer">Journal Website</a>

View file

@ -0,0 +1,19 @@
---
title: "On Dwarves and Scientists: Probing for Technological Ethics in the Creative Imagination of J.R.R. Tolkien"
author: Jeremy Kidwell
status: Published
type: published
citation: "&ldquo;On Dwarves and Scientists: Probing for Technological Ethics in the Creative Imagination of J.R.R. Tolkien&rdquo; In <em>FORUM</em>, Issue 8, Spring 2009"
tag: technology
subjects: technology
comments: no
file: tolkein_dwarves_and_scientists.pdf
date: 2009-06-01
publishdate: 2009-06-15
---
The presence of technology in contemporary life has become so pervasive that sociologist, Jacques Ellul has described this age as a "technological society". J.R.R. Tolkien lived in the midst of the ascension of this technological society at the turn of the twentieth-century, and though he is well recognized for the quality of his fiction, the specific treatment of technology in his works has not been fully appreciated. In Tolkien's work this topic may not be immediately obvious, especially given that technology is typically conceived in a narrow economy: freestanding and utterly contemporary. An example of this attitude might be the affirmation of a computer as "technology", but not the edge of a chef's knife. Tolkien casts his vision of technology with a more encompassing definition, treating it as the making of things by creatures.
This paper seeks primarily to substantiate the presence of this technological theme, so defined, in Tolkien's work. Accomplishing this will require attention to two fronts: to Tolkien's theory and practice. In unpacking the theoretical basis for his technological commentary, I will first justify the use of "fairy stories" for broader ethical reflection and will draw attention to Tolkien's specific commentary regarding the use of this genre. I will further examine Tolkien's specific attention to the topic of technology, and will clear him of charges that he is anti-technological. I will spend the latter half of the paper explicating specific ways, in practice, that Tolkien deploys the concept of sub-creation in his mythical stories. My analysis in this paper will be limited to ways in which the narrative of the Dwarves in his fiction serves as an analogy for the scientific enterprise. Ultimately, I will suggest that in Tolkien's account the products of technological synthesis (making), are in themselves morally ambivalent. I choose "ambivalent", rather than "neutral", because, as will be developed more fully below, there is always a moral context for technology, either good or bad - but never neither.
<a href="http://www.forumjournal.org/article/view/618" target="_blank" rel="noopener noreferrer">Journal Website</a>

View file

@ -0,0 +1,15 @@
---
title: "Clean Design: The quest for purity and the ethics of modern hygienic design"
author: Jeremy Kidwell
status: Published
type: published
citation: "&ldquo;Clean Design: The quest for purity and the ethics of modern hygienic design&rdquo; in <em>Tricky Design: the Ethics of Things</em> ed. by Tom Fisher and Lorraine Gamman (forthcoming, Bloomsbury, 2017)"
tag: hygiene
subjects: design bacteria clean
comments: no
file: asr2004.pdf
date: 2017-05-20
publishdate: 2018-05-20
---
Abstract

View file

@ -0,0 +1,53 @@
{{ template "partials/header.html" . }}
<body lang="en">
<div id="topbar">
<div class="wrapper">
<header>
{{ template "partials/sidebar.html" . }}
{{ $baseurl := .Site.BaseURL }}
</header>
</div>
</div>
<!--
Attempting to add granularity on itemtypes - need to fix later
<div class="wrapper" itemscope itemtype="http://schema.org/Book">
<div class="units-row">
<div class="unit-20">&nbsp;</div>
<div class="unit-60">
<h2><a href="">{{ .Title }}</a></h2>
</div>
</div>
<div class="units-row">
<div class="unit-20 dateblock"><h4>{{ .Date.Format "January 2, 2006" }}</h4>
{{ if (ge .Date.Unix .Now.Unix) }}{{ if (le .Date.Unix (add .Now.Unix 7776000)) }}<span class="badge badge-small badge-yellow">coming soon</span>{{ end }}{{ end }}
</div>
<div class="unit-60">{{ .Content }}</div>
</div>
</div>
-->
<div class="wrapper" itemscope itemtype="http://schema.org/Article">
<div class="units-row">
<div class="unit-20">&nbsp;</div>
<div class="unit-60">
<h2><a href="">{{ .Title }}</a></h2>
</div>
</div>
<div class="units-row">
<div class="unit-20 dateblock"><h4>{{ .Date.Format "January 2, 2006" }}</h4>
{{ if (ge .Date.Unix .Now.Unix) }}{{ if (le .Date.Unix (add .Now.Unix 7776000)) }}<span class="badge badge-small badge-yellow">coming soon</span>{{ end }}{{ end }}
</div>
<div class="unit-60">{{ .Content }}</div>
</div>
</div>
<hr class="separator">
{{ partial "whatisthis.html" . }}
{{ partial "footer.html" . }}

View file

@ -0,0 +1,50 @@
{{ partial "header.html" . }}
<body lang="en" itemscope itemtype="http://schema.org/Article">
<div id="topbar">
<div class="wrapper">
<header>
{{ template "partials/sidebar.html" . }}
{{ $baseurl := .Site.BaseURL }}
</header>
</div>
</div>
<div class="wrapper">
<h2>Presentation Archive</h2>
<div class="units-row">
<div class="unit-70">
{{ range .Data.Pages.GroupByDate "2006" }}
<div class="units-row">
<div class="unit-10">
<h3>{{ .Key }}</h3>
</div>
<div class="unit-90">
<ul class="fa-ul">
{{ range .Pages }}
<li><i class="fa-li fa fa-comment-o fa-fw" style="color:#b00;font-size:80%;padding-top:6px;"></i><a href="{{ .Permalink }}">{{ .Title | safeHTML }}</a> {{ partial "comingsoon.html" . }}
<br>
<time><i>{{ .Date.Format "2 January 2006" }}</i></time>,
{{ .Params.host | safeHTML }}
</li>
{{ end }}
</ul>
</div>
</div>
{{ end }}
</div>
<div class="unit-30">
<p>I regularly give research seminars, conference sessions, workshop talks, and other kinds of presentations.</p>
<p>This page is an archive of those talks, and pointers to upcoming presentations, including resources, when they are available.</p>
</div>
</div>
</div>
<hr class="separator">
{{ partial "whatisthis.html" . }}
{{ partial "foot.html" . }}
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View 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.
*/

Binary file not shown.

After

Width:  |  Height:  |  Size: 240 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

View file

@ -0,0 +1,6 @@
2299.26205120632039325
0
0
-2299.26205120632039325
-1428005.4290809566155076
8627021.73014170490205288

Binary file not shown.

After

Width:  |  Height:  |  Size: 825 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 597 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 486 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 573 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

View 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.

View file

@ -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>

View 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>

View file

@ -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>
&amp;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 &amp; 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>

View file

@ -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>

View file

@ -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>

View 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>

@ -0,0 +1 @@
Subproject commit 568c7516f7ff7da7824db033946619d2c7ad761f

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 564 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 273 KiB