627939 - [Fx4Launch] build Fx4 technology page

Status: VERIFIED FIXED

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

Description

[John Slater]

This will be a new page for Fx4...content & design files coming as soon as possible.

Comment 1

[Laura Mesa [:lmesa] [:lvmesa]]

Functionality of this page based on demo site--for access, please email me.

Steven, will send you email now explaining how to access the site.

Comment 2

[John Slater]

Ok, content (aside from the demo functionality mentioned in comment #1) is ready to go:

JPG:
http://intothefuzz.com/leetom/Mozilla.com/JPG/technology_02.jpg

PSD:
http://intothefuzz.com/leetom/Mozilla.com/PSD/technology_02.psd

Steven, please see https://bugzilla.mozilla.org/show_bug.cgi?id=627934#c35 for a reference as to some additional HTML markup on the word SVG that isn't indicated in the mockup.

Comment 3

[John Slater]

Attachment: technology page - v4

Also, here's the final copy if you want to cut & paste.

Comment 4

[Steven Garrity [:sgarrity]]

I presume that Technology will be a new menu item under the Features tab in the main menu? Is there a preferred order it should fall in?

Comment 5

[Steven Garrity [:sgarrity]]

The "More USEFUL INFO" sidebar section has the "(rollover for details)" text that implies the functionality from the similar element on the Features page. However, I don't have the tech for the speech-bubbles and the nature of the links seem to imply that they might be directly links (no hover-bubbles). Can you clarify?

Comment 6

[John Slater]

(In reply to comment #4)
> I presume that Technology will be a new menu item under the Features tab in the
> main menu? Is there a preferred order it should fall in?

After Customization and Before Videos. Thanks!

(In reply to comment #5)
> The "More USEFUL INFO" sidebar section has the "(rollover for details)" text
> that implies the functionality from the similar element on the Features page.
> However, I don't have the tech for the speech-bubbles and the nature of the
> links seem to imply that they might be directly links (no hover-bubbles). Can
> you clarify?

Sorry, that's an error on our part - those links are just simply links with no bubbles or other functionality. Please remove the rollover text. Thanks for catching!

Comment 7

[Steven Garrity [:sgarrity]]

John, do we have URLs for that list of links?

Demo Studio
Web O’ Wonder
Big List of Check Marks
Mozilla Developer Network

I get the impression that at least some of these sites aren't in production yet?

Also, I see that the bread-crumb navigation has been omitted from most of these mockups. Can I assume that this is an intentional omission? It's fine by me, I'm not sure they are necessary.

Comment 8

[John Slater]

(In reply to comment #7)
> John, do we have URLs for that list of links?
> 
> Demo Studio
- not sure...Laura?

> Web O’ Wonder
- Laura, you should confirm this as I know we went around & around on the URL

> Big List of Check Marks
- the list of check marks is on http://www.mozilla.com/en-US/firefox/beta/technology/, but now that you mention it I don't love the idea of continuing to make the beta pages an active part of the site. How much trouble would it be to spin this into a new page in our standard mozilla.com style?

> Mozilla Developer Network
- this one is easy: https://developer.mozilla.org/
 
> I get the impression that at least some of these sites aren't in production
> yet?
- true. Laura, can you weigh in more on the schedules here?
 
> Also, I see that the bread-crumb navigation has been omitted from most of these
> mockups. Can I assume that this is an intentional omission? It's fine by me,
> I'm not sure they are necessary.
- Yep, that's correct.

Comment 9

[Laura Mesa [:lmesa] [:lvmesa]]

CC'ing Jay to comment on MDN. (In reply to comment #8)
> (In reply to comment #7)
> > John, do we have URLs for that list of links?
> > 
> > Demo Studio
> - not sure...Laura?

Jay--

> 
> > Web O’ Wonder
> - Laura, you should confirm this as I know we went around & around on the URL

www. webowonder.org will redirect to demos.mozlla.org--so either of those is fine. 

> 
> > Big List of Check Marks
> - the list of check marks is on
> http://www.mozilla.com/en-US/firefox/beta/technology/, but now that you mention
> it I don't love the idea of continuing to make the beta pages an active part of
> the site. How much trouble would it be to spin this into a new page in our
> standard mozilla.com style?
> 
> > Mozilla Developer Network
> - this one is easy: https://developer.mozilla.org/
> 
> > I get the impression that at least some of these sites aren't in production
> > yet?
> - true. Laura, can you weigh in more on the schedules here?

This is correct. Web O Wonder should go live the first week in March. Demo Studio, Jay can correct me if I'm wrong, should go the first or second week of March. 


> 
> > Also, I see that the bread-crumb navigation has been omitted from most of these
> > mockups. Can I assume that this is an intentional omission? It's fine by me,
> > I'm not sure they are necessary.
> - Yep, that's correct.

Comment 10

[Laura Mesa [:lmesa] [:lvmesa]]

(In reply to comment #9)
> CC'ing Jay to comment on MDN. (In reply to comment #8)
> > (In reply to comment #7)
> > > John, do we have URLs for that list of links?
> > > 
> > > Demo Studio
> > - not sure...Laura?
> 
> Jay--
> 
> > 
> > > Web O’ Wonder
> > - Laura, you should confirm this as I know we went around & around on the URL
> 
> www. webowonder.org will redirect to demos.mozlla.org--so either of those is
> fine. 

https://demos.mozilla.org is probably the best.

Comment 11

[Jay Patel [:jay]]

Demo Studio URL: https://developer.mozilla.org/demos

Tentative Demo Studio launch date:  Thursday 2/24 (pending security review and QA signoff)... but possibly will slip to Thursday 3/3.

Comment 12

[Steven Garrity [:sgarrity]]

Still building out the page and I have a few more questions:

Many of the paragraphs have in-line links, but also a demo feature that floats up over the feature on mouse-over. This means that the links can never be clicked - quite frustrating. If we're going to slide demos in over the content, we'll either have to not include inline links, or we'll have to add a way to dismiss the floating demo.

Comment 13

[John Slater]

Laura, thoughts on comment #12? Agreed that something needs to change here.

Comment 14

[Laura Mesa [:lmesa] [:lvmesa]]

(In reply to comment #12)
> Still building out the page and I have a few more questions:
> 
> Many of the paragraphs have in-line links, but also a demo feature that floats
> up over the feature on mouse-over. This means that the links can never be
> clicked - quite frustrating. If we're going to slide demos in over the content,
> we'll either have to not include inline links, or we'll have to add a way to
> dismiss the floating demo.

I really like the idea of adding a way to dismiss the demo.

Comment 15

[Steven Garrity [:sgarrity]]

Added the Technology page link to the header/footer nav in r82821.

Still working on integrating all of the tech demos. Hope to have this ready (or at least as far as we can go with a list of open questions) for tomorrow (Fri).

Comment 16

[Steven Garrity [:sgarrity]]

Have the page pretty much ready as of r82838. Will post a more detailed update in the AM.

Comment 17

[John Slater]

Cool stuff, thanks Steven. Any thoughts on how we can resolve the issue you called out in comment #12? Do we need to change the content?

Comment 18

[Steven Garrity [:sgarrity]]

A few fixes in r82889.

We've added a "close" link to the pop-up demos. Works well, I think.

A few remaining issues here:

There are a lot of blocks on this page that don't have a demo - should we try to add something for them, and/or should we visually indicate which blocks have demos on hover, so you don't have to fish for the blocks with demos?

The length of text in the blocks varies a lot. Due to the limitations of the visual design/layout of this page, the blocks are fixed in height. We'll either have to find a technical work-around for this (pretty tricky), or preferably, updated the copy to be more uniform in length. A few blocks that are currently too long:
 - History pushState and replaceState
 - Support for .slice in the File API
 - Content Security Policy

The list of blocks/demos on this page varies quite a bit from the t0ps3cr3t demos page that this was based on - there are lots of blocks that are missing in or or the other. I'm assuming that the content in the PSD and doc attached here are the ones that should be used.

Comment 19

[John Slater]

Thanks Steven. Laura, can you address the questions in comment #18? I'm not sure how to answer most of them.

Comment 20

[Laura Mesa [:lmesa] [:lvmesa]]

(In reply to comment #18)
> A few fixes in r82889.
> 
> We've added a "close" link to the pop-up demos. Works well, I think.
> 
> A few remaining issues here:
> 
> There are a lot of blocks on this page that don't have a demo - should we try
> to add something for them, and/or should we visually indicate which blocks have
> demos on hover, so you don't have to fish for the blocks with demos?

That would be awesome.
> 
> The length of text in the blocks varies a lot. Due to the limitations of the
> visual design/layout of this page, the blocks are fixed in height. We'll either
> have to find a technical work-around for this (pretty tricky), or preferably,
> updated the copy to be more uniform in length. A few blocks that are currently
> too long:
>  - History pushState and replaceState
>  - Support for .slice in the File API
>  - Content Security Policy


> 
> The list of blocks/demos on this page varies quite a bit from the t0ps3cr3t
> demos page that this was based on - there are lots of blocks that are missing
> in or or the other. I'm assuming that the content in the PSD and doc attached
> here are the ones that should be used.

That is correct.

Comment 21

[Laura Mesa [:lmesa] [:lvmesa]]

(In reply to comment #20)
> (In reply to comment #18)
> > A few fixes in r82889.
> > 
> > We've added a "close" link to the pop-up demos. Works well, I think.
> > 
> > A few remaining issues here:
> > 
> > There are a lot of blocks on this page that don't have a demo - should we try
> > to add something for them, and/or should we visually indicate which blocks have
> > demos on hover, so you don't have to fish for the blocks with demos?
> 
> That would be awesome.
And I also meant to say...lets visually indicate which ones have demos. 

> > 
> > The length of text in the blocks varies a lot. Due to the limitations of the
> > visual design/layout of this page, the blocks are fixed in height. We'll either
> > have to find a technical work-around for this (pretty tricky), or preferably,
> > updated the copy to be more uniform in length. A few blocks that are currently
> > too long:
> >  - History pushState and replaceState
> >  - Support for .slice in the File API
> >  - Content Security Policy

I will try and edit this. 
> 
> 
> > 
> > The list of blocks/demos on this page varies quite a bit from the t0ps3cr3t
> > demos page that this was based on - there are lots of blocks that are missing
> > in or or the other. I'm assuming that the content in the PSD and doc attached
> > here are the ones that should be used.
> 
> That is correct.

Comment 22

[Laura Mesa [:lmesa] [:lvmesa]]

I shortened them as much as I could:

Content Security Policy:
Content Security Policy (CSP) is a set of tools developers can use to help prevent a few different classes of attacks. In particular, it offers tools to mitigate cross-site scripting attacks, click-jacking and packet sniffing attacks. When a rule is violated, Firefox can send back information about that violation to the website, helping improve security for other browsers too.

Support for .slice in the File API
Firefox supports the Blob API and the .slice APIs that come with it. This can help people who want to process parts of large File objects from JavaScript without having to load the whole file into the memory. People who reliably upload large files can use some server and JS code to split a large file into sections and upload chunks, including re-retrying failed sections, or even uploading several sections, in parallel.

History pushState and replaceState
Firefox supports the HTML5 pushState and replaceState history modification calls, allowing developers to create or modify the browser navigation history. These are helpful for applications that might want to generate history entries using the hash after the URL (useful for HTML-based slides, for example).

Comment 23

[Steven Garrity [:sgarrity]]

A visual indicator of which elements have demos has been added, the shorter text from comment #22 has been added, and the HTML5 shim JS for IE has been added (r83542, r83543, r83544).

Is the SVG area supposed to have actual SVG images for demos?

Comment 24

[Laura Mesa [:lmesa] [:lvmesa]]

Attachment: SBG demos

Comment 25

[Laura Mesa [:lmesa] [:lvmesa]]

(In reply to comment #24)
> Created attachment 515916 [details]
> SBG demos

SVG*

Comment 26

[Steven Garrity [:sgarrity]]

SVG demos added in r83734.

Also added the Demo Studio, Web 'O Wonders, and Developer Network URLs.

We're still missing URLs for "Easy Customization" and "Big List of Check Marks".

For the "Big List...", Laura asked about re-purposing the existing Beta 'big-list' page (http://www.mozilla.com/en-US/firefox/beta/technology/). We can do this, but if that's the final decision, can we get confirmation and a new bug filed?

I'm not sure what the intended destination is for the "Easy Customization" link.

Also made a minor padding fix for that list of links in r83735.

Comment 27

[raymond [:retornam] (inactive)]

Attachment: screenshot

broken in IE6

Comment 28

[Steven Garrity [:sgarrity]]

IE6 errors are fixed in r83758. That said, many of the demos won't work in IE6 as they demo newer technologies.

Comment 29

[raymond [:retornam] (inactive)]

qa-verified-stage http://www-fx4.stage.mozilla.com/en-US/firefox/technology/

Comment 30

[Laura Mesa [:lmesa] [:lvmesa]]

Guys, going on the page just now the demos aren't apearing 1 by 1--instead, you scroll over a section and the demos are all appearing.  That's not by design right?

BTW, using the lastes minefield to see the page.

Comment 31

[Steven Garrity [:sgarrity]]

(In reply to comment #30)
> Guys, going on the page just now the demos aren't apearing 1 by 1--instead, you
> scroll over a section and the demos are all appearing.  That's not by design
> right?

Fixed in r83894. I introduced this bug when doing the IE fixes in comment #28. Thanks for pointing it out.

Comment 32

[Steven Garrity [:sgarrity]]

Need links for the Learn More boxes on "SVG As Images and CSS Backgrounds" and "CORS Improvements".

Comment 33

[Laura Mesa [:lmesa] [:lvmesa]]

Sent en email to janet. Stormy and Paul--they should put links in here asap.

Comment 34

[Paul Rouget [:paul]]

(In reply to comment #32)
> Need links for the Learn More boxes on "SVG As Images and CSS Backgrounds"

2 different technologies, 2 links:
https://developer.mozilla.org/en/CSS/background-image#Syntax
https://developer.mozilla.org/en/HTML/element/img#Supported_Image_Formats

> and "CORS Improvements".

General article: https://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/
General doc: https://developer.mozilla.org/en/http_access_control

Some specific new things: https://developer.mozilla.org/en/http_access_control#Preflighted_requests

Comment 35

[Steven Garrity [:sgarrity]]

Missing links added in r85260. Thanks Paul.

Comment 36

[raymond [:retornam] (inactive)]

verified fixed http://www.mozilla.com/en-US/firefox/technology/