Closed Bug 730012 Opened 12 years ago Closed 12 years ago

[Collusion] Build Collusion Landing Page on mozilla.org for Gary for TED

Categories

(www.mozilla.org :: General, defect)

Product:
www.mozilla.org
Component:
General
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: christine.brodigan, Assigned: jlong)

References

(
URL
)

Details

Attachments

(2 files)

genericized node tree
25.70 KB, image/png
Details
node tree PSD
2.07 MB, application/octet-stream
Details 
Goal: launch landing page for collusion on mozilla.org
---
Deadline: must be live Monday evening, February 28 (being presented by Gary @ 8AM on Tuesday)
---
URL: mozilla.org/collusion
---
Development: Pull code from: https://github.com/rossbruniges/collusion

Ex: http://www.thecssdiv.co.uk/collusion/
---

Next steps:

James, stage code as is, then we'll do one round of design/content review with the team.
All, 

We're on very tight deadline, so I want to make sure we know who is responsible for what aspects, please add your name next to your role:

Responsible: that is the person who is owner of the problem/project
---

Accountable: that is the person to whom "R" is Accountable and is the authority who approves to sign off on work before it is effective

---
Supportive: that is a person who provides resources or plays a supporting role in implementation

---
Consulted: that is a person who provides information and/or expertise necessary to complete the project

---
Informed: that is a person who needs to be notified of results but need not necessarily be consulted

---
Also, I mentioned this in the email thread, but I think it would be good if a designer from the Creative team took a look at this before we implement.
Collusion is a Foundation project, so I'll need to sign off on final and make decisions re: changes.

John: a pass or two from someone on your team would be very much appreciated.
Assignee: jlong → steven
Ok, after discussing this with a few folks here's what we'd like to change about Ross' version of the page (http://www.thecssdiv.co.uk/collusion/):

- add subheadline below "Collusion". Ryan will be supplying this soon.
- replace the nodes image with a better one that's higher resolution and doesn't call out the logos of any particular organizations. Barry is working on this.
- add the text "Supported by the [Ford Foundation logo goes here]" above the "Want to hear more?" box. It's ok if the logo shrinks to fit that column width.
- bring all four below the fold paragraphs over to a single column on the left. So, that would leave us with all four text columns on the left, and the Ford Foundation reference and email signup box on the right.

Thanks all!!
Here are the revised Hed and Sub for the page:

Hed: Introducing Collusion 
Sub: Discover who's tracking you online
re: demo

On the demo pages that Ross mocked up, there are a few changes we should make:

- Remove "by @toolness" and add the following copy: "Collusion was created as a prototype by Atul Varma."
- remove the "about | site info" link from the top of each sidebar
- move the download button for the add-on down to the bottom of the sidebar and make it appear on each page of the demo.
- on the third page of the demo, at the end of the first paragraph, add "Watch Eli's TED talk on the Filter Bubble here [http://www.ted.com/talks/eli_pariser_beware_online_filter_bubbles.html]"
- remove the link to Eli's book on Amazon
- remove the last sentence of the last page "feel free to tweet @toolness..."
- check to make sure we're linking to the right github repo
Please more the credit re: Atul to the beginning of the last paragraph of the demo. Should have mentioned that before.
Heads up everybody.
Index.html was implemented in such a way that it provides both the demo page and the primary UI of the add-on.
The modifications to index.html that were done in order to create http://www.thecssdiv.co.uk/collusion/demo/ will work for the demo, but we don't want that styling on the primary add-on UI.
I need to separate the demo and the add-on UI into two separate files, both of which need to be hosted on the website; the demo file should have the restyling but the UI file should retain the black background.

When is code freeze?
I'm putting the add-on on AMO now, will provide the URL here once I've got it up.
Code freeze: 12noon PT, February 24, 2012.
OK.

After the code freeze, what will the process be like for updating the website in the future?

Since the add-on's UI is currently an HTML page that's part of the website, we'll have to update the website whenever we want to make UI changes to the add-on. If that's going to be difficult, then I will need to think about rewriting the addon to be self-contained and not have an external website dependency.
Jono,

For the immediate future, the process will be to file a bug product: websites component: mozilla.org

We have releases every Tuesday.

Later in April/May we hope to have Ross working directly on this page and a sub-site for the Foundation.
I will try to integrate this page into bedrock tomorrow after the code freeze.
A version of the add-on is now hosted on AMO. It's awaiting review, but users can already install it by going directly to the URL. The URL is:

https://addons.mozilla.org/en-US/firefox/addon/collusion/

I have some more work to do with the addon, but the URL will not change, so you can go ahead and use that link in the website.
Attached image genericized node tree — 
will add the psd with all layers next.  this has all the elements but I will leave it to the page designer to noodle things for the page context.  

two blue nodes are sites navigated to:
red nodes are tracking sites.  icons are generic "tracking" focused visuals as to not call out any specific companies.
Looks good, thanks Barry.
Attached file node tree PSD — 
source file for nodeTree.png
(In reply to Jono X from comment #8)
> Heads up everybody.
> Index.html was implemented in such a way that it provides both the demo page
> and the primary UI of the add-on.

I can help get the landing page tidied up and set up in bedrock. Should this wait until you separate out the demo? I can probably just grab the content (with the updates listed on the bug here) and implement in templates we've already got.

Will need more solid code for the Demo page though.
I just pushed some commits to the github separating the add-on UI from the demo page. The key files are:

collusion/data/ui/index.html = main add-on UI
collusion/website/demo.html = the demo

both of these are copies of the old website/index.html, with the demo-related stuff pulled out of one and the non-demo-related stuff pulled out of the other.
This leaves us with the problem that there are a bunch of support files (graphrunner.js, index.css, and trackers.json, not to mention the d3 and jquery libraries) that are needed by both the add-on UI and the demo.

These files are currently duplicated between the collusion/data/ui directory and the collusion/website directory, which is bad.

Will the website deployment contain a checkout of the whole collusion git repo? In that case we could have just the one copy of the files in collusion/data/ui, and demo.html can include them by referring to e.g. "../data/ui/graphrunner.js"  Does that work?

If you're not planning on using the whole collusion git repo for deployment then I guess the thing to do would be to take a snapshot of the relevant support files. Then changes to e.g. graphrunner.js in the add-on will change the way the graph works in the add-on but won't affect the demo on the website. I think that's probably OK, though.

Let me know your thoughts. CCing Atul on this bug since he may have some ideas.
I just pushed a demo.css file that applies some different styles to the graph when running on the demo page. The previous styles were meant for a dark background and didn't look good on the light background; demo.css makes bold links turn black instead of white and unfocused nodes get lighter instead of darker.

Some of the text of the demo no longer makes sense now that it is separated from the addon. I will make some needed changes to that.

I also notice that the graph in the demo is cropped to an arbitrary rectangle much smaller than my browser window; I think that was the case before, so it's not a new problem, but one of us should try to fix it.
Re my own comment 11: since I have separated the addon UI from the demo page, updates to the addon will NOT require updates to the website. We will be able to update the addon independently, through AMO.
(In reply to Ryan Merkley from comment #6)

Ryan, I've made the text changes you requested. I also updated the target of the "install" button to point at the addon on AMO instead of pointing at collusion.toolness.org.

Note that I've been making all these changes in github.com/toolness/collusion, so if you're using https://github.com/rossbruniges/collusion, you will need to pull the upstream changes from toolness' repo into rossbruniges' repo.
(In reply to Jono X from comment #23)
> (In reply to Ryan Merkley from comment #6)
> 
> Ryan, I've made the text changes you requested. I also updated the target of
> the "install" button to point at the addon on AMO instead of pointing at
> collusion.toolness.org.
> 
> Note that I've been making all these changes in
> github.com/toolness/collusion, so if you're using
> https://github.com/rossbruniges/collusion, you will need to pull the
> upstream changes from toolness' repo into rossbruniges' repo.

Pulled - thanks very much Jono
(In reply to John Slater from comment #4)
> Ok, after discussing this with a few folks here's what we'd like to change
> about Ross' version of the page (http://www.thecssdiv.co.uk/collusion/):
> 
> - add subheadline below "Collusion". Ryan will be supplying this soon.
> - replace the nodes image with a better one that's higher resolution and
> doesn't call out the logos of any particular organizations. Barry is working
> on this.
> - add the text "Supported by the [Ford Foundation logo goes here]" above the
> "Want to hear more?" box. It's ok if the logo shrinks to fit that column
> width.
> - bring all four below the fold paragraphs over to a single column on the
> left. So, that would leave us with all four text columns on the left, and
> the Ford Foundation reference and email signup box on the right.
> 
> Thanks all!!

I've made these changes to the landing page. Looks like John/Steve may have since picked it up but if not you can grab it from https://github.com/rossbruniges/collusion and give it a look over at http://www.thecssdiv.co.uk/collusion/
Ross: these changes look good. Thank you.
Jono: Thanks for making the text changes. A few small things that would be good to edit:

- moving the right margin of the demo (as you describe in comment 21)
- relocate the Ford Foundation logo to the bottom of the page (use the same format Ross used on the landing page with "supported by"
I've ported the landing page into Bedrock and have it running here: http://www-dev.allizom.org/b/en-US/collusion/

I'm having trouble getting the Demo page to work though. Our site structure requires some moving around of JS files, etc.

Ross, could you take a look at http://www-dev.allizom.org/b/en-US/collusion/demo/ and see if you can see anything obvious that's keeping the demo from working (I know the CSS isn't setup for the column yet, but that should break anything).

Source for the demo page lives here: https://github.com/mozilla/bedrock/blob/master/apps/collusion/templates/collusion/demo.html
(In reply to Steven Garrity from comment #27)
> I've ported the landing page into Bedrock and have it running here:
> http://www-dev.allizom.org/b/en-US/collusion/
> 
> I'm having trouble getting the Demo page to work though. Our site structure
> requires some moving around of JS files, etc.
> 
> Ross, could you take a look at
> http://www-dev.allizom.org/b/en-US/collusion/demo/ and see if you can see
> anything obvious that's keeping the demo from working (I know the CSS isn't
> setup for the column yet, but that should break anything).
> 
> Source for the demo page lives here:
> https://github.com/mozilla/bedrock/blob/master/apps/collusion/templates/
> collusion/demo.html

Heya Steven, 

Can't see anything obvious - wondering if it's a problem with the compressed code?

At the moment it's not making the initial step information visible - the code that does that is in demo.js here https://github.com/rossbruniges/collusion/blob/master/website/demo.js#L42

It looks like the JSON call is successful but might be worth chucking a few alerts around there?
Following Ford's review, there are a few additional copy edits to the landing page.

1) first paragraph
- Change "The Ford Foundation and Mozilla have teamed up" to "The Ford Foundation is supporting Mozilla"

2) third paragraph
- Change "Through our work with the Ford Foundation" to "With support from the Ford Foundation"
(In reply to Steven Garrity from comment #27)

> I'm having trouble getting the Demo page to work though. Our site structure
> requires some moving around of JS files, etc.

I just took a look at it. The two most likely possibilities I can see for why it's broken are:

1. I see that you've replaced all the collusion scripts with a single minified js file called /media/js/collusion-min.js?build=e128b3f. Maybe a script got left out or something broke during minification? The demo depends on:
d3.js, d3.geom.js, d3.layout.js, jquery.js (standard library files)
and also graphrunner.js, collusion-addon.js, and demo.js (collusion-specific).

2. jQuery.getJSON() could be failing to get the data from /media/js/collusion/trackers.json. The problem with jQuery.getJSON is that when something fails, it fails silently. I would recommend trying jQuery.ajax() with an error callback instead so you can see if it's failing to get (or to parse) that file.


The fact that I'm not seeing any error messages in the web console makes me think that #2 is a more likely problem.

I know the code freeze deadline is only 2 hours away so I will try my best to help debug this as fast as possible.
(In reply to Ross Bruniges from comment #28)

> At the moment it's not making the initial step information visible - the
> code that does that is in demo.js here
> https://github.com/rossbruniges/collusion/blob/master/website/demo.js#L42


Ah right, that reminds me: there's two jQuery.getJSON() calls -- the one in demo.html that tries to get trackers.json, and the one in demo.js that tries to get sample-tracking-info.json.  Either of them could be failing silently. I see you have trackers.json hosted at http://www-dev.allizom.org/media/js/collusion/trackers.json but I tried loading http://www-dev.allizom.org/media/js/collusion/sample-tracking-info.json and it gives me some weird stuff that looks like some GitHub- generated HTML and not a JSON file at all. Could that be it?
Hey all,

If possible, could we have the email signup post to https://donate.mozilla.org/page/s/collusion instead of https://donate.mozilla.org/page/s/sign-up-for-mozilla? The form fields should all map the same way, just posting to a different form.

Thanks!

ben
I've cleaned things up a bit more (thanks to Jono for the great help on IRC):

http://www-dev.allizom.org/b/en-US/collusion/demo/

Given the tight timeline, we've also removed the email sign-up form and replaced it with a link to https://donate.mozilla.org/page/s/collusion
Dunno if the email removal was spurred by my request, but definitely prefer to keep it as it was vs. removing entirely...had thought it'd be a pretty tiny change.
We should not remove the e-mail signup. Forcing a click-through will drop sign-ups considerably.
Assuming their is no probems putting the form I provided into the page changing where is sends sign-ups to should be pretty easy.

Change the URL that it posts to and ensure that the 3 inputs in the demo page and https://donate.mozilla.org/page/s/collusion have identical name attributes. It's pretty much a straight copy of what is on the homepage at the moment.
(In reply to Ryan Merkley from comment #35)
> We should not remove the e-mail signup. Forcing a click-through will drop
> sign-ups considerably.

If James is able to do email intergration with Basket before QA we can keep email. However, because we didn't have all of the content yesterday, we're in a bind and James is en-route to Mountain View for work-week.

The direct link, though not optimal, is a good fall back. I'd recommend that we keep it. 

I'll open a separate bug for email integration. If it doesn't happen this release, it will be prioritized for the next release. I'm assuming we'll also do some post-TED cleanup together.

Doest this work for you guys (Ryan & Ben)?
So this doesn't need to go through basket -- we havent yet done the BSD/Exact Target/Basket integration, though we're just beginning that process -- but there's no reason why that process needs to hold this up; it can just function like the signup on the homepage of Mozilla.org does.
I'll add back the static form submitting to https://donate.mozilla.org/page/s/collusion
(In reply to Ben Simon from comment #38)
> So this doesn't need to go through basket -- we havent yet done the
> BSD/Exact Target/Basket integration, though we're just beginning that
> process -- but there's no reason why that process needs to hold this up; it
> can just function like the signup on the homepage of Mozilla.org does.

So we still at this point we can definitely go with the direct link to https://donate.mozilla.org/page/s/collusion 

We're too close to the QA deadline and James is traveling.

Please file a second bug for email integration, and we'll do our best to still make it happen, but we can't guarantee it and that's why the fallback is better than nothing.
@Steven: thanks!

@mcbmoz: Seems like Steven thinks we can do? Really dont think this needs to be at all tied in with the integration process, which is likely to take a while. We've started that process already, but there's a good deal more that needs figuring out. Just needs to be the static form submission.
this is basic email signup to the foundation list.its the same as what is on the front page of mozilla.org.it has been in every mockup and should be included.
(In reply to Ben Simon from comment #41)
> @Steven: thanks!
> 
> @mcbmoz: Seems like Steven thinks we can do? Really dont think this needs to
> be at all tied in with the integration process, which is likely to take a
> while. We've started that process already, but there's a good deal more that
> needs figuring out. Just needs to be the static form submission.

This isn't tied to the moco stuff, it's tied to available resources and the tight deadline. The email sign-up on mozilla.org, has not been moved over to the new mozilla.org on Bedrock, it is untested.

1.) We've put together a lot, including a redesign in less than a day, working up right up to code freeze.

2.) Our lead webdev is now traveling, so we can't predict his availability - he had bandwidth yesterday, but the page wasn't ready.

3.) The direct link is a fall back. As noted above we're still going to try to do it, but we have to meet QA's needs to have enough time to test the pages, which are rich in complexity with the demo.

The teams have really come together to pull this off at the very last minute, and to reiterate, we're still going to try, but we can't guarantee it can be done in time for QA.
OK, forget comment 43

Steven has email sign-up staged: http://www-dev.allizom.org/b/en-US/collusion/
Wicked -- thanks so much.
(In reply to Ben Simon from comment #45)
> Wicked -- thanks so much.

HA! Steven is pretty awesome. We'll iterate with you guys post-TED.

I think the landing page and demo look pretty slick now! You're going to crush it Tuesday! We're also adding webtrends in the push.
I want to send a HUGE HUGE thank you to everyone that was involved in pulling this page together at the last minute. It is so appreciated that we were able to get everything in place and ready for Tuesday. 

Thanks :)
Thanks Shannon! 

Ryan, Ben & team, we're thrilled that Gary is going to present to TED in the One Mozilla theme and on Bedrock, and we will continue to iterate with you and smooth out the process, getting Ross onboarded on Bedrock in the coming weeks.

Thanks for this collaboration! Looking forward to our next one!
Assigning to James to work with IT to push live on Monday, February 27, 2012.

Thank you Raymond for signing off in comment 47.
Assignee: steven → jlong
great work everyone... this looks awesome!!!
Hi all - I got an email from Alex asking me to make sure the check boxes are correct for the sign up section.  I'm hoping these are simple changes.  The privacy checkbox should read:  "I’m okay with you handling this info as you explain in your privacy policy."  The words "privacy policy" in that sentence and the privacy policy on the bottom usually link to http://www.mozilla.org/en-US/privacy-policy.html.
Per comment 52 Stacy is going to add edits.

James, can you make these edits and then this will need to go through QA again before a push on Monday.
Here's some more detail around what my edits are:

1)  Change wording of privacy checkbox from "I agree to the Privacy Policy" to "I’m okay with you handling this info as you explain in your Privacy Policy"

2) Hyperlink the words "Privacy Policy" to http://www.mozilla.org/en-US/privacy-policy.html, both in the sentence above and for the Privacy Policy link at the bottom of the page.

3) For consistency (so all use the same skin), change "Contact Us" hyperlink to http://www.mozilla.org/en-US/about/contact.html#map-mountain_view and
A huge thank you to everyone who pulled this together on short notice.

To Atul for the prototype, Jono and Barry for spit polish, design improvements, and under-the-hood enhancements and bug fixes.

To Ross, James, John, and Steven for mock-ups, design enhancements, and wrangling it into Bedrock.

And to Chrissie for pulling it all together in record time.

This is a super-exciting project for the Foundation, and a great collaboration. We're really happy to have been able to push it on the new platform. Thanks to everyone for the quick turnaround and great results.
Jono, I'm getting a not found error on the link you posted for the add-on.
(In reply to Ryan Merkley from comment #56)
> Jono, I'm getting a not found error on the link you posted for the add-on.

The add-on was just rejected by an AMO reviewer for using the wrong version of jQuery. I will fix and re-submit.
Re-submitted with an updated jQuery, but the AMO URL is still not resolving. I'm guessing somebody at AMO has to give permission. I will try to contact them.
OK, the AMO URL should work again now.
Works for me, Jono. Do we have an indication if the review will be complete on Monday?
It's all looking amazing guys!

One thing - the navigation next to tabzilla (home/demo) links don't seem to be working and throwing 404's - is this just a problem on the staging server?

Looking at things I'm guessing that the demo link should point to demo/ (currently pointing at /collusion/demo/) and the home link should point to ../ (currently pointing at /collusion/)
Add-on has received preliminary review approval.
Giving the copy on the front page one last looking-over.

"Collusion is an experimental add-on for Firefox and allows you, to see all the third parties that are tracking your movements across the Web." 

This sentence has a needless comma.

"have teamed up to develop Collusion into a fully functioning feature for Firefox"

This sounds like we're committing for sure to eventual inclusion with Firefox. Does the Firefox design team know we're making statements like this one? I'm totally in favor of doing so (and Asa was too, last time I talked to him about it) but it's a bad idea to make a promise if we're not sure we can keep it.
"But most tracking happens without user’s consent"

Possessive plural, should be "users' consent"
The blue "see our demo" button works, but the "demo" link in the header takes me to the 404 page with monsters playing poker.
Oops, just found another problem - in the last stage of the demo text, the link to "try the addon" still points to the old addon location at collusion.toolness.org. It should be updated to point at https://addons.mozilla.org/en-US/firefox/addon/collusion/

(or that sentence can be removed completely, since it's redundant when there's a huge green "install the addon" button right below.)
(In reply to Jono X from comment #63)

> "have teamed up to develop Collusion into a fully functioning feature for
> Firefox"
> 
> This sounds like we're committing for sure to eventual inclusion with
> Firefox.

That language is originally from Gary's TED talk, but it has since been changed. More importantly, we need to avoid language that implies Ford funds are supporting Firefox (they're not). We should change the paragraph to read:

"We recognize the importance of transparency and our mission is all about empowering users — both with tools and with information. The Ford Foundation is supporting Mozilla to develop the Collusion add-on so it will enable users to not only see who is tracking them across the Web, but also to turn that tracking off when they want to."
Checking in on this bug. Who will be responsible for making the changes we've discussed this afternoon?
I believe James is on it. James, could you confirm?
Yep, almost done.
This is all done. Jono, not sure what "try the addon" text you mean in comment 66.

Please check it out on:

http://www-dev.allizom.org/en-US/collusion/
Oops, the URL is actually:

http://www-dev.allizom.org/b/en-US/collusion/
Fixed the addon link, thanks for pointing that out Jono.
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
This page will be live in a few minutes.
Any chance the "author not verified" notice that pops up when you install the add-on gets resolved before we go live?
Status: RESOLVED → UNCONFIRMED
Ever confirmed: false
Resolution: FIXED → ---
(In reply to Ryan Merkley from comment #75)
> Any chance the "author not verified" notice that pops up when you install
> the add-on gets resolved before we go live?

That's expected if the add-on isn't signed.  Googling for that message, I got the following link: https://forums.mozilla.org/addons/viewtopic.php?p=8729&sid=32d92349b44a254556606de28a97b506.
Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago → 12 years ago
Resolution: --- → FIXED
Ryan, Just got home. Looks like there were quite a few copy edits, etc. today. It was great that James was able to work with QA and IT to get the changes live. 

Are things OK on your end with this for tomorrow morning?
Everything looks good with the changes. We're ready to go for tomorrow. Thanks.
Status: RESOLVED → UNCONFIRMED
Resolution: FIXED → ---
BOOM! Good luck!
(In reply to mcbmoz from comment #79)
> BOOM! Good luck!

Neither of the links to demo work for me - both the navigation and the blue button link to http://www-dev.allizom.org/b/b/en-US/collusion/demo/ which I'm guessing contains one too many /b/'s?
They're working for me - maybe clear your cache and try again?

Would be great if we could get a few others checking on this to make sure, given the urgency of the timing.
Status: UNCONFIRMED → NEW
Ever confirmed: true
They're working/look right to me.
It's not working for me or for a colleuge sat next to me - still point to http://www-dev.allizom.org/b/b/en-US/collusion/demo/

Could this be a UK thing?
I can't duplicate the problem here.
verified fixed  links are working

http://www.mozilla.org/en-US/collusion/demo/
http://www.mozilla.org/en-US/collusion/
Status: NEW → RESOLVED
Closed: 12 years ago → 12 years ago
Resolution: --- → FIXED
Status: RESOLVED → VERIFIED
now that we have shipped the facelift and we have a lot of interest from the public we need to gather and discuss the future builds of collusion.

next features
next UI
deeper integration to firefox desktop, fennec?
whitelists and blacklists 
search function
better data visualization 
geo trace?
other graphing options.

what would be the process for setting up a mailing list and or getting this discussion more consolidated than the current email blasts?
With the TED launch behind us, we need to now move this into the Foundation team to manage the grant and development.

Next step is to bring all the interested parties together to talk about what we want Collusion to do, what the expectations of the grant are, how to build a community around it and take advantage of the energy we've created, and how we want it to eventually integrate with Firefox -- all so we can build a roadmap and hire the team to build it.

I'm looking at the week of March 11, since I'll be in SF/MV that week. Will follow up with everyone later this week to figure out schedules.
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: