D4.1 -- DREAM public collaborative website

DREAM WP4 - REPORTING
, ,
#1

Deliverable D4.1 - DREAM public collaborative website is the first deliverable at M1. It matches the online presence of our team and team work, including:

This topic is to prepare and work on this online presence. This task is assigned to @how, and @Nemael volunteered to help.

The following post is a wiki to keep track of the tasks at hand.

The conversation below documents how we reflect collectively on our public Web presence.

#2

D4.1 - Task List

This is a wiki. The following discussion should refer to specific tasks.

Branding

  • Contact Ted Nelson for permission to use his graphy in the logo (@how)
  • Choose a color palette
  • Establish tagline
  • Establish pitch for activists
  • Establish pitch for developers

Structure

  • Establish publication workflow
  • Design forum categories, groups, tags…
  • Design static site structure

Contents

  • Setup pages category
  • Write Contact page
  • Write Intro page
  • Write branding page for activists
  • Write branding page for developers
#3

Ted Nelson’s assistant Keith Shapiro failed to reply the simple question and instead told me that “Dr Nelson has no time for other people’s projects. Sorry” which I interpret as DWTFYWWI. Unless Dr Nelson suddenly has an urge to cringe about other people’s projects, we’re safe to assume our logo is fine as it is. If something else happens, we at least have a public record of the matter at hand.

2 Likes
#4

Started both topics here:
https://dream.public.cat/t/for-activists/18

1 Like
#5

I proposed something like this on the static homepage:

« Internet protocols and applications to empower citizens to act and find agency together »

1 Like
#6

Is what is described in https://dream.public.cat/t/pages-for-dream-public-cat/15/1 enough?

#7

Started these here: https://dream.public.cat/t/for-developers/20

#8

I think that is enough, because it explains well how the pages are published on the website, and from where the text can be modified.

1 Like
#9

Content is here https://dream.public.cat/t/intro/19

However while first paragraph goes on the homepage not sure if the rest makes for a new section called Intro or if it is the DREAM team section.

#10

Here is a preview for the home page: https://dream.public.cat/index-003.html

Some things remain to be done:

  1. agree on color palette
  2. style published pages to match home page
  3. publish all 4 pages
  4. add Aria labels for A11y
  5. verify color contrasts for A11y
  6. use @font-face to embed fonts
  7. validate on various devices
  8. close all tasks

Note that in 2020, you can actually use semantic HTML and not give out to endless series of DIV tags with classes. Minimalism rulez!

Some screenshots

This layout works on mobile, screen reader, desktop, with or without CSS, and without JavaScript[1].

Without Page Style (and no JavaScript[1:1])

On Mobile

9b208d656630ada2a58a48d6d26ac5f9061f7b81
9b208d656630ada2a58a48d6d26ac5f9061f7b81420Ă—1306 91.3 KB

On Desktop

Screenshot_2020-11-07 DREAM enables Group P2P Collaboration(1)
Screenshot_2020-11-07 DREAM enables Group P2P Collaboration(1)1904Ă—1020 108 KB

With CSS activated

There’s not a single line of JavaScript here – except for displaying the Discourse topics.
Note: the footer (in misty rose) is actually fixed, so it always appears at the bottom of the window.

On Mobile

image
image420Ă—4739 162 KB

On Desktop

image
image1904Ă—3347 341 KB

  1. except to display Discourse topics… ↩︎ ↩︎

#11

background suggestion: #fff6d6 – I prefer lighter/warmer/less prominent colors as background – I took the lemon curry color from there and made it lighter

#12

The <iframe> in there shows:

Blocked by X-Frame-Options Policy

An error occurred during a connection to ps.zoethical.org.

Firefox prevented this page from loading in this context because the page has an X-Frame-Options policy that disallows it.

#13

also, I like this palette: https://github.com/morhetz/gruvbox#light-mode-1
though it looks already good just by using the lighter background i mentioned above,
perhaps the blue could be changed to #076678 from this palette
and the button background to #9d0006, it has too much contrast currently

#14

Thank you for reporting! This comes from the SSO with ps.zoethical.org. I should add it to the CSP headers.

I’ll be working on the website this afternoon.

#15

I like the direction you’ve taken the design of the website, @how.

Especially happy to see you using semantic HTML and modern (but uncomplicated) CSS patterns such as variables, to keep things clean and easy to maintain.

I mentioned this in our chat room, but in case you missed it, I would love it if you took a look at the website I made for my NLnet-funded project “secushareBOX”:

The source from which the site is deployed is here:

It may be directly useful to look at the way I did the “responsive” CSS so that it adapts to every screen size (including mobile screens).

1 Like
#16

Another fun thing to note on the box.secushare.org site is the “tooltips” which popup when you hover over the bold text with the dotted underlines.

Please note that there is no javascript used anywhere on this website. :slight_smile:

1 Like
#17

I like your approach @dvn. We use similar minimalist techniques. I did not use CSS Grid this time.

In the latest installment which just went live, I prepended the CSS with Normalize.css: an oldie and goodie that remains a user-made fix to browser differences so that the site appears about the same across browser vendors – hopefully: I did not check yet.

There are still a few known issues:

  1. no support for vendor-specific CSS attributes (esp. for flex items, e.g., there must me some --webkit-foo-stuff lyring around in older versions), but maybe I’d like bug reports for those :wink:
  2. the topics list inclusion could be bettered. I’m especially interested in considering including all Work Package reports and making the titles stand out a bit more.
  3. the button links lack contrast (OK, you can see the flame color, but the text color lacks contrast)
  4. I find the contents lacking a bit for a home page. But do we really need more? Maybe download links, links to specs, etc. when we have them. It would be easier to think about it in advance to be able to add them easily…
  5. The styling of the pages behind, served from Discourse, should match this one.
  6. All contents should be made public at some point :slight_smile:

Did I mention the source code is at https://code.cepheide.org/dream.public.cat.git/

#18

Another minimalist approach you can see at p2pcollab.net.
It’s using pandoc with Tufte CSS and a pandoc template, and a Makefile that generates html from org/md files. I’m planning to look into AsciiDoc and make a similar template for it.

#19

I like the minimalist way of @pukkamustard to generate the site:

#20

First impression feedback from a friend on the content of our website, which I’ve distilled into some points:

  • Lots of buzzwords/lingo
  • Unclear if the group will be distributing (3rd party) end user applications, or developing them, or simply developing a decentralized framework for existing collaboration apps
  • Not sure what level the work is being done at.
  • What is the relation to MirageOS? Is it a fork?
  • Is this a containerization system for a decentralized cloud?
1 Like