Welcome to the Etherport manual! If this is your first time using Etherport, we recommend first reading the overview of key terms and overview of key functionalities. You can also immediately get started as an editor or get started as a designer.
Etherport is a tool for cultural organisations to make more experimental, multi-voiced, and non-linear event reports. By integrating the entire process of creating event reports into one tool, it also helps to standardize your event reporting workflow, reducing production workload and clarifying the role division between author(s) and editor.
Workflow integration: All steps in the creation of an event report, from (real-time collaborative) writing to editing and publishing, are integrated in Etherport.
Hybrid publishing: Publishing an event reports on Etherport generates two versions simultaneously: a web version, and a printable .pdf.
One-click design: Both the web version and .pdf of your publication are automatically designed using a template. (It is possible to create your own template, to match the visual identity of your organisation, in CSS.)
Content labeling: Etherport uses a labeling system that allows readers to engage with the event report in a non-linear way based on theme or type of content. This same feature creates links between reports of different events, which makes it easier to nagivate and activate the event report archive.
Content templates: To accomodate custom serialization, it is possible to create pad templates for different types of reports/publications.
Multi-media content: Etherport supports text, images, audio, videos, and timestamps.
Shared infrastructure: Multiple organisations can use the same instance of Etherport. This shared infrastructure can grow into a shared archive of event reports, in which relations between events from different organisations become visible and navigable.
Pad: A pad is an online text editing document (such as a GoogleDoc or, in this case, the open-source alternative Etherpad). On the back-end, publications in Etherport consist of pads. Each pad generates a single page on the front end (or ‘static version’). Simple publications may have just one pad (apart from the ‘index’, see below), but they can also be parts (e.g. chapters) of a larger publication.
Index: An index is a special pad of which each publication has one. It functions as the home page (digital version) or as the combined colofon and back-cover (print version) of a publication. In the index, you will typically include an overview of collaborators and a blurb.
Template: When creating a new pad in Etherport, it is possible to select a template. If you select a template, the newly opened pad will not be blank, but it will include pre-structured base content. For instance, the template ‘Event Report’ includes a step-by-step guide for the author who will write the event report. (It is possible to create your own template files, or customize existing templates.)
Folder: The pads in EtherDish are organised in folders (like the files on your computer). EtherDish is programmed to recognize each folder as a separate publication. The content of this publication is the collected content of all pads in the folder.
Root folder: This is the main of the folder system, where all publication folders and master template files are collected. The root folder is also the landing page on the back-end of Ehterport, from where you can navigate to any publication.
Static version or generated version: This is the ‘front end’ or ‘read mode’ version of the digital tool, which is automatically generated and designed. To refresh the static version and preview changes, it is required to regenerate it.
Label: Labels are used to categorize bits of content (typically sentences or paragraphs) as a specific type of content (e.g. quote, opinion). These labels create additional, non-linear pathways throughout a report and between reports on EtherPluck.
Metadata:
Etherport uses paged.js to generate a paged version of the publication. More information on paged.js in their documentation.
The print version is rendered as one page. Roughly the publication is organised like this:
Chapters marked to be placed after the indexes The base structure of the print version.
div.front-matter
div.front-matter–title
h1
// Title of the publication
div.front-matter–introduction
h1
// Title of the index pad
...
// Content of the index pad as HTML
div.toc
h1
ul
li
a
div.chapters
// Chapters with position ‘before_content’
div.chapter[data-chapter=”{{ chapter.name }}”]
// data-chapter holds the name of the chapter as entered in the pad.
h1#{{ chapter.slug }}
// Title of the chapter with chapter slug as id
...
// Content of the chapter has HTML
div.reports
div.report[data-report=”{{ chapter.name }}”]
// data-report holds the name of the report as entered in the pad.
h1#{{ chapter.report }}
// Title of the report with slug as id
...
// Content of the report as HTML
div.chapters
// Chapters with position ‘after_content’ or ‘before_indexes’
div.chapter[data-chapter=”{{ chapter.name }}”]
// data-chapter holds the name of the chapter as entered in the pad.
h1#{{ chapter.slug }}
// Title of the chapter with chapter slug as id
...
// Content of the chapter as HTML
div.indexes
// Indexes. Currently only a label index is generated.
.index#generated-index–labels [data-index=”label”]
h1
ul
li
span.index-term
// The label
span.index-entry[data-link-id="#{{ link.id }}"]
// Repeated for each occurence of the label in the text, data-link-id holds the id of the link
div.chapters
// Chapters with position ‘after_indexes’
div.chapter[data-chapter=”{{ chapter.name }}”]
// data-chapter holds the name of the chapter as entered in the pad.
h1#{{ chapter.slug }}
// Title of the chapter with chapter slug as id
...
// Content of the chapter has HTML
References are links to an object (often labels) within a text. There are two types of references: direct links where the label of the linked object is shown directly in the text, or inline references where a part of the text is marked as linked to an object.
<a href=""
id="{{ link.id }}"
data-reference=""
data-link-id="{{ link.id }}"
data-link-target-type="{{ type of referenced object }}"
data-label="{{ label of linked object}}"
data-direct-link="true">
<span class="reference--target">{{ label of linked object}}</span>
</a>
<a href=""
id="{{ link.id }}"
data-reference=""
data-link-id="{{ link.id }}"
data-link-target-type="{{ type of referenced object }}"
data-label="{{ label of referenced object }}">
<span class="reference--target">{{ label of linked object }}</span>
<span class="reference--label--inline">{{ marked text }}</span>
</a>
This page lists the basic HTML structure renedered for different types of content.
body.page--{{ page }}
// {{ page }} will be replaced with a page type
header
nav#nav
ul
li.navbar--organisation
a
// holds link to organisation page
li.navbar--index
a
// link to homepage
li.navbar--reports
a
// link to reports page
ul.navbar--subnav.navbar--reports--subnav
// subnavigation listing all reports
li.navbar--report.navbar--report--{{ report.slug }}
// navigation item for each report, {{ report.slug }} will be replaced with the slug of the report.
a
// link to the report
li.navbar--labels
a
// link to the labels page
ul.navbar--subnav.navbar--labels--subnav
li.navbar--label.navbar--label--{{ label.slug }}
// navigation item for each label, {{ label.slug }} will be replaced with the slug of the label.
a
// link to the label
li.navbar--print
// link to the print version
nav#nav--sub
// not used
main
// Content depending page type
aside
// Content depending page type
footer
// holds footer snippet
main
h1
// Title of as written in the index pad
{{ content }}
// Content of the index pad in HTML
aside
section.etherport--labels
// only on homepage!, lists labels
ul
li.etherport--label--{{ label.slug }}
// navigation item for each label, {{ label.slug }} will be replaced with the slug of the label.
a
//link to the label
The list page of labels and reports use the same page template
main
h1
// Plural of object type (labels, reports)
ul
// List of objects
li
a
// Link to object (e.g. label or report)
aside
// empty
Individual page for ‘objects’, report
main
h6
// Type of object
h1
// Name of the object
// Content of the objects' pad in HTML
div.object--labels-list--end
// List of labels linked to the object. Only included if there
// are labels linked to the object
h2
ul
li
a
aside
// empty
References are links to an object (often labels) within a text. There are two types of references: direct links where the label of the linked object is shown directly in the text, or inline references where a part of the text is marked as linked to an object.
<a href=""
id="{{ link.id }}"
data-reference=""
data-link-id="{{ link.id }}"
data-link-target-type="{{ type of referenced object }}"
data-label="{{ label of linked object}}"
data-direct-link="true">
<span class="reference--target">{{ label of linked object}}</span>
</a>
<a href=""
id="{{ link.id }}"
data-reference=""
data-link-id="{{ link.id }}"
data-link-target-type="{{ type of referenced object }}"
data-label="{{ label of referenced object }}">
<span class="reference--target">{{ label of linked object }}</span>
<span class="reference--label--inline">{{ marked text }}</span>
</a>
index : Homepage
page–label : Page for individual label
page–label–{{ label.slug }} : Page for individual label where {{ label.slug }} will be replaced with the slug of the label
page–list : General list page
page–list–label : Label list page, also has page–list class
page–list–report : Report list page, also has page–list class
page–report : Page for an individual report
page–report–{{ report.slug }} : Page for an individual report where {{ report.slug }} will be replaced with the slug of the report
The layout of the publication can be influenced through CSS. The tool comes with a set of default styles defined in two pads: generated.css and print.css. The styles of the web version of the report are defined in the pad generated.css while the styles for the print publication are set in print.css. You can adjust the styles of your publication by creaing style pads pad in the publication folder: [publication-name]::generated.css and [publication-name]::print.css. When the tools finds these publication based styles, it will ignore the general styles. It might be a good idea to start with a copy of the original styles. To adjust the styles of all publications (without their own stylesheet) adjust the styles in the base folder.
Define the structure of your publication speculation
Add content through articles.
Set the cover of your publication speculation
Cover.md ?
Styling images speculation
Float on the top of the page speculation
Float at the bottom of the page speculation
Float full screen speculation
Float left speculation
Float right speculation
Etherport is a browser-based tool, which works best in Firefox. It is not necessary to install any software.
To register your organization on Etherport, you can send an email to sepp [at] networkcultuers [dot] org, and we will create an account for you.
To create an account, navigate to the overview page of your organization and click ‘make an account’. (If you already have an account, click ‘login’ instead.)
Once logged in, you are taken to the root folder of your organisation. This is an overview of all the organisation’s publications. If you will be working on an existing publication, you can now navigate to the folder with that publication’s name. If you are creating a new publication, proceed to the next step.
In the root folder, click the button ‘+ CREATE NEW PUBLICATION’ in the top right.
Enter the name of your publication and click ‘CREATE’.
This action will create a folder in your organization’s root folder. Each folder in your root folder therefore represents a publication.
Your publication is now generated, and you will be immediately taken to the index pad. (The index will be the landing page of your publication on the front end. See ‘Key terms’ for more information.)
You can navigate between pads in the publication folder and between different publications in the root folder using the ‘bread crumb’ menu in the top left.
After creating your publication, you can continue to creating pads.
To start making content in a publication, you can create a pad for each part of the content. These pads will appear in the web version as a page and in the print version as a chapter.
In the publication folder, click the button ‘+ CREATE PAD’
In the box ‘Name’, enter a name for this chapter
Optional: choose a content template
Click the button ‘CREATE’
You will now be taken to the newly created pad. Some templates, such as the ‘Event report’ template, require customization by the editor.
After finishing possible customizations, proceed to metadata.
To manage the organization and appearance of pads within the publication, you can insert various types of metadata at the top of each pad.
You can insert metadata by using the following formulas in the top lines in the pad:
In case you are working with (an) external author(s), you can share access to the pad(s) with them at this point.
To make a pad accessible, you will need to make it public. To do so, go to the publication folder and click the button ‘make public’.
To share the pad with the author, you can copy the URL from the address bar and send it to the author, or, in the folder list right-click on the pad and select ‘copy link’.
In the pad, author(s) can type textual content. (Please note that multiple authors can work simultaneously in one document.)
Authors can use the functionalities of Etherpad to style the textual content. These functionalities are all found in the top menu bar. It works like any other popular text editor:
If you’re working with existing textual content, you can import it into a pad using the ‘import/export’ button at the top right of the Etherpad menu bar. It’s the button with two arrows.
Images can be embedded in a pad using the Django File Manager plug-in, accessed through the file widget in the top bar.
It is possible to embed audio and video content hosted on an external platfom (such as Vimeo, YouTube, or Soundcloud) using the embed link provided by the platform.
An important feature of Etherport is the labeling functionality.
Once the reporter(s) is/are finished with their initial report, the editor start editing. To accomodate the back and forth between editor and author(s), Etherport features a comment and suggestions-plug-in. To use this plug-in, select a part of the text and click the comment widget in the top bar. Optionally, include a suggestion by checking ‘include suggested change’.
After the editorial process, proceed to publishing!
The publication can be published by generating a static version.
Click ‘Generate publications’ at the top of the screen
Select the organization hosting the publication you are publishing
Select the publication you want to generate by checking the box in front of it
Click the huge ‘Generate’ button, and wait
In the generation process the content of the reports is read, processed and reordered based on content types and the labels. It automatically generates two versions:
Etherport is based on Ethertoff: a simple collaborative web platform, much resembling a wiki but featuring real-time editing. Ethertoff is an open-source tool patchwork, which includes the text editor Etherpad, the framework Django, and the javascript library Paged.js. Its output is constructed with equal love for print and web. Ethertoff is developed and maintained by the Brussels-based collective Open Source Publishing (OSP).
A prototype of Etherport was created by the Hybrid Publishing Research Group in the context of the two-year research program Going Hybrid. Members of the Hybrid Publishing Research Group were: researcher Anna Maria Michael, Ray Dolitsay (Institute of Network Cultures), Ashley Maum (Framer Framed), researcher Ania Molenda, Gijs de Heij (Willem de Kooning Academy / Open Source Publishing), Sepp Eckenhaussen (Institute of Network Cultures), Ebissé Wakjira (Framer Framed), artist and programmer Maria van der Togt, Victor Chaix (Institute of Network Cultures), Carolina Pinto (Institute of Network Cultures).
Etherport was developed from a prototype to a functional tool by Open Source Publishing and the Institute of Network Cultures, with the collaboration of core user group members Amateur Cities and The Hmm. This development was supported by the HvA Impact Fonds.