1285829 - Graphics required for MDN Learning Area Introduction to JavaScript Part 1 module

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Chris Mills [:cmills]]

In our "Introduction to JavaScript Part 1" module, we so far have four graphics that we'd like created by a designer. After a discussion with Lee Tom, we agreed that this would be a great project for Emily Shirtz to take on, hence this request.

"What is JavaScript" has three graphics that could really do with being recreated in a neat, consistent style:

https://developer.mozilla.org/en-US/Learn/JavaScript/Introduction_to_JavaScript_1/What_is_JavaScript

There is also one graphic needed for our "Storing the information you need — Variables" article:

https://developer.mozilla.org/en-US/Learn/JavaScript/Introduction_to_JavaScript_1/Variables

Thanks!

Comment 1

[eshirtz]

Attachment: cake.png

Comment 2

[eshirtz]

Attachment: Artboard 1.png

Comment 3

[eshirtz]

Attachment: execution [Recovered].png

Comment 4

[eshirtz]

Attachment: boxes.png

Comment 5

[eshirtz]

Attachment: cake.png

Comment 6

[eshirtz]

Attachment: browser.png

Comment 7

[eshirtz]

Attachment: execution.png

Comment 8

[Chris Mills [:cmills]]

I've got another diagram request — see the comment at the bottom of this section:

https://developer.mozilla.org/en-US/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts

Let me know if you need more information; what I want should be pretty self-evident from the description above the comment.

Comment 9

[Chris Mills [:cmills]]

Two more diagram requests — these are definitely the last for this module.

1. The first is summed up by the comment near the top of this section: 

https://developer.mozilla.org/en-US/Learn/JavaScript/Building_blocks/Events#A_series_of_fortunate_events

2.The second has a rough temporary diagram provided in the following section:

https://developer.mozilla.org/en-US/Learn/JavaScript/Building_blocks/Events#Bubbling_and_capturing_explained

This is a pain to illustrate elegantly, so any suggestions about how to cut the text down a bit much appreciated ;-)

So to recap, there's a total of 5 diagrams asked for here. Emily has already done the first two.

Comment 10

[Chris Mills [:cmills]]

Hi Tim, I don't know if Emily is currently available. If not, could Allen work on these?

Thanks!

Comment 11

[tmurray]

Yes, I'll CC him on the bug. 

Allen, would you please work with Chris on these? 

Thanks, 
Tim

Comment 12

[Allen Meyer]

(In reply to tmurray from comment #11)
> Yes, I'll CC him on the bug. 
> 
> Allen, would you please work with Chris on these? 
> 
> Thanks, 
> Tim

Yes, I can work with Chris on these.

Allen

Comment 13

[Chris Mills [:cmills]]

(In reply to Allen Meyer from comment #12)
> (In reply to tmurray from comment #11)
> > Yes, I'll CC him on the bug. 
> > 
> > Allen, would you please work with Chris on these? 
> > 
> > Thanks, 
> > Tim
> 
> Yes, I can work with Chris on these.
> 
> Allen

Cool, thanks Allen.

Comment 14

[Allen Meyer]

(In reply to Chris Mills (Mozilla, MDN editor) [:cmills] from comment #8)
> I've got another diagram request — see the comment at the bottom of this
> section:
> 
> https://developer.mozilla.org/en-US/Learn/JavaScript/Building_blocks/
> Functions#Function_scope_and_conflicts
> 
> Let me know if you need more information; what I want should be pretty
> self-evident from the description above the comment.

Hi Chris,
Funny to be asking this question, but here it is: I'm thinking this would be like a mini map of a zoo. I was thinking instead of creating a lot of cages, we could something like this:
https://zoocritic.wordpress.com/2012/12/04/review-toronto-zoo/toronto-zoo-map/

I like the way they use silhouettes to indicate animal and color to indicate enclosure. I suggest doing a simplified version of this approach.

Comment 15

[Chris Mills [:cmills]]

(In reply to Allen Meyer from comment #14)
> (In reply to Chris Mills (Mozilla, MDN editor) [:cmills] from comment #8)
> > I've got another diagram request — see the comment at the bottom of this
> > section:
> > 
> > https://developer.mozilla.org/en-US/Learn/JavaScript/Building_blocks/
> > Functions#Function_scope_and_conflicts
> > 
> > Let me know if you need more information; what I want should be pretty
> > self-evident from the description above the comment.
> 
> Hi Chris,
> Funny to be asking this question, but here it is: I'm thinking this would be
> like a mini map of a zoo. I was thinking instead of creating a lot of cages,
> we could something like this:
> https://zoocritic.wordpress.com/2012/12/04/review-toronto-zoo/toronto-zoo-
> map/
> 
> I like the way they use silhouettes to indicate animal and color to indicate
> enclosure. I suggest doing a simplified version of this approach.

Yeah, I like this idea - it will look neater and also fit in better with the other diagrams on the site. As long as we are being really clear that the different animals are in different enclosures, and can't reach one another, we are all good.

Comment 16

[Allen Meyer]

Chris,
Can we set Wednesday 10/5 to see first round? I had some other design requests come in.

Allen

Comment 17

[Chris Mills [:cmills]]

(In reply to Allen Meyer from comment #16)
> Chris,
> Can we set Wednesday 10/5 to see first round? I had some other design
> requests come in.
> 
> Allen

Yup, no problem.

Comment 18

[Allen Meyer]

(In reply to Chris Mills (Mozilla, MDN editor) [:cmills] from comment #17)
> (In reply to Allen Meyer from comment #16)
> > Chris,
> > Can we set Wednesday 10/5 to see first round? I had some other design
> > requests come in.
> > 
> > Allen
> 
> Yup, no problem.

Hi Chris,

I'm running behind on this.I'll have something tomorrow and Friday. My apologies for the delay.

Allen

Comment 19

[Allen Meyer]

Attachment: bubbling-capturing.gif

For java script building blocks section. Does the color help to guide one through?

Comment 20

[Chris Mills [:cmills]]

(In reply to Allen Meyer from comment #19)
> Created attachment 8798605 [details]
> bubbling-capturing.gif
> 
> For java script building blocks section. Does the color help to guide one
> through?

Yes - this is really great!

Comment 21

[Chris Mills [:cmills]]

(In reply to Allen Meyer from comment #19)
> Created attachment 8798605 [details]
> bubbling-capturing.gif
> 
> For java script building blocks section. Does the color help to guide one
> through?

This is now live in place at

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Bubbling_and_capturing_explained

Thanks again.

Comment 22

[Allen Meyer]

(In reply to Chris Mills (Mozilla, MDN editor) [:cmills] from comment #21)
> (In reply to Allen Meyer from comment #19)
> > Created attachment 8798605 [details]
> > bubbling-capturing.gif
> > 
> > For java script building blocks section. Does the color help to guide one
> > through?
> 
> This is now live in place at
> 
> https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/
> Events#Bubbling_and_capturing_explained
> 
> Thanks again.

Looks good. Working on getting the second one to you today.

Comment 23

[Allen Meyer]

(In reply to Chris Mills (Mozilla, MDN editor) [:cmills] from comment #9)
> Two more diagram requests — these are definitely the last for this module.
> 
> 1. The first is summed up by the comment near the top of this section: 
> 
> https://developer.mozilla.org/en-US/Learn/JavaScript/Building_blocks/
> Events#A_series_of_fortunate_events
> 
> 2.The second has a rough temporary diagram provided in the following section:
> 
> https://developer.mozilla.org/en-US/Learn/JavaScript/Building_blocks/
> Events#Bubbling_and_capturing_explained
> 
> This is a pain to illustrate elegantly, so any suggestions about how to cut
> the text down a bit much appreciated ;-)
> 
> So to recap, there's a total of 5 diagrams asked for here. Emily has already
> done the first two.

Hi Chris,
I'm a little confused. Do you need one more illustration? I see info here for one being represented as a zoo and the other of a plane on the tarmac. Both?
thanks!
Allen

Comment 24

[Chris Mills [:cmills]]

(In reply to Allen Meyer from comment #23)
> Hi Chris,
> I'm a little confused. Do you need one more illustration? I see info here
> for one being represented as a zoo and the other of a plane on the tarmac.
> Both?
> thanks!
> Allen

Yes, I'd like both of those done. Thanks.

Comment 25

[Allen Meyer]

Attachment: MDN-mozilla-events-runway.png

"A series of fortunate events"

Comment 26

[Chris Mills [:cmills]]

(In reply to Chris Mills (Mozilla, MDN editor) [:cmills] from comment #24)
> (In reply to Allen Meyer from comment #23)
> > Hi Chris,
> > I'm a little confused. Do you need one more illustration? I see info here
> > for one being represented as a zoo and the other of a plane on the tarmac.
> > Both?
> > thanks!
> > Allen
> 
> Yes, I'd like both of those done. Thanks.

Looks great, thanks! This is now live at

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events?document_saved=true#A_series_of_fortunate_events

Comment 27

[Allen Meyer]

Attachment: MDN-mozilla-zoo.png

Comment 28

[Chris Mills [:cmills]]

(In reply to Allen Meyer from comment #27)
> Created attachment 8799499 [details]
> MDN-mozilla-zoo.png

Great - thanks Allen! See it live at:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts

Comment 29

[Allen Meyer]

Your Welcome Chris, 
I think that was the last one?

Comment 30

[Chris Mills [:cmills]]

(In reply to Allen Meyer from comment #29)
> Your Welcome Chris, 
> I think that was the last one?

For this bug, yes.