Create UI Layout for Interactive Explore Page

[timothyfcook]

This is the hierarchical tree we discussed. I can help with the design, but the implementation might be too advanced for me since it's so dynamic.

After designing the Segment layout, I'll try and design elements of this. I'll defer to you on the best way to create this accordion-like interface. Somehow I doubt the semantic-ui option won't quite cut it: http://semantic-ui.com/modules/accordion.html ...but I could experiment.

Here's a rough drawing for inspiration:

[timothyfcook]

The rest of the Explore page, for now, will just be 2 rows of those content snippets: one for local opportunities, one for digital resources.

[MatthewVita]

Yeah, this component will have to be built from scratch via Knockoutjs and jQuery.

Thanks for the sketch... I'll start planning this out (both in the technical sense and in regards to my schedule).

Thanks.

[MatthewVita]

So here's what I'm thinking:

Alpha's Explore feature will be implemented like this with Knockout/jQuery (blue vertices are active)

I'll spend time studying HTML5 Canvas/webkit SVG and will try to recruit some devs that already know it to implement this more difficult UI (vertices now have associated edges):

...once the project gains momentum, a more pure tree model UI can be implemented via HTML5 Canvas/webkit SVG:

Thoughts?

[timothyfcook]

Looks like a good start! Agreed. The more complex network UI will be fun to explore later on, but this simple tree will serve us well to start. I'll make a quick image to respond to yours.

[timothyfcook]

Here's another drawing. Slight change: if possible, the chosen sub-topic should move to the center and it's siblings should shrink away. Is this easy to implement? If not, we can look to do it later on.

[MatthewVita]

run the following to see a proof of concept:

$ npm install -g local-web-server bower
$ wget https://github.com/MatthewVita/Website/raw/master/tmp/Entelekia-Tree.tar.gz
$ tar xvf *Tree.tar.gz
$ cd *Tree
$ bower install
$ ws

localhost:8000 and go through pets > dogs > *

[MatthewVita]

better yet, I just implemented an improved version here: https://github.com/MatthewVita/Entelekia-Tree

1. $ npm install -g bower local-web-server
2. $ git clone https://github.com/MatthewVita/Entelekia-Tree.git && cd Entelekia-Tree
3. $ bower install && ws
4. open browser up localhost:8000 and go through pets > dogs > *

...now I'm going to research how to add edges via canvas when I have some time. I'll note to add the 'selected node' centering functionality in a bit. That will go in here https://github.com/MatthewVita/Entelekia-Tree/blob/master/TreeViewModel.js#L117

[timothyfcook]

Nice! Was just about to run the other one. Checking it out now...

On Jan 19, 2015, at 12:06 PM, Matthew Vita notifications@github.com wrote:

better yet, I just implemented an improved version here: https://github.com/MatthewVita/Entelekia-Tree

$ npm install -g bower local-web-server $ git clone https://github.com/MatthewVita/Entelekia-Tree.git && cd Entelekia-Tree $ bower install && ws open browser up localhost:8000 ...now I'm going to research how to add edges via canvas when I have some time. I'll note to add the 'selected node' centering functionality in a bit. That will go in here https://github.com/MatthewVita/Entelekia-Tree/blob/master/TreeViewModel.js#L117

— Reply to this email directly or view it on GitHub.

[timothyfcook]

Works great! Instead of a pop-up though I think the list of resources/opportunities should be on the same screen

[timothyfcook]

Will throw together a mockup real quick right now.

[timothyfcook]

The lightbox pop-up could be a useful when the user clicks on the resource they are interested in. We could do that instead of a separate page.

[MatthewVita]

this is a tricky one because the list you're mentioning could get out of the user's view

[MatthewVita]

but I don't know UX stuff. /2 cents

[timothyfcook]

Especially if they have many layers of the tree open.... yeah. That's why I was thinking the levels of the tree displayed should be limited and the upper layers (anything more than 3) are hidden as you drill deeper.

It's important for the interaction that, when browsing, you can see what content is available for each Topic. That helps you decide if you want to drill deeper.

[MatthewVita]

Oh, I didn't see the 'limit of 3 rows' part. Are you thinking of some sort of view panel below the tree?

[timothyfcook]

Exactly. So the user can browse and view options at the same time.

Mocking it up now!

On Jan 19, 2015, at 12:26 PM, Matthew Vita notifications@github.com wrote:

Oh, I didn't see the 'limit of 3 rows' part. Are you thinking of some sort of view panel below the tree?

— Reply to this email directly or view it on GitHub.

[timothyfcook]

Okay, here's a rough/uglified idea of what I was thinking...

Part of the hope long-term is that users would be able to UP and DOWN vote (+1 / -1) the resources and that all of the resources for each topic would be ranked based on their quality and how well they address that subject.

[timothyfcook]

I can work on mocking up those snippets, per #12, but for now you could just have them be lists of text items and we can implement the more content-rich snippets later.

[timothyfcook]

Re-centering on the chosen Topic would be cool also: https://cloud.githubusercontent.com/assets/1823300/5794059/9ba72816-9f2b-11e4-93e4-7693a3953a8d.png

Thanks for putting this together. Exciting to see some real functionality!

[MatthewVita]

Very nice. Go crazy with semantic-ui with this. We can add upvotes now (in alpha) if you want... it will use dummy data until we add in the backend.

[timothyfcook]

Let's do it! The voting mechanism is, I think, one of the most valuable parts of the tool long-term. Curating the BEST learning content on every subject is of serious value.

[MatthewVita]

would it be auth'ed or can anyone upvote/downvote?

[timothyfcook]

Important question. It could be anyone, but limited to 1 vote per resource per IP address. Or it could be auth'ed. Long term, auth'ed is the best option (so we can get data on what people are ranking and use that to verify their interest/expertise in certain topics), but I could see allowing un-auth'ed for the M.V.P. since we won't have auth setup yet probably?

I'll move this to a new issue.