2
0
mirror of https://github.com/offen/website.git synced 2024-12-26 14:50:20 +01:00

Merge pull request #21 from offen/development

Milestone 1
This commit is contained in:
Hendrik Niefeld 2019-12-12 21:08:12 +01:00 committed by GitHub
commit f584021a89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 174 additions and 79 deletions

View File

@ -1,11 +1,12 @@
Title: Page not found | offen
Title: Page not found | Offen
description: This link isnt working.
save_as: 404.html
href: /404.html
no_stats: true
exclude_from_sitemap: true
sm_image_url: /theme/images/offen-logo-social-media.jpg
![Page not Found](/theme/images/content-404.webp){:class="image-text-560-315"}
![Page not Found](/theme/images/content-404.webp){:class="image-text-600-338"}
Trying to get where you want to go? This page isn't it. Sorry about that. If you're looking for what to do next, you could *take a look at our [summary.](/)*

View File

@ -1,14 +1,15 @@
Title: About | offen
Title: About | Offen
description: Who we are, who supports us and how you can can get in touch.
save_as: about/index.html
href: /about/
sm_image_url: /theme/images/offen-logo-social-media.jpg
## About
### Status Quo
__offen__ is created by [Frederik Ring][frederik-ring]{: target="_blank"} and [Hendrik Niefeld][hendrik-niefeld]{: target="_blank"} and is currently being conceptually designed, both as a product as well as as a software.
Offen is created by [Frederik Ring][frederik-ring]{: target="_blank"} and [Hendrik Niefeld][hendrik-niefeld]{: target="_blank"} and is currently being conceptually designed, both as a product as well as as a software.
[hendrik-niefeld]: http://niefeld.com/
[frederik-ring]: https://www.frederikring.com/

View File

@ -0,0 +1,53 @@
Title: Laying the foundation for fair web analytics | Offen
description: Our milestone 1 achievements include extensible architecture, a localization option and an improved server structure.
save_as: blog/laying-foundation-for-fair-web-analytics/index.html
href: /blog/laying-foundation-for-fair-web-analytics/
sitemap_priority: 0.7
sm_image_url: /theme/images/offen-blog-0010-milestone1.jpg
![Milestone 1 - Laying the foundation for fair web analytics](/theme/images/offen-blog-0010-milestone1.jpg){:class="image-text-600-322"}
12 Dec 2019, Hendrik Niefeld
## Episode One — Laying the foundation for fair web analytics
Milestone 1 is completed. This is what we've achieved in the last six weeks.
### Extension through middleware
We have further refined the existing application architecture to make it more robust and accessible to both contributors and people who want to build upon Offen. As a developer, you can transparently control additional behavior by adding or removing middleware.
### Easy to test drive
Download a single binary file and run it on your local computer to get an Offen instance up and running immediately. At the moment this setup only supports Linux. Windows and MacOS will follow soon.
<div class="btn-wrapper-article">
<a class="btn btn-color-yellow" target="_blank" href="https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz">Download binary</a>
</div>
### Develop without complex setup
Docker and Docker-Compose are the only hard requirement for you to develop Offen. We have successfully tested this setup under Linux, Windows and MacOS. Head over to our wiki for instructions how to get the setup up and running.
<div class="btn-wrapper-article">
<a class="btn btn-color-yellow" target="_blank" href="https://github.com/offen/offen/wiki/Developing-offen#setup">Open wiki</a>
</div>
### Lightweight and accessible interfaces
The *Auditorium* is ready for a dry run. It's a functional prototype for accessing and managing user data. We opted for [Choo](https://choo.io/){: target="_blank"} as the application framework and [Tachyons](https://tachyons.io/){: target="_blank"} as the CSS framework.
### Ready to localize
You can now localize all user-related content in server- and client-side applications. At the moment English is the only supported locale, but we would be happy to add more locales soon. Contributors wanted after milestone 3 is completed.
<div class="btn-wrapper-article">
<a class="btn btn-color-yellow" href="mailto:hioffen@posteo.de">Get in touch</a>
</div>
### Read the docs
The work on our wiki has started. Including documentation for [developers](https://github.com/offen/offen/wiki/Developing-offen){: target="_blank"} as well as for [website operators](https://github.com/offen/offen/wiki/Running-offen){: target="_blank"} who want to deploy and run Offen.
### No reverse proxy required
We have further hardened and improved the HTTP server that Offen exposes. If you want to, you can already expose this server to the Internet without having to run a reverse proxy in front of it.
### Up next
*Episode Two — Collecting data securely* will feature user opt-in, userland cryptography, meaningful statistics and much more. We'll be right back.
---
### Deep dive
Interested in the details? Want to get your hands dirty? Head over to our GitHub repo.
<div class="btn-wrapper-article">
<a class="btn btn-color-black" target="_blank" href="https://github.com/offen/offen/pull/192">Open milestone 1 pull</a>
</div>

View File

@ -0,0 +1,18 @@
Title: Fair analytics blog | Offen
description: Developing Offen. A free and open source analytics software for websites and web applications that allows respectful handling of data.
save_as: blog/index.html
href: /blog/
exclude_from_sitemap: true
sm_image_url: /theme/images/offen-logo-social-media.jpg
## Fair analytics blog
### Developing Offen. A free and open source analytics software for websites and web applications that allows respectful handling of data.
---
12 Dec 2019
[![Milestone 1 - Laying the foundation for fair web analytics](/theme/images/offen-blog-0010-milestone1.jpg){:class="image-text-600-322"}](/blog/laying-foundation-for-fair-web-analytics/)
## [Episode One — Laying the foundation for fair web analytics](/blog/laying-foundation-for-fair-web-analytics/)

View File

@ -1,8 +1,9 @@
Title: Deep dive | offen
description: What do users know about their data? How can they access it? Do operators benefit from a careful handling of user data? Does offen work in accordance with GDPR?
Title: Deep dive | Offen
description: What do users know about their data? How can they access it? Do operators benefit from a careful handling of user data? Does Offen work in accordance with GDPR?
save_as: deep-dive/index.html
href: /deep-dive/
sitemap_priority: 0.7
sm_image_url: /theme/images/offen-logo-social-media.jpg
## Deep dive
@ -28,13 +29,13 @@ As a regular user of the internet, are you really being spied upon? *What exactl
[^7]: Google CEO Eric Schmidt Dismisses the Importance of Privacy <https://www.eff.org/de/deeplinks/2009/12/google-ceo-eric-schmidt-dismisses-privacy>
We would like to turn the tables on this much quoted statement and apply it to the operators of services and websites instead of their users. The analytics software __offen__ *transparently and uncompromisingly discloses what data is being collected and what it is being used for* to the users.
We would like to turn the tables on this much quoted statement and apply it to the operators of services and websites instead of their users. The analytics software Offen *transparently and uncompromisingly discloses what data is being collected and what it is being used for* to the users.
---
### For users
Visiting a website or using a web application that utilizes __offen__, the user gains access to and ownership of the usage data collected. The cookie used by __offen__ allows viewing all of the associated metrics, the users can *assert themselves what is being collected and what isn't*. Data is being displayed in an accessible and articulate manner and each metric comes with explanations about its usage, relevance and possible privacy implications.
Visiting a website or using a web application that utilizes Offen, the user gains access to and ownership of the usage data collected. The cookie used by Offen allows viewing all of the associated metrics, the users can *assert themselves what is being collected and what isn't*. Data is being displayed in an accessible and articulate manner and each metric comes with explanations about its usage, relevance and possible privacy implications.
Users can choose to export their data, delete it selectively or in its entirety.
@ -42,11 +43,11 @@ Users can choose to export their data, delete it selectively or in its entirety.
Operators of small and mid-sized websites and web applications are faced with growing challenges not only since the introduction of GDPR: how do they gain insights into what users are interested in and which of the features offered are being used? Is it possible to showcase *transparent and considerate handling of user data* - i.e. neither being spy or data leech - without surrendering and abandoning usage metrics altogether?
Choosing __offen__, websites and web applications obtain a free, open and robust tool for collecting and analyzing relevant usage data. The insights gained enable continuous improvement of these services while still respecting their user's privacy. *Opening up the data to the users does not constitute a disadvantage, but strengthens the relationship with them* by being entirely transparent.
Choosing Offen, websites and web applications obtain a free, open and robust tool for collecting and analyzing relevant usage data. The insights gained enable continuous improvement of these services while still respecting their user's privacy. *Opening up the data to the users does not constitute a disadvantage, but strengthens the relationship with them* by being entirely transparent.
### Part of the public debate
Transparently handling usage data in the open creates mutual trust while still enabling operators to collect needed usage statistics. __offen__ is designed to be a mediating agent only, and does not side with either users or operators. Sharing knowledge between the two parties creates opportunities for an *open and fact based discussion* about user data and privacy. Users gain insights into what data is being collected and what these data points are used for, just like they learn about which kind of data is not part of the collection. They are enabled to reach self-determined decisions about what they consent with and what they disagree with when it comes to privacy on the web, also in other contexts than analytics.
Transparently handling usage data in the open creates mutual trust while still enabling operators to collect needed usage statistics. Offen is designed to be a mediating agent only, and does not side with either users or operators. Sharing knowledge between the two parties creates opportunities for an *open and fact based discussion* about user data and privacy. Users gain insights into what data is being collected and what these data points are used for, just like they learn about which kind of data is not part of the collection. They are enabled to reach self-determined decisions about what they consent with and what they disagree with when it comes to privacy on the web, also in other contexts than analytics.
We want to exemplify that it is time to depart the age of "data capitalism" [^8] and to create *technologies and infrastructure that are transparent, open and oriented towards the common good*
@ -54,9 +55,9 @@ We want to exemplify that it is time to depart the age of "data capitalism" [^8]
---
### offen as a technology
### Offen as a technology
At runtime, __offen__ is just mediating exchange between users and operators. Usage data is collected in conformance to GDPR and with the concept of "Datensparsamkeit" [^9] in mind. All user data is encrypted in the browser so that it can only be accessed by the users themselves or the matching operator. While being collected in the context of a website or application, neither operators nor third party scripts have any possibilty to access the usage data. __offen__ itself doesn't have any way of decrypting, processing or even selling the gathered data at any point.
At runtime, Offen is just mediating exchange between users and operators. Usage data is collected in conformance to GDPR and with the concept of "Datensparsamkeit" [^9] in mind. All user data is encrypted in the browser so that it can only be accessed by the users themselves or the matching operator. While being collected in the context of a website or application, neither operators nor third party scripts have any possibilty to access the usage data. Offen itself doesn't have any way of decrypting, processing or even selling the gathered data at any point.
[^9]: Datensparsamkeit <https://martinfowler.com/bliki/Datensparsamkeit.html>
@ -71,4 +72,4 @@ Users and operators are given intuitive and accessibility-focused tools for anal
### Modus Operandi
Developing and running __offen__ can only work out when it is entirely *free of any kind of economic constraints or goals* and its only objective is *contributing to the common good*. Development of a prototype is reliant on public grants or similar funding sources. Long term operation of the software, just like its maintenance and continued development, is tied to resources granted by foundations or being donated by the public.
Developing and running Offen can only work out when it is entirely *free of any kind of economic constraints or goals* and its only objective is *contributing to the common good*. Development of a prototype is reliant on public grants or similar funding sources. Long term operation of the software, just like its maintenance and continued development, is tied to resources granted by foundations or being donated by the public.

View File

@ -1,19 +1,20 @@
Title: Transparent web analytics for everyone | offen
description: offen is a free and open source analytics software for websites and web applications. Users can access their data while the operators treat it with respect.
Title: Transparent web analytics for everyone | Offen
description: Offen is a free and open source analytics software for websites and web applications. Users can access their data while the operators treat it with respect.
save_as: index.html
href: /
template: index
sitemap_priority: 1.0
sm_image_url: /theme/images/offen-logo-social-media.jpg
## Summary
__offen__ is a web analytics software that gives users access to the data they are generating. Not only operators running sites or applications are given able to use the analytics tools, but also *the users themselves are granted access to and ownership of their data*.
Offen is a web analytics software that gives users access to the data they are generating. Not only operators running sites or applications are given able to use the analytics tools, but also *the users themselves are granted access to and ownership of their data*.
Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. __offen__ also details *which kind of data is not collected*. All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether.
Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. Offen also details *which kind of data is not collected*. All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether.
__offen__ treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make *autonomous and informed decisions regarding the use of their data*. Operators are enabled to gain insights while respecting their users' privacy and data.
Offen treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make *autonomous and informed decisions regarding the use of their data*. Operators are enabled to gain insights while respecting their users' privacy and data.
__offen__ is currently in the early stages of development and is applying for funds to sustain its development. An early alpha version is running on this site: you can *visit the [auditorium](/auditorium/)* to access your data.
Offen is currently in the early stages of development and is applying for funds to sustain its development. An early alpha version is running on this site: you can *visit the [auditorium](/auditorium/)* to access your data.
<div class="btn-wrapper">
<a class="btn btn-color-yellow" href="/deep-dive/">Deep dive</a>

View File

@ -1,15 +1,16 @@
Title: Legal Notice | offen
Title: Legal Notice | Offen
description: Information in accordance with Section 5 TMG
save_as: legal-notice/index.html
href: /legal-notice/
exclude_from_sitemap: true
sm_image_url: /theme/images/offen-logo-social-media.jpg
## Legal Notice
### Information in accordance with Section 5 TMG
Frederik Ring
Torfstr. 22
13353 Berlin
13353 Berlin
### Contact Information
E-Mail: [hioffen@posteo.de](mailto:hioffen@posteo.de)

View File

@ -1,13 +1,14 @@
Title: Opt-out | offen
description: Prevent offen from aggregating the actions you have taken on participating websites.
Title: Opt-out | Offen
description: Prevent Offen from aggregating the actions you have taken on participating websites.
save_as: opt-out/index.html
exclude_from_sitemap: true
sm_image_url: /theme/images/offen-logo-social-media.jpg
## You are opted out
This will prevent __offen__ from aggregating the actions you have taken on participating websites.
This will prevent Offen from aggregating the actions you have taken on participating websites.
Operators now cannot draw any conclusions from your actions via __offen__. At the same time, however, they *cannot create a better experience* for you and other users.
Operators now cannot draw any conclusions from your actions via Offen. At the same time, however, they *cannot create a better experience* for you and other users.
<script>
var vault = document.createElement('iframe')

View File

@ -1,34 +0,0 @@
Title: Project status | offen
description: How much headway has been made on individual tasks leading up to a stable version.
save_as: status/index.html
href: /status/
## Project status
### September 2019
We have deployed an alpha version of __offen__ that we are currently testing on a few select sites. Usage data is collected and can be accessed by both users and site operators. Users can opt out and delete their data at any time. You can *follow the development at [github.com/offen/offen](https://github.com/offen/offen){: target="_blank"}*
---
### Next up
#### Tech
The next big task from a technical perspective is enabling account creation by third parties. This will allow us to open up a beta version of to select operators and collect their - as well as their user's - feedback.
#### Explainer
Once the user interface starts to get less volatile at the end of our alpha test, we will start to add explanations to all of the metrics as well as create additional content to educate users about the privacy measures we are taking and about their implications.
#### Milieu
Currently, we are researching the milieu on the topics of privacy and web analytics software in more detail. The aim is to create a selection of opinion leaders, bloggers and journalists who will be invited to test and evaluate.
#### Story
Our product story is based on three key questions. What makes __offen__ stand out from other offerings in the field? What is the motivation for site operators to implement an open source analytics software that limits the amount of data collected? How can we raise or amplify users' awareness for a respectful handling of their data?
#### Publicity
This product story is the starting point for publicity efforts that will start as soon as a beta version is available. They include own blog posts, forum marketing as well as SEO measures.

View File

@ -39,8 +39,12 @@ DIRECT_TEMPLATES = ['sitemap']
SITEMAP_SAVE_AS = 'sitemap.xml'
PLUGIN_PATHS = ['./plugins']
PLUGINS = ['assets']
PLUGINS = ['decorate_content', 'assets']
DECORATE_CONTENT = {
# maps any CSS selector to a list of classes to be added
# 'p': ['pv0', 'dim']
}
GITHUB_ORG = 'https://github.com/offen'
CONTACT_EMAIL = 'hioffen@posteo.de'
@ -50,3 +54,5 @@ LINKEDIN_URL = 'https://www.linkedin.com/company/hioffen'
TWITTER_URL = 'https://twitter.com/hioffen'
OFFEN_ACCOUNT_ID = '9b63c4d8-65c0-438c-9d30-cc4b01173393'
STATUS_URL = '/blog/laying-foundation-for-fair-web-analytics'

View File

@ -0,0 +1 @@
from .decorate_content import *

View File

@ -0,0 +1,33 @@
from json import loads
from pelican import signals
from pelican.contents import Article, Page, Static
from bs4 import BeautifulSoup
def content_object_init(instance):
if isinstance(instance, (Article, Page, Static)):
plugin_settings = instance.settings.get("DECORATE_CONTENT", {})
content_overrides = (
instance.metadata.get("decorate_content", None)
if instance.metadata is not None
else None
)
settings = plugin_settings.copy()
settings.update(
loads(content_overrides) if content_overrides is not None else {}
)
soup = BeautifulSoup(instance._content, "html.parser")
for selector, class_names in settings.items():
elems = soup.find_all(selector)
for elem in elems:
elem["class"] = elem.get("class", []) + class_names
instance._content = soup.decode()
def register():
signals.content_object_init.connect(content_object_init)

View File

@ -3,3 +3,4 @@ markdown==3.1.1
git+git://github.com/miracle2k/webassets#d1f3455e383446ca4ab0c644f326ee937e68e809
cssmin==0.2.0
libsass==0.19.3
beautifulsoup4==4.8.1

View File

@ -363,6 +363,9 @@ BUTTONS
.btn-wrapper {
margin: 40px 0 0 0;
}
.btn-wrapper-article {
margin: 30px 0 80px 0;
}
.btn {
border-radius: 0px;
padding: 8px 30px;
@ -588,13 +591,21 @@ img {
.image-text-custom {
margin: 10px 0 -15px 0;
}
.image-text-560-315 {
width: 560px;
height: 315px;
.image-text-600-338 {
width: 600px;
height: 338px;
}
.image-text-600-322 {
width: 600px;
height: 322px;
}
@media only screen and (max-width: 600px) {
.image-text-560-315 {
.image-text-600-338 {
max-width:100%;
height: auto;
}
.image-text-600-322 {
max-width:100%;
height: auto;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

View File

@ -14,8 +14,8 @@
<meta property="og:description" content="{{ page.description }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ SITEURL }}{{ page.href or page.url or page.save_as }}">
<meta property="og:image" content="{{ SITEURL }}/theme/images/offen-logo-social-media.jpg">
<meta name="twitter:image:alt" content="offen logo">
<meta property="og:image" content="{{ SITEURL }}{{ page.sm_image_url }}">
<meta name="twitter:image:alt" content="Offen logo">
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="{{ SITEURL }}{{ page.href or page.url or page.save_as }}">
<link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
@ -31,7 +31,7 @@
<section class="nav-bar">
<div class="nav-container">
<div class="icon">
<a href="/"><img src="/theme/images/offen-icon-white.svg" alt="offen logo" width="42" height="46" class="logo"></a>
<a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="42" height="46" class="logo"></a>
</div>
<nav>
<div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
@ -43,7 +43,7 @@
<a href="/deep-dive/">Deep dive</a>
</li>
<li>
<a href="/status/">Status</a>
<a href="{{ STATUS_URL }}">Status</a>
</li>
<li>
<a href="/about/">About</a>
@ -78,7 +78,7 @@
Participate
</h2>
<p>
Development of <strong>offen</strong> has just started. Do not hesitate to make a contribution and help us handle data with respect.
Development of Offen has just started. Do not hesitate to make a contribution and help us handle data with respect.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
@ -89,10 +89,10 @@
In the making
</h2>
<p>
<strong>offen</strong> is still in alpha. Discover what is already up and running and where we want to go in the coming months.
Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="/status/">Project status</a>
<a class="btn btn-color-black" href="{{ STATUS_URL }}">Project status</a>
</div>
</div>
<div class="card">
@ -100,7 +100,7 @@
Ethical internet
</h2>
<p>
We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{PATREON_URL}}" rel="noopener" target="_blank">Support us</a>
@ -115,7 +115,7 @@
<div class="footer">
<div class="footer-card-deck">
<div class="footer-card">
<h3><strong>offen</strong></h3>
<h3>Offen</h3>
<h4>Transparent web analytics</h4>
<h4>for everyone</h4>
</div>

View File

@ -6,13 +6,13 @@
<div class="container-reader">
<div class="spacer-intro">
<div class="sign">
<img src="/theme/images/offen-logo-white.svg" alt="offen logo" width="152" height="94">
<img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="152" height="94">
</div>
<h1>
<em>Transparent web analytics for operators and users</em>
</h1>
<p>
<strong>offen</strong> is a free and open source analytics software for websites and web applications that allows respectful handling of data.
Offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
@ -31,7 +31,7 @@
<em>Free & Open</em>
</h2>
<p>
Anyone can audit our open source code to verify it works as intended. <strong>offen</strong> will always be available free of charge.
Anyone can audit our open source code to verify it works as intended. Offen will always be available free of charge.
</p>
</div>
<div class="card">
@ -64,10 +64,10 @@
In the making
</h2>
<p>
<strong>offen</strong> is still in alpha. Discover what is already up and running and where we want to go in the coming months.
Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-white" href="/status/">Project status</a>
<a class="btn btn-color-white" href="{{ STATUS_URL }}">Project status</a>
</div>
</div>
</div>
@ -89,7 +89,7 @@
Ethical internet
</h2>
<p>
We're working hard to ensure that <strong>offen</strong> is independent, cutting-edge and can be sustained for years to come.
We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
</p>
<div class="btn-wrapper">
<a class="btn btn-color-black" href="{{PATREON_URL}}" rel="noopener" target="_blank">Support us</a>