Closed Bug 602583 Opened 14 years ago Closed 14 years ago

Create an interactive skills map for School of Webcraft

Categories

(Websites Graveyard :: drumbeat.org, defect)

Product:
Websites Graveyard
Component:
drumbeat.org
Platform:
x86
Windows 7
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: mthompson2000, Assigned: ned)

Details

Attachments

(1 file)

Interactive Skills Map
100.34 KB, application/zip
Details 
      No description provided.
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/
@ 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?
@ 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.
@ 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.
Assignee: nobody → productivedreams
@ 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.
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,
Hi Matt, the graph is done, please have a look at http://www.indofolio.com/hypertree/index.html
@ 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?
@ David: adding you in case you have any feedback based on the work you did with the Jit for the Mozilla Universe project.
@ 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
@ 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?
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
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.
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
@ 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
@ 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.
@ 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! :)
Thanks Matt,

I'll post an update here soon.
@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
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.
@ Paul:
@ 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.
@ 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
@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?
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.
@ 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?
(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.
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.
good point - Ill be sure to be cautious of that.
@ 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.
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.
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).
@ Gopal: can you respond to comments 34 and 35?
@ 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
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
Attached file Interactive Skills Map — 
@Ned This has all the files you would need. Please let me know if you need anything else.

Thanks
@ Ned: looks like the ball is now in your court so have assigned to you
Assignee: productivedreams → ned
@ Ned: This needs to be live and operational for P2PU Webcraft sessions at Festival. Let us know if it can be done in time?
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.
Not sure what you mean by "development work" -- I thought it was all deployment at this point?
as in the part that isn't deployment....
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
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
Product: Websites → Websites Graveyard
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: