dat-ecosystem / organization

Organizational documentation for the dat-ecosystem
https://dat-ecosystem.org/organization/
7 stars 2 forks source link

dat-ecosystem website_homepage #85

Closed Mehrabbruno closed 1 year ago

Mehrabbruno commented 1 year ago

70

todo









Mehrabbruno commented 1 year ago

tasks


worklog

worklog-105 worklog-106


feedback


proposals

serapath commented 1 year ago

feedback 2023.01.21


retro page design

...what do you think about colorful parts, including banners or any sort of art or picture to be framed into for example "displays" (e.g. even the hexagon might be connected like a display and that's the "explanation" for why it shows a picture (or if we animate it slightly in the future, even some "movie") ...basicaly including it in the page, but more being presented by it without becoming part of the actual retro page design, like the retro page is hosting some modern content. liek a retro TV from ages ago could show a 2022 hollywood blockbuster movie, but by looking at the room and the TV the room would still look retro.

otherwise, while the colors look great, i feel the "retro" feel got lost a bit https://www.youtube.com/watch?v=Y7aEiVwBAdk

in retro pages or systems, the idea was to have a specific place for everything and put it there instead of like on modern pages, where the landing page is a "mashup" of many things to tell a story. the retro systems functioned more like systems.

e.g. we want it MORE RETRO than e.g https://heaven.computer/ ..which isn't bad, its win95 ...but GEOS/C64 is a lot more retro - as retro as it possibly gets without going terminal only :-)


projects page section

the 3D projects graph goes on the project page in some section. up to you to suggets how to integrate that into a nice retro page design. it needs a button to switch on "webXR" mode and/or toggle fullscreen mode for people who have VR head sets.

you see all projects on the dat-ecosystem discord server and the active channels. we need also an archive section to list inactive projects (need a leaf to indicate that phase too i guess)

filter sounds cool - also yes, we will have the ecosystem 3D graphic that will also work in virtual reality to show how projects are connected and if users select a project node in that graph it will display more details about that project. so yes, again, a "super retro page can display modern content"

we don't have it yet, but it will come.

filters based on tags is cool filters based on project phase (indiciated by dat leaf) is cool too or type to find a specific project otherwise, project should by default might be randomised instead of alphabetically

We dont have any "more important" projects so having "limited projects" on the start page might not be needed. maybe we can skip it. if some pages become "non-scrollable" as a result, wouldnt be bad, because its anyway supposed to be ancient retro - ...there was no "scrolling" in ancient retro mostly. ...if you think its needed, projects should be randomized


project status in card

maybe the project status can be right next to the project logo? ...a double logo prefixed or postfixed by the phase specific version of the dat ecosystem logo?

also - i still think the little robot is cute too (maybe the flying head with hanging arms could "carry" the leaf to indicate status? :P or maybe the project status can be right next to the project logo? ...a double logo prefixed or postfixed by the phase specific version of the dat ecosystem logo?

otherwise, while the colors look great, i feel the "retro" feel got lost a bit https://www.youtube.com/watch?v=Y7aEiVwBAdk


old banner

regarding the "old banner", i would keep it exactly as is. we might do a later design to adjust it, but leaving it as is for now, maybe framing it, would make ppl recognize it. we cant fit text into it or we need to put it where it fits without changing the composition. otherwise, one thing i think that would work and would be great and would make sense for a TV movie played on an otherwise retro display or page, would if some of the hexagons would contain micro versions of project logos - that idea is already included in general, and in the tree, as seen on twitter: click and double check the twitter banner https://twitter.com/dat_ecosystem

That also means we need to update the banner from time to time in the future, when projects change and new ones are added, which gives opportunity to fine tune that banner over time.

The original banner is mostly important for the re-launch of the website to make people feel familiar :-)


page colors & theming

less colors make it also more neutral. the dark/light theme button can have a drop down and we add a real "theme customizer" so the user can change the colors and thsoe get cached locally until the user rests their theme, so the theme they picked stays when they come back, but by default things look retro


terminal

a terminal (maybe collapsible) would be sweet. if it had a "sticky/fixed footer", it could be used for real

https://imgur.com/Pib6Wff.png https://imgur.com/pHXkBva.png

if you feel like https://imgur.com/Pib6Wff.png then it should probably be drawn with simple lines, to be really retro, like e.g. https://www.pinterest.co.uk/serapath/retro-computer-console/

Like literally, if we had that, it should be pixelated lines or look crappy, the way it would be drawn if an ancient retro computer would draw that. their graphics where absolutely basic

check: https://imgur.com/GRocxiO.png https://imgur.com/yXLW8Pm.png https://imgur.com/KCmIaaF.png https://imgur.com/rjgBnVE.png https://imgur.com/QR66wVp.png https://imgur.com/zuO6noh.png https://imgur.com/C0IxLXK.png https://imgur.com/0jGsVQc.png https://imgur.com/jIoXtaE.png

Mehrabbruno commented 1 year ago

tasks


worklog

worklog 108


feedback


proposals

serapath commented 1 year ago

feedback 2023.01.25

perfect. let's implement it :-) thanks.

serapath commented 1 year ago

feedback 2023.02.01

By the way, all pages do not have the terminal yet. Maybe we can make the footer in that footer look like a terminal or add another collapsible terminal below that?

Byt default it might just print/show a hello/welcome message in the terminal which shared information about the discord/cabal chat rooms with a clickable link.

So people can configure and maybe it has a little config wheel too to activate/deactivate the beepbopp sound?

We might even consider putting the entire pages navigation bar into the footer instead of the header and then you can toggle a button to expand/collapse the terminal.

maybe one thing to avoid "blankness/whiteness" of the website is by allowing to theme sections. maybe even have the color change over time automatically, like fade? ...but have it technically controllable, either via buttons or picker or maybe some sort of "terminal" integrated in the bottom fo the page or somewhere ...maybe a fixed/sticky footer, where a user can type .help and then maybe some commands like list themes or select theme or whatever.

The impression that this is about libraries, protocols and low level fundamentals that are meant to be timeless and not change ever is meant to be communicated. So in a way, all that boxedness and "small mindedness" etc... also contributes to the vibe, but maybe there are many ways how to get there - i'm just saying retro https://www.gnu.org/home.en.html https://genode.org/

these are two more links. super dull and old school, but people will know things will get technical and low level beynd here. even https://en.wikipedia.org/wiki/Main_Page kinda is there πŸ™‚

let me know what you think how to get into that direction while fixing the design https://codepen.io/jcubic/pen/BwBYOZ

Mehrabbruno commented 1 year ago

tasks 2023.04.14


worklog

worklog 133 worklog 134


feedback


proposals

serapath commented 1 year ago

feedback 2023.04.14

Mehrabbruno commented 1 year ago

tasks 2023.04.17


worklog

worklog 135


feedback


proposals

serapath commented 1 year ago

feedback 2023.04.17

for worklog-134

So the "grid size unit" is not so much about snapping things to other things. It is more that retro systems often did not have an option to place things in other positions than in one of the grid slots, so the entire UI looked like that and we want to emulate the retro look that is caused by this.

so the smallest grid unit we have currently seems to be the up/down/left/right arrows of the vertical/horizontal scroll bar. The years in the timeline already have a height of that arrow so the width of the year should be a multiple of that arrow square too, maybe 3x arrow square, which makes the width of the timeline scrollbar 4 arrow squares, 3 for the year, 1 for the scrollbar, which means the icons in the navbar should probably be width and height of 2 arrow scrollbar squares. It is already close to that, but we can make it pixel perfect :-) scrollbar

Even text inside components should probably only be able to start at specific grid slots, not in between grid slots and all fonts probably need to become mono fonts with the widht of our grid size and even font size might need to come in multiples of those grid slots. So if we need an even smaller font, we should consider our smallest grid slot size to be that.

Which means, for example the timeline item tags have padding around the text. we either need to reduce padding or rather imagine our letters in our font as not filling the entire grid square, but leaving some padding, so we don't need multiples of grid slots around them as padding, or we create a grid slot that is half the tag font size to use for padding. Which means, technically we could make a tiny font that uses that smaller grid slot size. It also means a longer "text" in a tag on a card, should increase the width of that tag by multiples of our minimum grid slot size. If it goes over the width of a card, it should probably just shorten it foobarbazbeepboop might become foobarbazbe... and on hover you can maybe still see a tooltip. Also if we have too many tags, maybe we need to add another scrollbar instead of multiple tag rows. anyway, Hope this makes sense :-)

same here, i think it really makes it retro that all buttons are not the same length, but they should still be each multiples of our minimum grid slot size, which i assume currently might be, as said above, the size of a scrollbar arrow. navbar

But there is no need to make the dat-ecosystem logo section fit the width of a card. On other pages there would anyway not be such a card in place, but it would show something else. Basically there is still a lot of flexibility in making it a specific multiple of the minimum grid slot size, which totally doesn't need to snap it to the size of a card. datecossytemlogo

Basically what is meant by grid is literally an imaginary grid of squares and elements can be positioned in that grid.

Maybe the smallest grid size needs to be half a day field, so a day field consists of 2 grid slot squares. Which might make the scrollbar arrow 2x2 grid slot squares. Or we say the "calendar day slots" are a special case that don't fall into that, the same as an individual letter has a custom shape within a grid slot. calendar

Maybe for implementation we later need to define a grid size constant and then calculate all other sizes in the website as multiples of that constant. Also, thanks to javascript, we can even generate media query css so that we do not have to manually maintain potentially many media queries, and also resizing or drag/drop should probably jump things one grid size at a time instead of continuously dragging things around.

Maybe on different screen sizes, we can dynamically adapt that grid size constant.


Oh one more thing, maybe the "artwork" (like the tree with scientists) can actually get some sort of CSS dither filter applied to it to make it look "shittier". Couldn't find a quick dither filter, but maybe we need to look around a bit. https://css-tricks.com/grainy-gradients/


for worklog-135

wow, background pattern works, stripes in the window bar seem cool, padding seems cool too, but as said above, jsut needs multiples of the base "grid slot width", but really nice. homepage

also great logo size increase - much better. maybe could even be larger, but i guess it's fine, you probably tried different sizes and figured this one is nice. we could also consider again, if letters are "grid slot size" or multiples, then the logo might also need to be multiples of that, but a few more to make it larger than the letters, but it looks good. logo

Thanks also for trying the differernt highlight color, green vs. pink. I agree that pink is nicer and also gives a better contrast, but the downside is, that dat-ecosystem exists for 10 years and has always been green and green/blue, but with pink the dominant color combination becomes blue/pink, which changes the character significantly i feel.

I feel though making it all green is way to intense in terms of color, so dark blue must be the main color as you suggest, but by using green as the highlight we maintain the character which dat developed over the many years - and still, what about making an exception for the terminal? ...we could keep the terminal button pink and activating it makes it darkblue, but shows the terminal with a pink window bar to indicate that this is a special window? homepage

So in summary, it would be the way you have it, but the highlight color switches from pink to green to keep the traditional dat colorscheme alive, but we keep the cool pink for the terminal. I think i would try that for now and once we have it all implemented we can still play around with schemes or rather allow the "theme picker" to not just be an option between dark and light theme, but also custom to enable people to set their favorite colors as some sort of gimmick :-)

Also:

=> so maybe we can show the timeline first and the projects after that? :-)

next: projects The projects section looks perfect, but one thing i worry about is that conceptually it seems special. Showing only 6 entries seems quite a good idea, potentially even only 3 :-)

One thing though: It is an isolated window bar and floating project cards. visually they are grouped so they clearly belong together, but a retro operating system would probably realize this by creating some sort of project/business card viewer program that you could start and it would enable scrolling too. Also, the window bar has the "show more" region, which makes sense, but again, feels inconsistent in terms of window bars as a component, unless we say generally the operating system desktop we simulate here allows "actions" in the window bar. An alternative would be to place actions in the bottom of a window, just like in the image above, where there is an action bar at the bottom with the buttons

So if we wrap the cards in a window, then the window inside probably needs a slightly different background pattern and we need to shrink the project cards slightly, by one or two "grid slot sizes" to make the padding work ...oh and it might need space for the scrollbar too. Basically if we don't do that, the entire thing starts to feel more like a "widget", but that is a very modern concept compared to retro UIs. We could make another "preview program" though, so basically a second program that shows the projects or the timeline entries slightly differently and with less items, that would be ok, but i wouldn't break the metaphor of desktop programs to open data. A user can technically always double click a window bar to put a window in full screen and then that window shows whatever custom stuff the program inside that window enables.

finally: goo change with the footer. program probably should be an "html program" or something like that, because it can show custom layout and include buttons :-) So the footer icon in the window bar should not be a text file, but represent a html5 icon or some sort of html viewer program icon. footer

Mehrabbruno commented 1 year ago

tasks 2023.04.22


worklog

worklog 138


feedback


proposals

serapath commented 1 year ago

feedback 2023.04.22

grid size

+1 for the 30px * 30px grid. Seeing the navigation bar, i see that the text is sitting in between the grid lines, see: navbar

The word TIMELINE has 8 letters, which technically would require 8 slots and if we want at least one slot padding before and after the word, it would need 10 slots. We also need maybe at least 1 slot padding above and below the font, so that would make it at least 3 slots high, which would require a 3x10 grid. If we choose a 10px * 10px grid, it leaves us with height: 30px; width: 100px; for the TIMELINE button for example.

We can also double the grid to 20px * 20px, because on a large screen a height: 60px; width: 200px; is still totally fine.

We can also leave it at 10px * 10px but still use a height: 60px; width: 200px; but make the letters use more than a single grid slot, to accommodate for different font sizes elsewhere.

window bar

apart from maybe allowing action items in the window bar in general, maybe we should still keep the X to be able to close those windows, but i can see a bit of empty space between the window bar lines pattern and the "View More" action, which probably is enough space for an X, but that should be positioned as usual at the end, so probably the "View More" should touch the lines and then be followed by the X.

One more thing though, double clicking the window bar makes it full screen minimize/maximize, pressing the X can close it, but we then also need a way of re-opening it if needed :-) window bar

order

You say the order doesn't matter so much, but i have to say i didn't even notice at first where timeline ends and projects start. Also, the timeline (or latest news) is most important, so i think it should be above "about us", but projects can stay where it is is my take.

Mehrabbruno commented 1 year ago

tasks 2023.05.09


worklog

worklog 140 worklog 141


feedback


proposals

serapath commented 1 year ago

feedback 2013.05.10

Some things have been missed from previous feedback, e.g.:

  1. (see above) order on home page (timeline before "about us")
  2. (see above) window bar on e.g. home page windows
  3. (see above) grid size to include or deal with font sizes, one grid slot per letter

Which means kinda all feedback above was somehow ignored? :thinking:

@2.

Window bar of a standard program window, like any other "program window", which it's generic features, such as "closable" (x) and a way to open it again later on,etc... (see above - old comment - for details)

So the idea for implementation later on is to make every window an actual application. Based on it's content we will decide or need to choose what kind of "application" it represents, so for example "learn about us" would maybe be a PDF and we open it in a PDF reader (so we have to adjust the icon in the upper left window corner to represent a pdf reader application) and hence it can be closed like any other window. That is the goal, because the concept for the website is a retro desktop. Desktop have application windows, but what we have on the home page at the moment, looks a bit like an application window, but it's not, so what is it then?

app window

To your question: The purpose is to allow users to customize their experience of the website, maybe even remember it when they return, unless they maybe "restart" the page to reset it to initial. Of course if they close it they might want to get things back into the original default state too, so as soon as they start customizing things, we could update the url with a param e.g. https://dat-ecosystem.org/?config=user or something like that and if they open the page without that param, it will show again the original default. Maybe we offer a reset button, but maybe not initially.

Another purpose is, that the footer, header or "about" section or e.g. 3D visualiation on project pages, they all take some screen space ...so maybe a user wants to get rid of them to have more space for the remaining windows, e.g. more space for the scrollable list of projects, including more space for opening the terminal. It gives a better impression of an actual retro desktop.

For example, i perceive the main menu bard e.g. home/timeline/etc... more as desktops you can switch between, each "desktop" having a name or label.

Otherwise, even an application could be like a "virtual machine" to actually open an application inside that application, but we don't have to go that far just yet :P

@3.

regarding "grid size", let's try to find good free pixel mono fonts and choose a smallest one and model the grid after that letter size and a few larger font sizes to be multiples of that smallest one so they also fit into the grid, regarding of how text line breaks.

If that works out, we can keep the idea, if no matter what we try this wont work, even when fiddeling with hard coded css params for line height and letter spacing and font kerning, etc... then ok, let's skip this feature, but if it is possible, i think it would be phenomenal. A very subtle visual feature that really delivers retro feel, but also rarely seen and otherwise hard to pull off.

Mehrabbruno commented 1 year ago

tasks 2023.05.15


worklog

worklog 142


feedback


proposals

serapath commented 1 year ago

feedback 2023.05.15

Sure please log your time.

Ok, i watched the entire video. We have the page. we have a placeholder for dat garden. let's go through the feedback below. most of this is relevant for when we implement, which is what we will start now.

Anyway, This feedback is again a bit longer. I agree with many of the points you made. So let's try to find the best forward :-)

the long term purpose of the page

to get user retention and users coming back to the page.

  1. it is where they can learn about dat-ecosystem and all content
  2. it is where thye can check dat ecosystem news from time to time (subscribe/notifications)
  3. it is where they can explore "THE DAT" visualization which changes over time
    • this will be MORE frequently updated than the "projects listing"
  4. it will be where they can use the terminal or other means to add "more software"
    • all dat ecosystem projects are supposed to make their apps available here
    • to open them in more windows and tabs, just like the programs we now prototype
  5. it will be where people join the "dat ecosystem p2p garden program"
    • to advance they will hopefully come back.
  6. it will be where consortium members will draft and announce proposals and vote on them
    • people can learn about those new decisions in the news but also by checking the info page
  7. it will be where one day soon people can edit/develop/publish new p2p apps

This page is meant to become alive. If the page becomes good enough, a user might just open the page and put it into "full screen mode" and then use it with all it's apps instead of using their actualy macos or windows or linux desktop. If we achieve that, we win. It's a long way to get there.

So another purpose of the page is to be customizable. Which programs, how are they arranged, maybe a user even decides to change the entire theme (not just light/dark mode) but much more fundamental. They can always do it through the terminal i guess, but at some point they could install a program that helps with switching the theme.

On the other hand, anything we might close or remove should always be able to be opened again. At least one command in the terminal should probably be about "reset system" to put everything back to how it was before a user customized everything (but without deleting any user data) ...we are currently working on a "user data vault" standard to store all of the users data and we will eventually integrate that into the dat-ecosystem page as well.

the idea is to integrate dat technology into the page once ready, which means ppl will be able to create an account by generating a keypair or putting in their keyphrase and then they can use the terminal or later a software manager app (appstore...) to install more programs over the p2p network. they can customize their theme and reareange their windows and start working.

a fully fledged developer environment to actually work is the long term goal, so at some point, some ppl might visit the website (at least me), turn it full screen, and stsrt working ...it would be my daily driver.

we would integrate p2p cabal chat and migrate away from discord. we would integrate datdot and create the task messenger to automate our github based workflows where david already started the wireframing and then migrate away from github. we would build custom editors and migrate away from vscode. we upgrade the terminal and migrate away from traditional terminals. having no need to stay anywhere else than in the browser. ppl can then fork the dat-ecosystem page and make their own versions. we will probably do that with datdot.org

So much about "long term purpose/perspective" :-)


about our retro website concept

  1. it has a custom navbar
  2. it has one or more programs open (+we need a way to close/open additional ones)
  3. we can "PIN" programs (e.g. right-click browser tabs to pin adds them as small icon to the front, just like our "info")
  4. we have at least the following programs at the moment:
    • desktop program (used by "info")
    • landing page program (used by home, projects, growth program, timeline)
    • 3D "THE DAT" Visualizer program (embeded in landing page that opens the projects file)
    • projects cards program (embedded in a projects landing page program instance)
    • footer page (embedded in all landing page program instances)
    • timeline program (embedded in timeline landing program instance)
    • markdown file viewer (used on "info" desktop program instance)
    • folder viewer (used on "info" desktop program instance)

We can work on this concept to refine it. It should be flexible/powerful It should be simple

For Example:

  1. if a navbar item is a "landing page program" (it is hard coded/static)
  2. if a navbar item is a simple "desktop program" that's ok too
  3. if a navbar item is a complex "desktop program" maybe it can have a launcher feature
    • to add additional program icons to the desktop to open them
  4. if a "landing page program" is just another desktop
    • maybe it can have icons in the background to re-open closed programs
    • maybe it can have a launcher bar or icon to dropdown and show all programs to launch

Also you might just double click a window bar to put a program temporarily into full screen


regarding timeline program on timeline tab

We are building a website, but at the same time the long term purpose is to make it customizable and scriptable for users and developers, thus everything has to be something.

If the "timeline program" has no "window bar" on top, then what is it? So you already mention in your video for consistency there should be one. great. Now regarding being able to "close" that window - there is no direct purpose.

The purpose, as described in the beginning of my feedback would be, to allow a user to start making the page "theirs" and customize it the way they want and the page to remember those preferences. That's the only purpose of being able to close the program.

But maybe for now we can also skip the close button and think of all navbar tabs as "programs" (maybe desktop), but as in the timeline and most navbar tabs, they might be just programs ...presentational programs, which look like a landing page and just "hard code" some programs in a specific way and the layout has them one after another. Maybe that's good enough. Otherwise, if the timline program on the timeline tab is closable, there should be either an icon in the background or some other way of launching it again.

Maybe: when a user clicks on a navbar tab, a launcher menu expands, but when a user clicks elsewhere, the launcher menu collapses again. Maybe that's how we could always launch apps again.

Would also be cool to have a navbar tab, when selected, show a "window bar" for the entire navbar tab program and be able to close it, but it also means again, there should be a + or some way of re-opening it too. That would go well with the idea of every navbar tab representing a program (a single app program) (or even an entire desktop as a program - see info as a "pinned tab") ...like right clicking browser tabs can pin them too.


regarding app vs desktop metaphor

  1. the home page can be seen as an application.
  2. but the home page could be seen as a desktop too

ppl would not expect the info and the home page to be different. info has multiple sub windows, so more like a desktop, but home somehow, even though it has a background and multiple boxes that look pretty much like windows is supposed to be an application. i find that confusing


regarding font letter sizes slots

=> i was talking conceptually, but we can totally use the power of css to achieve that effect in a more efficient way.

maybe ...lets try based on the best mono font we can find, whats the smallest font size that is still readable and that is what we use for our grid size.

I do agree with you on the example of padding between cards. let's not make it too small. Let's use the smallest version that you still find acceptable in the sense that users can read and distringuish cards pleasantly. If that is the huge gap we currently have, then thats ok too. if it can be a bit smaller or more dense, that's cool too. So if you think 30px are necessary, then let's do it like that. if 25 or 20 works as well, lets go there, but either way, we still can make the slot size the smallest still readable font (e.g. something you would use for some fine print somewhere) and then make the gap or anything else multiples of that.

Maybe we can try with 10x10 (even though i found pixel fonts that work on 5px size. i can read them. I agree though that 5px is too small for retro system i think.

let's just find a good mono spaced free pixel font

also if the screen size is not perfect mutiples, it isnt problematic, because we anyway habe still the browser chrome, the border around the whole visible window when it isnt full screen,which on top includes also the addressbar and then it also depends to what size a user resized a window. you never know

CHALLENGE: Let's fit everything into a grid. It's a bit of an implementation challenge. If we take care of every element in the page and the width/height, we can use javascript to generate the css at runtime, so there is plenty of power do whatever is needed once we know how to approach it :-)

That said - having a card and arranging anything within that card in a grid works. All we need to ensure is that cards itself are starting/ending on the imaginary slot sized grid. If nothing else we can probably use (abuse?) the css grid layout and just make our grid really fine grained and then stretch specific elements over enough slots.

We might even use the power of javascript to generate our grid template areas :-) e.g. grid-template-columns: repeat(${window_width / 10}, 10px); e.g.grid-template-rows: repeat(${window_height / 10}, 10px);

If we need padding inside cards we should probably use multiples of the grid slot size. Also, we should probably use css properties/variables to calculate the slot size dynamically, so font size and other sizes get calculated based on the current height and widht of the window, so we don't have to use 10px, maybe it will be 8px, because if a user resizes their window and it's not full screen, there is no guarantee that the window height or width will be multiples of the grid size. We will find a way for sure. javascript is powerful to generate the css if needed, but maybe css alone can do it. All we need is to find a good strategy.


regardint p2p garden coming soon

maybe the banner on the garden page can look like a box cover for a game or a splash screen where you have the option to start the game, but not yet, because coming soon


regarding website concept

It is true, that the info icon looks a bit different from the other tabs, but e.g. you can select a browser tab and select pin and that will make it a small icon at the beginning of the browser tabs bar.

My impression was, the menu bar functions as switching named desktops The "desktop icons" can open some program windows, but maybe you are right. In that case, home, projects, growht program and timeline would be just "programs".

But all the windows on the info desktop (e.g. important documents, members, tools, mission) should then be listed in the navbar as well while open and they are not.

So let the "desktop" be just another program and in our case, this particular desktop program has icons files/folders in the background and 4 open windows (important documents, members, mission, tools), but has no extra navbar to show those open window. I think that is ok.

also:

This would allow us to have some navbar tabs (pinned like "info" or not) be desktops. This seem to be a very powerful and flexible metaphor to me, see:

To me it makes sense to create potentially many named desktops, for different contexts and if we theoretically had multiple physical screens, maybe those could even be spread across multiple screens isntead :-) Overall, the option with multiple desktops gives us more flexibility for the future.

consortium page

Also, consider the scrollbar on the projects component. Only 3 lines of projects can be shown at the moment before a user needs to scroll. But being able to expand or rather close the footer or "THE DAT" at least temporarily would give the user probably 5-6 or even more rows of projects visible at once, so they need to scroll less. projects page


regarding info windows

For now i would just keep windows like important docs, members, mission, tools simple, so a close button (you can re-open using the icons on the desktop background and double clicking the window bar will maximize and double clicking again with unminimize and maybe you can resize by draging it's corners or borders. I think that should be good enough and keeps things simple


sub programs in projects open/close

So we have at least two programs on the projects page.

  1. THE DAT visualization
  2. the searchable/scrollable/filterable list of projects

We have arbitrarily embedded the them in this hard coded fixed manner into the projects tab program, but users might even want to open them side by side.

projects

So maybe we should consider to:

  1. have an option to open/close navbar items or add more (e.g. a second "desktop")
  2. have an option to add/remove icons from the desktop (e.g. "info")

I would say, at the moment we have a "landing page program", which is used by home, projects, growth program and timeline and it allows to arrange arbitrary programs (e.g. image viewer, 3D "The Dat" visualizer, project cards program, timeline program, footer page) into an arbitrary order and size and save that as a file.

At the moment we opened 3 named instances of the "landing page program", which each has the "footer page" in the bottom and other programs above that.

Mehrabbruno commented 1 year ago

tasks 2023.05.16


worklog

worklog-143


feedback


proposals

serapath commented 1 year ago

feedback 2023.05.16 We need a separate icon for every program we use and they should be unique. Every program is an "app".

Basically, for every program, can you check if we re-use it or if it is new and use an icon that represents the program? (also we have to give each program a name) Every window with a window bar represents a program/app.

e.g. needs a pixel version of a simple pdf icon


Name changes (snake case) and "close icon" is great. Still, this also means we need the "launcher" to open a program again :-)

Mehrabbruno commented 5 months ago

tasks 2024.01.28


worklog

worklog-194


feedback


proposals