Create an interactive skills map for School of Webcraft

RESOLVED FIXED

Status

RESOLVED FIXED
8 years ago
4 years ago

People

(Reporter: mthompson2000, Assigned: ned)

Tracking

Details

Attachments

(1 attachment)

Comment hidden (empty)
(Reporter)

Comment 1

8 years ago
We want to create an interactive version of this draft School of Webcraft skills map:
https://wiki.mozilla.org/File:Mapofopenweb.png

Using an information visualization tool called the Jit.
http://thejit.org/
(Reporter)

Comment 2

8 years ago
@ Gopal: Can you post an update here to let us know 
1) what you've been able to do so far. 
2) what style you're planning to use. (e.g., "HyperTree" vs. Forced Directed Static", etc.)
http://thejit.org/demos/
3) when you think you can have an early iteration ready to show people for early feedback?
(Reporter)

Comment 3

8 years ago
@ Pippa: I think they "Hyper Tree" style might have more "wow factor" than the 
"Force Directed Static Graph" Gopal has been using so far. One moves, whereas the other is quite static.

* Gopal: let us know why you initially chose the one you did? And if it's possible to switch over? Let us know your recommendations on the best style to use.

Comment 4

8 years ago
@ Matt: Pippa had asked me to try either "Hyper Tree" or "Forced Directed" Graph. I started off with Forced Directed to see how it works and this is the url of what I've done so far http://www.indofolio.com/graph/index.html

I agree that "Hyper Tree" is more cool and interactive. Though "Force Directed" looks good now, the lines might overlap and confuse as we increase the nodes.

I'll review the code and see if its possible to switch the styles.
(Reporter)

Updated

8 years ago
Assignee: nobody → productivedreams
(Reporter)

Comment 5

8 years ago
@ Gopal. Great! I'd recommend switching to "Hyper Tree" if possible.
* Part of the goal here is to great a "wow" effect that excites people to help flesh out the skills map. 
* Also agree that Hyper tree will be less confusing as we add content. Because it moves and shifts focus -- whereas the "Forced Directed" is static. And therefore a bit overwhelming.

Comment 6

8 years ago
Update: I've switched to "Hyper Tree" and this what I've done so far http://www.indofolio.com/hypertree/index.html

I'm continuing adding nodes.

Thank you,

Comment 7

8 years ago
Hi Matt, the graph is done, please have a look at http://www.indofolio.com/hypertree/index.html
(Reporter)

Comment 8

8 years ago
@ Gopal: this looks like a great start!

@ Pippa & John: what do you think?

Question: Is there a way to avoid the overlapping text that's occurring in some places?
(Reporter)

Comment 9

8 years ago
@ David: adding you in case you have any feedback based on the work you did with the Jit for the Mozilla Universe project.
(Reporter)

Comment 10

8 years ago
@ Gopal: Let's use a "School of Webcraft" color pallette for this
* You can pull colors from the School of Webcraft crest, here:
http://openmatt.files.wordpress.com/2010/09/p2pu-webcraft-fall-semester-now-in-session.jpg
(Reporter)

Comment 11

8 years ago
@ Gopal:

1) Can we increase text size? In some cases, it's a little hard to read

2) Is it possible to make some of the individual items links?
e.g., so that when you click on the text for a skill like "HTML5," it takes you to the School of Webcraft course page for HTML5?

Comment 12

8 years ago
Cool to see this.  If you have specific questions about how we used the HyperTree for the Community Map, I'm happy to answer them.  

In general, we found that we started running in to issues after we got to a certain number of nodes.  We don't have a perfect solution for this, but you can look at the style sheet we have to see what we've done to address some of these issues.

http://viewvc.svn.mozilla.org/vc/projects/mozilla.org/trunk/style/universe.css?view=log

There's also some open bugs for the map that may be relevant for what you're doing that we could try to sort out together.

https://bugzilla.mozilla.org/show_bug.cgi?id=588631
(Assignee)

Comment 13

8 years ago
Wow! this is really cool.

A few comments however that could improve things slightly:

1) I find the text hard to read - could it be spaced further from the node point so that it doesn't overlap? Could it be bigger? Could the contrast be increased? maybe contain the text in a pill-box with a flat, contrasting background behind the text?

2) Could the selected node be indicated more clearly? I see that the red dot is slightly bigger - maybe this could be exaggerated and the font-size could be increased as well? It appears that we are showing three levels of text at a time - could we also change the colours of the nodes to indicate their level?

Just my two cents.

Comment 14

8 years ago
Sweet. 

adding in links would be awesome, as would making the colours more in keeping with the School of Webcraft branding. Using a pillbox shape to define labels would be good.

Also - before we rush ahead - Is it possible to have an expanded version of the chart that's suitable to print?  If that's not going to be possible I propose that we use the OmniGraffle file Philipp Schmidt used to develop a base Poster for use at the Drumbeat Festival.

https://wiki.mozilla.org/File:Mapofopenweb.png
(Reporter)

Comment 15

8 years ago
@ Pippa:
There's a separate bug for the poster here:
https://bugzilla.mozilla.org/show_bug.cgi?id=602877

Recommend keeping separate.
Summary: Create an interactive skills map and poster for School of Webcraft → Create an interactive skills map for School of Webcraft
(Reporter)

Comment 16

8 years ago
@ Gopal: Summarizing feedback so far: 

* Legibility. 
** Increase font size.
** Try to avoid overlapping text. Can you add line breaks? Or ask us to shorten copy in places where it's too long.
** Contrast. Try increasing contrast to increase legibility. Or could use dark text on white background.
** Pill boxes. Try containing the text in a pill-box with a flat, contrasting
background behind the text.


* Colors.
** Use School of Webcraft color palette.
** Change background color to white.

* Links
** If possible, link-ify individual items in map to lead to course pages

* Usability
** Try to indicate selected node more clearly. 
*** e.g., red dot is slightly bigger - maybe this could be exaggerated and font-size increased

Make sense? Let's roll as much of these tweaks as possible into "version 0.2" and post here, along with embed code so we can blog about it.
(Reporter)

Comment 17

8 years ago
@ Gopal: we just discussed this in our School of Webcraft call -- we're ready to share for feedback. So can you please

a) make as many tweaks as possible from comment 16. and just skip the ones that are hard.

b) provide the embed code here so that we can include the interactive map in a blog post.

Thanks for the great work on this! :)

Comment 18

8 years ago
Thanks Matt,

I'll post an update here soon.

Comment 19

8 years ago
@Matt Please have a look at the updated version here: http://www.indofolio.com/graph/index.html

To embed this map in a blog post, you would need to upload this to the mozilla server and then display the html file in an iframe. If you are unsure about this please let me know, so that I can do it for you.

Thanks

Comment 20

8 years ago
For reference, we've been playing around with an embeddable version of the Community Map and you can find out more about that in bug 593156.
(Reporter)

Comment 21

8 years ago
@ Paul:
(Reporter)

Comment 22

8 years ago
@ Paul re: comment 19 & 20

* Do you have a recommendation on best way to upload to mozilla server?
Where do we want this to show up, specifically? I'm not thrilled at the prospect of using iframes.
(Reporter)

Comment 24

8 years ago
@ Paul: 

* At this point, I just want to be able to embed the map in a WordPress blog post next week

* Would also like to embed it on:
** a page on drumbeat.org
** a P2PU.org page

Comment 25

8 years ago
@Matt If there is a way to make the map embeddable that's the way to go (iframe should be considered only if there is no other way).  
This map http://www.mozilla.org/community/#bugzilla looks like an embedded one, but I am not sure who did that or how it was made embeddable.
@David Can you please shed some light on this?

Comment 26

8 years ago
FuzzyFox took the Community Map and made an embeddable widget out of it.  You can see it in action by clicking on the dino head in the footer of

http://store.mozilla.org/diy/

The bug I referenced in comment #20 has some more information.  You're also welcome to follow up with FuzzyFox directly with any questions.
(Reporter)

Comment 27

8 years ago
@ Paul Osman:

* want to touch base on this -- would like to embed the map in a Drumbeat.org page or blog post next week if possible. To get feedback and finalize for Festival.

* Is uploading it to the Drumbeat.org site something Ned could help with?
(Assignee)

Comment 28

8 years ago
(In reply to comment #27)
> * Is uploading it to the Drumbeat.org site something Ned could help with?

I certainly could help upload some js etc. to the server.
We can embed the map in a Drumbeat.org page using the embed code David pointed us to, in bug 593156. Gopal or Ned, can you take a look at that Javascript and tell us what it would require to get a Drumbeat.org page set up with the widget? 

Blog posts are another story. I'd like to hold off on any major decisions about that, and use a page on drumbeat.org as a test-case for using the Javascript widget. Serving Javascript widgets in blog posts that get syndicated in a variety of places is more complicated of a problem.
(Assignee)

Comment 30

8 years ago
Hi Paul,

briefly; any thoughts on where the files should go? 

Would you be okay with throwing the stuff in the appropriate folders under the drumbeat theme? eg:

sites/all/themes/drumbeat/js
sites/all/themes/drumbeat/css
sites/all/themes/drumbeat/images
(In reply to comment #30)
> Hi Paul,
> 
> briefly; any thoughts on where the files should go? 
> 
> Would you be okay with throwing the stuff in the appropriate folders under the
> drumbeat theme? eg:
> 
> sites/all/themes/drumbeat/js
> sites/all/themes/drumbeat/css
> sites/all/themes/drumbeat/images

Seems sensible. They won't get minimized unless they're included in a module's *.info file, but I don't think we need to worry about that. If we do, you can always throw them in drumbeat_custom.
(Assignee)

Comment 32

8 years ago
good point - Ill be sure to be cautious of that.
(Reporter)

Comment 33

8 years ago
@ Ned: thanks for pushing ahead with this. let me know when this is done? have a blog post ready to post on it once it's ready.
(Assignee)

Comment 34

8 years ago
Matt- did Gopel finish making the embedable version - I am just reviewing the bug and it looks like there is no embedable version as of now. 

I am going to need the embedable version as per comment #20 to proceed. 

If I need to take that on, I can, but it will have to go into "priority sequence" with the Festival and Universal Subs updates that are on my plate.
(Assignee)

Comment 35

8 years ago
Simply put; I am going to need deployable version of this code from Gopal.

In the mean time, I have created a stub page at:

https://www.drumbeat.org/p2pu-webcraft/skillsmap

If Gopal has edit access to Drupal he can add the widget himself there (though I believe I will have to check the actaull js/css/images in to the production repo).
(Reporter)

Comment 36

8 years ago
@ Gopal: can you respond to comments 34 and 35?

Comment 37

8 years ago
@ Matt/Ned I have reviewed the code but couldn't get a clear idea on how it was made embeddable.
@Ned Will you be able to take care of it? If not, I think it would be better to contact William (who did the embeddable code for mozilla store) https://bugzilla.mozilla.org/show_bug.cgi?id=593156
(Assignee)

Comment 38

8 years ago
Gopal; 

just to move things forward ... I guess I can finish off the widget at some point next week, but I will need the code in a deliverable form. Could you please attatch a zip or something of a working web page with the work you have done?

Also; it may help me move forward if you let me know what trouble you ran into in widget-izing the code.

Thanks!

Ned

Comment 39

8 years ago
Created attachment 485669 [details]
Interactive Skills Map

@Ned This has all the files you would need. Please let me know if you need anything else.

Thanks
(Reporter)

Comment 40

8 years ago
@ Ned: looks like the ball is now in your court so have assigned to you
Assignee: productivedreams → ned
(Reporter)

Comment 41

8 years ago
@ Ned: This needs to be live and operational for P2PU Webcraft sessions at Festival. Let us know if it can be done in time?
(Assignee)

Comment 42

8 years ago
Hi Matt,

I was actually *just* thinking about this -- I have A LOT on my plate leading up to the festival. I may be able to squeeze it in, but if there was anyone else that could complete the development work it would be so much better.

I am always available to deploy of course.
(Reporter)

Comment 43

8 years ago
Not sure what you mean by "development work" -- I thought it was all deployment at this point?
(Assignee)

Comment 44

8 years ago
as in the part that isn't deployment....
(Assignee)

Comment 45

8 years ago
https://www.drumbeat.org/p2pu-webcraft/skillsmap

this is up now, I had to make a number of modifications.
OS: Mac OS X → Windows 7
(Assignee)

Updated

8 years ago
Status: NEW → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → FIXED
Product: Websites → Websites Graveyard
You need to log in before you can comment on or make changes to this bug.