forked from varia/varia.website
many many many Varia's websites, work in progress: https://many.vvvvvvaria.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
225 lines
20 KiB
225 lines
20 KiB
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<title>Varia </title>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" href="https://varia.zone/favicon.ico" type="image/x-icon">
|
|
<link rel="shortcut icon" href="https://varia.zone/favicon.ico" type="image/x-icon">
|
|
<meta property="og:title" content="What a website can be"/>
|
|
<meta property="og:url" content="https://varia.zone/what-a-website-can-be-en.html" />
|
|
<meta property="og:description" content="This website is built with a static site generator. This article delves into the implications of both 'static site' and 'generator' for its design process." />
|
|
<meta property="og:site_name" content="Varia" />
|
|
<meta property="og:article:author" content="Roel, Manetta" />
|
|
<meta property="og:article:published_time" content="2018-06-13T00:00:00+02:00" />
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="What a website can be">
|
|
<meta name="twitter:description" content="This website is built with a static site generator. This article delves into the implications of both 'static site' and 'generator' for its design process.">
|
|
|
|
<meta property="og:image" content="http://varia.zone/images/this.gif" />
|
|
<meta property="og:image:secure_url" content="https://varia.zone/images/this.gif" />
|
|
<meta name="twitter:image" content="https://varia.zone/images/this.gif" >
|
|
|
|
<link rel="stylesheet" type="text/css" href="/theme/css/fork-awesome/css/fork-awesome.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="/theme/css/pygment.css" />
|
|
<link rel="stylesheet" type="text/css" href="/theme/css/main.css" />
|
|
|
|
|
|
<meta name="keywords" content="workgroup, web, publishing, article, " />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
</head>
|
|
|
|
<body id="index" class="home">
|
|
<div class="buttons top left">
|
|
<i class="fa fa-home fa-fw"></i> <a href="/">home</a>
|
|
<i class="fa fa-info-circle fa-fw"></i> <a href="/pages/about.html">over</a>
|
|
</div>
|
|
<div class="buttons top">
|
|
<li><em>varia</em> komt in vele vormen: </li>
|
|
<li><i class="fa fa-envelope "></i> <a href="https://we.lurk.org/postorius/lists/varia.we.lurk.org/" target="_blank">mailinglijst </a></li>
|
|
<li><i class="fa fa-rss "></i> <a href="feeds/all-nl.rss.xml" type="application/rss+xml">RSS feed </a></li>
|
|
<!-- <li><a href="#"><i class="fa fa-rss "></i>.ics kalendar</a></li> -->
|
|
<li class="active"><a href="/">Nederlands</a></li>
|
|
<li><a href="/en/">English</a></li>
|
|
<br>
|
|
</div>
|
|
<div class="buttons top">
|
|
|
|
</div>
|
|
<header id="banner">
|
|
<div id="title">
|
|
<p><a class="h-card" rel="me" href="/pages/about.html"><em>varia</em></a> (Gouwstraat 3, Rotterdam) is een ruimte voor het ontwikkelen van collectieve benaderingen rondom alledaagse technologie. <em>varia</em> leden onderhouden en faciliteren een <a href="/pages/collective-infrastructures.html">collectieve infrastructuur</a> om vragen, meningen, aanpassingen, hulp en actie te genereren. We gebruiken vrije software, organiseren evenementen en werken samen in verschillende constellaties. <em>varia</em> leert gaandeweg, maakt <a href="https://etherdump.vvvvvvaria.org/">notities</a>, is <a href="/en">meertalig</a> en kan gecontacteerd worden via <a href="mailto:info@varia.zone">info[@]varia.zone</a>.</p>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
|
|
<section id="content" class="body h-entry">
|
|
<div class="entry-title p-name">
|
|
What a website can be
|
|
</div>
|
|
<div class="article-info">
|
|
<div class="featured-image u-photo">
|
|
<a href="/images/this.gif">
|
|
<img src="/images/this.gif">
|
|
</a>
|
|
</div>
|
|
<div class="event-details">
|
|
<div>Published at 13 June 2018</div>
|
|
</div>
|
|
<div class="post-info">
|
|
<div class="article-authors">
|
|
Written by
|
|
Roel, Manetta
|
|
</div>
|
|
<a style="visibility:hidden;" rel="author" class="p-author h-card">Roel, Manetta</a>
|
|
<time class="dt-published" datetime="2018-06-13 00:00:00+02:00"></time>
|
|
<a class="u-url" href="what-a-website-can-be-en.html"></a>
|
|
<span class="categories">
|
|
<span itemprop="articleSection">
|
|
<a href="/category/article.html" rel="category">article</a>
|
|
</span>
|
|
</span>
|
|
<span class="tags">
|
|
relating to
|
|
<span itemprop="keywords">
|
|
<a href="/tag/workgroup.html" rel="tag">workgroup</a>
|
|
</span>
|
|
<span itemprop="keywords">
|
|
<a href="/tag/web.html" rel="tag">web</a>
|
|
</span>
|
|
<span itemprop="keywords">
|
|
<a href="/tag/publishing.html" rel="tag">publishing</a>
|
|
</span>
|
|
</span>
|
|
<div class="article-translation">
|
|
<a href="what-a-website-can-be.html">Lees dit artikel in het Nederlands</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="entry-content-container">
|
|
<div class="entry-content e-content">
|
|
<p>When considering how to design a website for varia, our<sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> mutual but implicit understanding was not to <em>just</em> make a site. But rather that there was a potential for the process of site-making to become a process of exploring what a website can be. Exploring how one could do web publishing in a self-hosted<sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup>, minimal<sup id="fnref:3"><a class="footnote-ref" href="#fn:3">3</a></sup>, portable<sup id="fnref:4"><a class="footnote-ref" href="#fn:4">4</a></sup>, documented<sup id="fnref:5"><a class="footnote-ref" href="#fn:5">5</a></sup>, FLOSS<sup id="fnref:6"><a class="footnote-ref" href="#fn:6">6</a></sup> and playfull<sup id="fnref:6b"><a class="footnote-ref" href="#fn:6b">7</a></sup> way. In a way that connects to the multiplicity of practices that varia consists of. This text is the beginning of an attempt to make explicit and put to words some of the ideas and questions that drove this process. In the spirit of release early, release often we will publish a series of texts as we develop this site. Hopefully this can trigger questions on web design in the conceptual sense, not as a practice only involved with visual language, but as a practice considering on-line publishing ecosystems. One of the fundamental choices we made early on was to use a static site generator as our publishing tool, so we'll start by introducing the concepts of both 'static site' and 'generator'.</p>
|
|
<p><img alt="varia.zone" src="/images/varia_webhistory.gif">
|
|
<small>The varia website unfolding over time.</small></p>
|
|
<h2 id="static-site">Static site</h2>
|
|
<p>Varia.zone is a <em>static</em> website. A static website is a 'traditional' website where all the content consists of HTML documents on the server's hard disk. In our case these are generated through Pelican<sup id="fnref:7"><a class="footnote-ref" href="#fn:7">8</a></sup>, which is a collection of Python<sup id="fnref:8"><a class="footnote-ref" href="#fn:8">9</a></sup> scripts and plugins<sup id="fnref:9"><a class="footnote-ref" href="#fn:9">10</a></sup> to turn unstyled plain text into HTML pages. </p>
|
|
<p><img alt="varia.zone" src="/images/static-dynamic.svg">
|
|
<small>Schematic overview of the main differences between a static and a dynamic website.</small></p>
|
|
<p>This way of working can be understood to be different to 'more modern' websites. These modern methods use server side programming languages that generate the website on the fly by querying a database. This means that every time someone visits the site, it gets generated on demand. </p>
|
|
<p>A static website instead gets generated once and exists as a set of documents. They are always there, not only when a visitor visits the page. Like the tree in the forest that also falls when nobody is there to hear it. Static websites are thus based on file storage whereas dynamic websites depend on recurrent computation. A website based on storage has some advantages for performance, security, portability and reproducibility that we will address in detail later in the series. </p>
|
|
<p>The static website is supportive to another idea we would like to push for: independent, self-hosted services. Since a static website requires less resources, one can do with a not-so-powerful, energy efficient server to host them. This opens up the possibility to (economically) serve the site directly from our space, which we currently do. </p>
|
|
<p><img alt="The varia server in the space, where various self-hosted services are installed." src="/images/varia.server.jpg">
|
|
<small>The varia server in the space, where various self-hosted services are installed.</small></p>
|
|
<p>In general hosting a server from one's own space introduces some security concerns. These are however partly mitigated by a static site, because it doesn't use server side languages. That also means the web server doesn't become a liability in terms of exploitable plug-ins or databases like in popular systems such as Wordpress. Once it has been generated, it is very much a case of set and forget.</p>
|
|
<p>In essence the minimal file-based website is contrary to a cloud mentality, where the material circumstances of the hardware and hosting location are made irrelevant (for the cloud/vps customer) meaning that any 'service' can be 'deployed', 'scaled' 'migrated' etc. Our approach instead informs what can be hosted based on the material circumstances of the server. The choice to self-host this website is a start for us to think about what it means to base web design decisions on a specific situation in terms of hardware and hosting location. </p>
|
|
<h2 id="generator">Generator</h2>
|
|
<p>The static HTML documents that together make the varia website are not manually written in the html language, but are generated out of a set 'plain text'<sup id="fnref:10"><a class="footnote-ref" href="#fn:10">11</a></sup> documents. This <em>generating</em> aspect allows for multiple ways to engage with the texts and images that we publish. It is a promising way to think about possible transformations of plain text into not just web pages but different media altogether. </p>
|
|
<p>One of the needs for transformability comes from the fact that our website exists in a context where usage of the web has atrophied to the point where one is required to publish on or via social media in order to reach an audience at all. However, politically we are not interested in dedicated profiles on social media platforms for our organization. This is a clear decision driven by a strong desire to self-host and own our content, yet allowing to let that content be referred to comfortably within social media as well. The technique of the generator allows us to do this<sup id="fnref:11"><a class="footnote-ref" href="#fn:11">12</a></sup>. </p>
|
|
<p>Working with generative processes also triggers our interest and enthusiasm for exploring other publishing tools. One can imagine a single text or article morphing into widely different media such as calendar entries, RSS feeds, email newsletters, posters, etc. Each of these introducing their own potentials for playful aesthetics, reading experiences and publics. This is on the one hand interesting as a form of automation that reduces (or better: re-uses) work, but more importantly as a process which necessarily will introduce new 'forms' and aesthetics.</p>
|
|
<p><img alt="This article in its plain text 'view', showing the markdown mark-up language." src="/images/what-a-website-can-be.markdown.png">
|
|
<small>This article in its plain text 'view', showing the markdown mark-up language.</small></p>
|
|
<p>At the center this processes relies heavily on the habit of writing in markdown, a mark-up language that allows one to add styling information to plain text, so that it can be read by both people and a variety of tools. The markdown files can be archived using versioning tools<sup id="fnref:12"><a class="footnote-ref" href="#fn:12">13</a></sup> or easily converted into different formats using generators. The content of the website, in its 'raw' form, can therefore be read by many other softwares across (historical) operating systems or included in other workflows, and thus stay open for potential reuse and long-term re-accesibility. Using this process makes it possible for our source files to remain simple, fluid and archivable. </p>
|
|
<h2 id="concluding">Concluding</h2>
|
|
<p>Revisiting static sites and taking all these small steps feels like going back in time. However, revisiting web-development basics in this sense becomes a vehicle for understanding the web of these days. To get a sense of the compound choices that have sedimented over time into 'web design' practices and that remain opaque when using ready made frameworks. Creating an on-line publishing work flow from ground up instead allows one to explore the potentials and challenge the conventions of what a website should be. </p>
|
|
<hr>
|
|
<p><strong> To unpack the website ... </strong></p>
|
|
<p>This folder of Pelican scripts, markdown documents, images, template and css files ...</p>
|
|
<p><a href="https://git.vvvvvvaria.org/varia/varia.website">varia.website.git</a><br>
|
|
├── content/<br>
|
|
| └── post1.en.md<br>
|
|
| └── post1.nl.md<br>
|
|
├── LICENSE<br>
|
|
├── Makefile<br>
|
|
├── output<br>
|
|
├── pelicanconf.py<br>
|
|
├── pelican-plugins<br>
|
|
├── plugins-custom<br>
|
|
├── publishconf.py<br>
|
|
├── README.md<br>
|
|
└── themes<br></p>
|
|
<p>... generates the following output folder ...</p>
|
|
<p>output/<br>
|
|
├── author/<br>
|
|
| └── <a href="https://varia.zone/author/varia.html">varia.html</a><br>
|
|
├── <a href="https://varia.zone/categories.html">categories.html</a><br>
|
|
├── category/<br>
|
|
| └── <a href="https://varia.zone/category/event.html">event.html</a><br>
|
|
├── <a href="https://varia.zone/en/">en/</a><br>
|
|
| └── feeds/<br>
|
|
| | └── <a href="https://varia.zone/en/feeds/all-en.rss.xml">all-en.rss.xml</a><br>
|
|
│ ├── <a href="https://varia.zone/en/century-21-calling.html">post1.en.html</a><br>
|
|
│ ├── <a href="https://varia.zone/en/algologs.html">post2.en.html</a><br>
|
|
| └── <a href="https://varia.zone/en/itisasif.html">post3.en.html</a><br>
|
|
├── <a href="http://varia.zone/events.ics">events.ics</a><br>
|
|
├── feeds/<br>
|
|
| └── <a href="http://varia.zone/feeds/all.rss.xml">all.rss.xml</a><br>
|
|
├── images/<br>
|
|
├── <a href="https://varia.zone/">index.html</a><br>
|
|
├── pages/<br>
|
|
│ ├── <a href="http://varia.zone/pages/about.html">about.html</a><br>
|
|
| └── <a href="http://varia.zone/pages/stream.html">stream.html</a><br>
|
|
├── <a href="http://varia.zone/century-21-calling.html">post1.nl.html</a><br>
|
|
├── <a href="http://varia.zone/algologs.html">post2.nl.html</a><br>
|
|
├── <a href="http://varia.zone/itisasif.html">post3.nl.html</a><br>
|
|
└── theme/<br></p>
|
|
<div class="footnote">
|
|
<hr>
|
|
<ol>
|
|
<li id="fn:1">
|
|
<p>Varia works via different thematic work groups, one which is concerned with its website. We use the word 'group' here, which only works if you consider two people to be a group already. Current website work group members are Roel Roscam Abbing & Manetta Berends. <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:2">
|
|
<p><em>Self-hosting culture</em> as a way to speak about network infrastructures and preferences. This is also the main subject of the <a href="https://homebrewserver.club">homebrewserver.club</a>, a group for discussions, learning and reflection on the practice of hosting a server from home. <a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:3">
|
|
<p><em>Minimal</em> not as in minimalism in design but rather understood as simple/low-tech/appropriate technologies, understood in (some) aspects of <a href="http://go-dh.github.io/mincomp/">Minimal Computing</a>. <a class="footnote-backref" href="#fnref:3" title="Jump back to footnote 3 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:4">
|
|
<p><em>Portable</em> in the sense that it allows for multiple transformations and media, generated by various tools and distributed to various contexts and publics. <a class="footnote-backref" href="#fnref:4" title="Jump back to footnote 4 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:5">
|
|
<p>What does a <em>documented</em> process mean? For whom? Currently the varia website is translated into two different languages (dual NL/EN), but documenting can also refer to other types of languages like explanatory articles such as this one, to accompany a work-in-progress to enable further reading than rather just 'reading the code'. <a class="footnote-backref" href="#fnref:5" title="Jump back to footnote 5 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:6">
|
|
<p><em>FLOSS</em>, or Free Libre and Open Source Software, refers to free culture communities and the use of free licenses. <a class="footnote-backref" href="#fnref:6" title="Jump back to footnote 6 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:6b">
|
|
<p>The context of varia creates a <em>playful</em> space that enables us to experiment with different tools, modes of address and publishing work flows. <a class="footnote-backref" href="#fnref:6b" title="Jump back to footnote 7 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:7">
|
|
<p>Pelican is static site generator software written in Python, <a href="https://blog.getpelican.com/">getpelican.com</a>. <a class="footnote-backref" href="#fnref:7" title="Jump back to footnote 8 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:8">
|
|
<p>Python is a commonly used object-oriented programming language, <a href="https://python.org">Python</a>. <a class="footnote-backref" href="#fnref:8" title="Jump back to footnote 9 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:9">
|
|
<p>We use both <a href="https://github.com/getpelican/pelican-plugins">the plugins made by the pelican community</a> and <a href="https://git.vvvvvvaria.org/varia/plugins-custom">our own custom ones</a>. <a class="footnote-backref" href="#fnref:9" title="Jump back to footnote 10 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:10">
|
|
<p><em>"Plain text identifies a file format and a frame of mind. (...) [A] kind of a systematic minimalism when it comes to our use of computers, a minimalism that privileges access to source materials, ensuring legibility and comprehension."</em> - A quote from: Plain Text, the poetics of Computation (2017), by Dennis Tenen - Stanford University Press <a class="footnote-backref" href="#fnref:10" title="Jump back to footnote 11 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:11">
|
|
<p>For example by generating meta tags in our web page following <a href="http://ogp.me/">Open Graph</a> or <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards.html">Twitter Cards</a>. These provide previews of one's page when a link is published on social media or in mobile apps. Right click on any page and view source to have a look. The OG headers are at the beginning in the <code><meta></code> tags. <a class="footnote-backref" href="#fnref:11" title="Jump back to footnote 12 in the text">↩</a></p>
|
|
</li>
|
|
<li id="fn:12">
|
|
<p>The source files of the varia website are stored in and tracked by a Git versioning system. You can access these files through this <a href="https://git.vvvvvvaria.org/varia/varia.website/commits/branch/master">Gitea interface</a>, where you can read the markdown documents and follow the changes that are being made. For example: this article can be found <a href="https://git.vvvvvvaria.org/varia/varia.website/src/branch/master/content/what-a-website-can-be.en.md">here</a>. <a class="footnote-backref" href="#fnref:12" title="Jump back to footnote 13 in the text">↩</a></p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
<div class="separator"><hr></div>
|
|
</div><!-- /.entry-content -->
|
|
</div><!-- /.entry-content-container -->
|
|
</section>
|
|
<script type="text/javascript">
|
|
var footnotes = document.querySelectorAll('[id^="fnref-"]');
|
|
for(var i in footnotes){
|
|
if(i < footnotes.length){
|
|
console.log(footnotes[i]);
|
|
var id = footnotes[i].id.replace('fnref-','fn-');
|
|
footnotes[i].innerHTML = footnotes[i].innerHTML + '<span>['+ parseInt(Number(i)+1) + '] '+ document.getElementById(id).innerHTML +'</span>';
|
|
}
|
|
}
|
|
document.getElementsByClassName('footnote')[0].remove();
|
|
</script>
|
|
</body>
|
|
</html>
|