search

ipfs / ipfs-gui

Creating standards and patterns for IPFS that are simple, accessible, reusable, and beautiful
105 stars 17 forks source link

Design: Creating Simple Websites with IPFS #69

Closed lidel closed 4 years ago

lidel commented 6 years ago

Websites are cool. Our GUIs should empower users and make it extremely easy to create one with UI "one click away" .

How to make creating simple websites with IPFS feel great?

please provide examples of good design / user experience in comments

Work Outline

Prior Art

cc @ipfs/gui-team @kyledrake https://github.com/ipfs/ipfs-gui/issues/35 https://github.com/ipfs/ipfs-gui/issues/34

lidel commented 6 years ago

(A summary of initial discussions with @kyledrake and others during the Q4 Team Week)

Low hanging fruit: Add Publishing Feature to Web UI

If we borrow some abstractions used by Neocities, we already have key components implemented as parts of the New Web UI.

What is missing is wiring them up together as a part of coherent user journey from "website idea" to "having a link to the static website". Mutability via website keys/IPNS support could be introduced in next iteration.

file manager text/code editor
Web UI file manager text file editor from Settings screen
Neocities neocities: file manager neocities: text/code editor
patrykadas commented 5 years ago

I remember that we were experimenting with forking websites with @Gozala, here are the short videos explaining the use case, baked natively in the browsing experience:

Fork & Send: https://drive.google.com/file/d/0B8pr60831MlMT1JiYlhMZFh2ajg/view?usp=sharing

Receive: https://drive.google.com/file/d/0B8pr60831MlMUWxTc3ZxU0h3LUk/view?usp=sharing

It's much simplified with a sort of identity system in place, however, the case here was to excite and show possibilities rather than a pragmatic solution. I'm wondering though if this could be utilized with the companion and/or website owners.

I'd be really happy to prepare a design proposal for an uploader with baked-in publishing functionality and highlight some superpowers when the recipient actually opens the shared link. I should have something done by the beginning of next week :)

So far I've found #34, #35, #68 and https://github.com/ipfs/ipfs-gui/blob/master/research/README.md#add-files relevant to this case as well.

EDIT: I feel like changing 'Add' button to a dropdown with multiple options (folder/file/text) would do just fine. I've uploaded the https://www.figma.com/file/YTMV7cOMmDSfqw8BgwoncbJ5/IPFS-Desktop?node-id=0%3A1 to #44, but I think the components will eventually be universal.

@lidel

lidel commented 5 years ago

@patrykadas I really like the idea of sharing annotated websites. FYI a relevant work on web annotations and IPFS is happening in pm-discussify/discussify-browser-extension (p2p version of https://hypothes.is) – you may want to post those demos there. I also like the light feel of minimalist Files browser and Web UI from your figma, added it to https://github.com/ipfs/ipfs-gui/issues/9 for future reference :)

Going back to authoring websites: "Add button as a dropdown" is already a thing in ipfs-webui (screenshot), we probably could reuse that pattern, eg. add option to "Add a website" as an entry point into authoring flow where a new directory with index.html is added behind the scenes and HTML file is opened in editor.

What superpowers you had in mind? (some sort of overlay informing user "this website can be forked"?)

patrykadas commented 5 years ago

@lidel That's great to hear! Feel free to do anything you'd like with these designs - it was just fun/exploration. I agree with the authoring website, it should probably open the editor and provide a convenient place to get a link to the file user's working on.

In terms of superpowers, I've imagined utilizing some peer to peer features. I liked the @gozala idea about the peer cache that'd allow displaying a website in an offline mode , combined with displaying available versions, edit mode (forking), maybe even a way of discovering the peers. Ideally, it'd be integrated with the browser, like in the Beaker, but perhaps it could be also part of the companion and displayed somewhere within the website as a fixed widget.

frame 2 1
Gozala commented 5 years ago

@patrykadas those sketches look nice! I have being wanting something along the lines for the https://github.com/ipfs/in-web-browsers/issues/137 exploration. Idea that sites could emebed "IPFS Access Point" thingy that would allow them to load everything off of IPFS, but I also wanted some way to provide context and ask for permissions. Something similar to what you have in sketches.

Idea is for it to serve multiple duties:

Gozala commented 5 years ago

There is probably more but primary goal is to have consistent experience (usually delivered through chrome UI, which we can't without building a browser) that would make it clear that all the things in this system interoperate and all the data produces / accessed is in your library that is fully under your control.

ericronne commented 5 years ago

cc @jessicaschilling (once added to repo)

jessicaschilling commented 4 years ago

Closing this issue in favor of similar meta-issue https://github.com/ipfs/ipfs-gui/issues/77 ... but linking to this issue's valuable info prominently in the open issue's description.