mirror of
https://github.com/offen/website.git
synced 2024-11-22 09:00:28 +01:00
content
This commit is contained in:
parent
f198fb29f4
commit
566364449b
@ -5,25 +5,27 @@ slug: laying-foundation-for-fair-web-analytics
|
||||
sitemap_priority: 0.7
|
||||
sm_image_url: /theme/images/offen-blog-0010-milestone1.jpg
|
||||
|
||||
{:class="image-text-600-322"}
|
||||
<img alt="Milestone 1 - Laying the foundation for fair web analytics" class="mb5" src="/theme/images/offen-blog-0010-milestone1.jpg"/>
|
||||
|
||||
12 Dec 2019, Hendrik Niefeld
|
||||
###### 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 class="mb5">
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-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 class="mb5">
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" target="_blank" href="https://github.com/offen/offen/wiki/Developing-offen#setup">Open wiki</a>
|
||||
</div>
|
||||
|
||||
### Lightweight and accessible interfaces
|
||||
@ -31,8 +33,8 @@ The *Auditorium* is ready for a dry run. It's a functional prototype for accessi
|
||||
|
||||
### 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 class="mb5">
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="mailto:hioffen@posteo.de">Get in touch</a>
|
||||
</div>
|
||||
|
||||
### Read the docs
|
||||
@ -48,6 +50,6 @@ We have further hardened and improved the HTTP server that Offen exposes. If you
|
||||
|
||||
### 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 class="mb5">
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" target="_blank" href="https://github.com/offen/offen/pull/192">Open milestone 1 pull</a>
|
||||
</div>
|
||||
|
||||
@ -12,15 +12,18 @@ Offen is created by [Frederik Ring][frederik-ring]{: target="_blank"} and [Hendr
|
||||
[hendrik-niefeld]: http://niefeld.com/
|
||||
[frederik-ring]: https://www.frederikring.com/
|
||||
|
||||
[{:width="160px" height="60px" class="image-text-custom"}](https://nlnet.nl/){: target="_blank"}
|
||||
[{:width="160px" height="60px" class="mt4"}](https://nlnet.nl/){: target="_blank"}
|
||||
|
||||
We are happy to work with [NLnet Foundation][nlnet-foundation]{: target="_blank"} who complement our activities within their [Next Generation Internet][next-generation-internet]{: target="_blank"} initiative.
|
||||
|
||||
[nlnet-foundation]: https://nlnet.nl/
|
||||
[next-generation-internet]: https://nlnet.nl/NGI/
|
||||
|
||||
---
|
||||
|
||||
### Contact
|
||||
|
||||
*Feel free to contact us with any kind of feedback.* From criticism and praise to contributions or support, everything is welcome. Get in touch.
|
||||
|
||||
[hioffen@posteo.de](mailto:hioffen@posteo.de) [[GPG Key]](/theme/74B041E23DB29D552644CEB1B18C633D6967FE3F.asc){: target="_blank"}
|
||||
[hioffen@posteo.de](mailto:hioffen@posteo.de)
|
||||
[Email GPG Key](/theme/74B041E23DB29D552644CEB1B18C633D6967FE3F.asc){: target="_blank"}
|
||||
|
||||
@ -6,25 +6,26 @@ sitemap_priority: 1.0
|
||||
|
||||
|
||||
<div class="mw6 ph3">
|
||||
<h2 class="f25 lh-solid ma0">Summary</h2>
|
||||
<h2>Summary</h2>
|
||||
|
||||
<p class="ma0 mb2">
|
||||
<p>
|
||||
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 <em>the users themselves are granted access to and ownership of their data.</em>
|
||||
</p>
|
||||
|
||||
<p class="ma0 mb2">
|
||||
<p>
|
||||
Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. Offen also details <em>which kind of data is not collected.</em> All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mw6 ph3 mrgn-t">
|
||||
<p class="ma0 mb2">
|
||||
<p>
|
||||
Offen treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make <em>autonomous and informed decisions regarding the use of their data.</em> Operators are enabled to gain insights while respecting their users' privacy and data.
|
||||
</p>
|
||||
|
||||
<p class="ma0 mb4">
|
||||
<p>
|
||||
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 <em>visit the [auditorium](/auditorium/)</em> to access your data.
|
||||
</p>
|
||||
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="/deep-dive/">Deep dive</a>
|
||||
<div class="mt3">
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="/deep-dive/">Deep dive</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -48,12 +48,15 @@ PLUGINS = ['decorate_content', 'assets']
|
||||
|
||||
# maps any CSS selector to a list of classes to be added
|
||||
DECORATE_CONTENT = {
|
||||
'h2': ['f25', 'ma0', 'mb3'],
|
||||
'h3': ['ma0'],
|
||||
'h4': ['ma0'],
|
||||
'h2': ['f25', 'ma0', 'mb3', 'light-silver'],
|
||||
'h3': ['f5', 'normal', 'mt4', 'ma0', 'mb3', 'fnt-cclr-mid-black'],
|
||||
'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
|
||||
'h5': ['ma0'],
|
||||
'h6': ['ma0'],
|
||||
'p': ['ma0', 'mb2']
|
||||
'h6': ['f5', 'lh-solid', 'normal', 'i', 'ma0', 'mb3', 'light-silver'],
|
||||
'p': ['ma0', 'pb3'],
|
||||
'a': ['link', 'b', 'dim', 'gray'],
|
||||
'blockquote': ['f5', 'i', 'ma0', 'ml4'],
|
||||
'hr': ['m0a', 'mt5', 'mb3', 'b--black-05']
|
||||
}
|
||||
|
||||
GITHUB_ORG = 'https://github.com/offen'
|
||||
|
||||
@ -3,35 +3,38 @@ COLORS
|
||||
----------------------------------------------------*/
|
||||
/* Custom Tachyons classes */
|
||||
.cclr-mid-yellow {
|
||||
background-color: #F7BF08;
|
||||
}
|
||||
.fnt-cclr-mid-yellow { /* font color */
|
||||
background-color: #F7BF08;
|
||||
}
|
||||
.fnt-cclr-mid-yellow {
|
||||
color: #F7BF08;
|
||||
}
|
||||
.brd-cclr-mid-yellow { /* button border color */
|
||||
}
|
||||
.brd-cclr-mid-yellow {
|
||||
border-color: #F7BF08;
|
||||
}
|
||||
}
|
||||
.cclr-bright-yellow {
|
||||
background-color: #fde28c;
|
||||
}
|
||||
}
|
||||
.cclr-mid-mint {
|
||||
background-color: #BBD9D3;
|
||||
}
|
||||
}
|
||||
.cclr-mid-black {
|
||||
background-color: #39352A;
|
||||
}
|
||||
.fnt-cclr-mid-black { /* font color */
|
||||
}
|
||||
.fnt-cclr-mid-black {
|
||||
color: #39352A;
|
||||
}
|
||||
.brd-cclr-mid-black { /* button border color */
|
||||
}
|
||||
.brd-cclr-mid-black {
|
||||
border-color: #39352A;
|
||||
}
|
||||
}
|
||||
.cclr-mid-grey {
|
||||
background-color: #898989;
|
||||
}
|
||||
}
|
||||
.cclr-bright-grey {
|
||||
background-color: #D5D5D5;
|
||||
}
|
||||
}
|
||||
.cclr-dark-white {
|
||||
background-color: #f9f7f2;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
@ -55,11 +58,17 @@ LAYOUT
|
||||
.w55 {
|
||||
width: 18rem;
|
||||
}
|
||||
/* Custom media query - extra small */
|
||||
@media only screen and (max-width: 30em) {
|
||||
.w55 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/* Custom media query - extra large */
|
||||
@media only screen and (min-width: 68em) {
|
||||
/* Custom Tachyons class - margin for two-row text */
|
||||
.mrgn-t {
|
||||
margin-top: 2.8rem;
|
||||
margin-top: 3.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -260,8 +269,6 @@ GRAPHICS
|
||||
#bg-outro {
|
||||
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
|
||||
}
|
||||
/*
|
||||
#bg-cta-bottom {
|
||||
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
|
||||
}
|
||||
*/
|
||||
@ -32,7 +32,7 @@
|
||||
{% endif %}
|
||||
</head>
|
||||
{% endblock %}
|
||||
<body class="{{ template }} f5 sans-serif lh-copy fnt-cclr-mid-black">
|
||||
<body class="{{ template }} f5 sans-serif lh-copy fnt-cclr-mid-black cclr-dark-white">
|
||||
<!-- Menu ######################################################### -->
|
||||
<div class="menu w-100 cclr-mid-yellow"> <!-- menu -->
|
||||
<section class="nav-bar">
|
||||
@ -68,8 +68,8 @@
|
||||
</div>
|
||||
<!-- Content ######################################################### -->
|
||||
{% block content %}
|
||||
<div class="w-100 mt5-ns bg-white mid-grey"> <!-- content -->
|
||||
<div class="mw6 center">
|
||||
<div class="w-100 mt5-ns gray"> <!-- content -->
|
||||
<div class="mw7 center pt5 pb6 ph3 ph5-ns bg-white">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
@ -77,41 +77,35 @@
|
||||
|
||||
{% block outro %}
|
||||
<div class="w-100 cclr-mid-yellow"> <!--cta-bottom-->
|
||||
<div class="w-100" id="bg-cta-bottom">
|
||||
<div class="pt3 pb6 ph3" id="bg-cta-bottom">
|
||||
<div class="mw8 center">
|
||||
<div class="flex flex-wrap justify-around">
|
||||
<div class="w5">
|
||||
<h2 class="pa0 ma0">
|
||||
<div class="w55 mh3 pt5">
|
||||
<h2 class="f25 lh-solid ma0 mb3">
|
||||
Participate
|
||||
</h2>
|
||||
<p class="pa0 ma0">
|
||||
<p class="ma0 mb4">
|
||||
Development of Offen has just started. Do not hesitate to make a contribution and help us handle data with respect.
|
||||
</p>
|
||||
<div class="pa0 ma0">
|
||||
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
|
||||
</div>
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
|
||||
</div>
|
||||
<div class="w5">
|
||||
<h2 class="pa0 ma0">
|
||||
<div class="w55 mh3 pt5">
|
||||
<h2 class="f25 lh-solid ma0 mb3">
|
||||
In the making
|
||||
</h2>
|
||||
<p class="pa0 ma0">
|
||||
<p class="ma0 mb4">
|
||||
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="pa0 ma0">
|
||||
<a class="btn btn-color-black" href="/blog/">Project status</a>
|
||||
</div>
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/blog/">Project status</a>
|
||||
</div>
|
||||
<div class="w5">
|
||||
<h2 class="pa0 ma0">
|
||||
<div class="w55 mh3 pt5">
|
||||
<h2 class="f25 lh-solid ma0 mb3">
|
||||
Ethical internet
|
||||
</h2>
|
||||
<p class="pa0 ma0">
|
||||
<p class="ma0 mb4">
|
||||
We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
|
||||
</p>
|
||||
<div class="pa0 ma0">
|
||||
<a class="btn btn-color-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>
|
||||
</div>
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,8 +113,8 @@
|
||||
</div>
|
||||
{% endblock %}
|
||||
<!-- Footer ######################################################### -->
|
||||
<div class="w-100 cclr-mid-black gray"> <!--footer-->
|
||||
<div class="flex flex-row-l flex-column w-100-l w-80 center pt4 pb6 ph4">
|
||||
<div class="w-100 cclr-mid-black gray ph4"> <!--footer-->
|
||||
<div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
|
||||
<div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow">
|
||||
<p class="ma0">Offen</h3>
|
||||
<p class="ma0">Transparent web analytics</h4>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="w-100 mt5-ns cclr-mid-yellow"> <!-- menu -->
|
||||
<div class="mw8 center" id="bg-intro">
|
||||
<div class="flex flex-wrap pt6-ns pt-3 ph4">
|
||||
<div class="mw5 pr4">
|
||||
<div class="mw5 pr4 pb3">
|
||||
<img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="146" height="90">
|
||||
</div>
|
||||
<div class="mw6">
|
||||
@ -73,7 +73,7 @@
|
||||
</div>
|
||||
|
||||
<div class="w-100 bg-white gray"> <!--content-index-->
|
||||
<div class="flex flex-wrap justify-center pt5 pb6 ph3">
|
||||
<div class="flex flex-wrap justify-center pt5 pb6">
|
||||
{{ page.content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user