Create "Things to Try" page

[mewtaylor]

New page that will contains resources such as tutorials, educator guides and activity cards for getting started with Scratch.

Components this will need:

• TitleBanner
• Resource Tile (new component)
• Resource Modal (new component) (see Create New Modal Component #980)

[carljbowman]

Things to Try page - Responsive Behavior

Desktop - 12col

• The vertical size of resource tiles will vary. This variation can be more dramatic based on translation. So rather than setting a fix char length or hiding overflown content, we should use a 'masonry' grid and allow for tiles to paginate asymmetrically

Tablet to Desktop - 8col

Mobile to Tablet - 6col

A perfect example of where our current fixed grid system could use some tweaking. Lots of unused space. A flexible grid could help fill the space across more devices, but we would need to design with more variation in mind

Mobile - 4col

'See Cards & Guides' Modal - Responsive Behavior

Generally I have some concerns about scrolling paradigms with in modals. On smaller devices as the content will grow beyond the length of the screen the user will need to be able to scroll the modal rather than the page. Flagging in case we need to adapt the design to account for this behavior.

Desktop - 12col

Tablet to Desktop - 8col

Mobile to Tablet - 6col

• Ideally the the modal would take up the entire screen and an example where scrolling gets tricky as mentioned above.
• Close may need to be more visible and should become fixed as to follow the user scrolls. This way they have the ability to close the dialog at any point regardless of where they are on the page.

Mobile - 4col

[carljbowman]

@chrisgarrity - I will follow up with more detailed specs for the tiles & modals soon, as well as giving you the image assets and icons. Just wanted to get something up in the mean time.

[chrisgarrity]

@carljbowman Thanks for the head's up!

[thisandagain]

This looks great. Thanks for specs @carljbowman . 😄 👌

[mewtaylor]

@carljbowman quick question – for the banner images on the modal, are they going to be different from the ones on the resource tile/card/ethereal feeling component, or is it just an uncropped version of that image?

[carljbowman]

@mewtaylor - The banner image will be a different asset. Each resource tile will have two assets, one that will display on the tile and another for the banner image in the modal.

[kaschm]

Text for top of page

• You can get started with Scratch in a variety of ways. Click an image to try the Tutorial. You can also download a set of Activity Cards and an Educator Guide for each theme.

Tutorial Tile Image, Titles, Descriptors:

Animate Your Name Animate the letters of your name, initials, or favorite word.

Make It Fly Animate the Scratch Cat, The Powerpuff Girls, or even a taco!

Make Music Choose instruments, add sounds, and press keys to play music.

Race to the Finish Make a game where two characters race each other.

Hide and Seek Make a hide-and-seek game with characters that appear and disappear.

Create a Story Choose characters, add conversation, and bring your story to life.

Fashion Game Dress up a character with different clothes and styles.

Pong Game Make a bouncing ball game with sounds, points, and other effects.

Let's Dance Design an animated dance scene with music and dance moves.

Catch Game Make a game where you catch things falling from the sky.

Virtual Pet Create an interactive pet that can eat, drink, and play.

[kaschm]

From web meeting 11/3: url for page will be at /try

/cc @ntlrsk for comments or concerns?

[ntlrsk]

Just talked to Mres and we both thing that sounds like a temporary test page.
I'd suggest: /go
Will run by a couple others to confirm.

[ntlrsk]

http://es.memegenerator.net/instance/46317245

[ntlrsk]

OK I talked with others and they suggested /do
(as Yoda says) (Note: Another concern raised with /try was that it may sound like a trial version that you have to pay for later.)

[ntlrsk]

Talked further with mres and he says /go sounds better than do.

[carljbowman]

@chrisgarrity - Added the images to @kaschm 's content #979 (comment)

I made that assets slightly larger than 2x as we prepare for higher dpi screens and a more flexible grid that may show images larger that 300px-ish.

[kaschm]

@chrisgarrity @mewtaylor just checked with @ntlrsk and the ordering of the page should follow the cards page (/info/cards). The top row should highlight the same three (in the same order) as the homepage. thanks!

[chrisgarrity]

@kaschm @ntlrsk Just to clarify...
The first row should be Make It Fly, Animate Your Name, Make Music as shown in the mocks above...
Not
Animate Your Name, Make It Fly, Race to the Finish as shown on /info/cards

[ntlrsk]

@chrisgarrity I think Animate Your Name should come first. @carljbowman The thumbnails look great! (Finished pong game has red line across near bottom, but I think it's fine not to have it in the thumbnail.)

[ntlrsk]

To clarify, the order that @kaschm listed the 11 activities above with the thumbnails seems good to me (at least for the HOC period) - @chrisgarrity @carljbowman Does that seem OK?

[chrisgarrity]

@ntlrsk Sounds fine. I'll get the correct order implemented with images :)

[chrisgarrity]

@ntlrsk @kaschm Should we be using the current PDFs for the activity cards, or are there new ones? Do we have copies of the guides that can be added?

[kaschm]

@chrisgarrity: good questions. I believe we can use the cards found on /cards. However, there are new versions of the Guides that aren't yet done. @ntlrsk can confirm ...

[ntlrsk]

The cards on the Cards page are the latest. The guides are all being revised right now, getting as many as possible for the Nov. 14 freeze!

[chrisgarrity]

@ntlrsk What are all the links that the tutorials should go to?
I know they all start https://scratch.mit.edu/projects/editor/?tip_bar=, but what's the tip bar parameter for each of them?

[ntlrsk]

name
fly
music
racegame
hide
[story - not available yet - so don't include]
[fashion - not available yet - so don't include]
pong
dance
catch
pet
Thanks!

[chrisgarrity]

@ntlrsk Thanks. Just saw your email - I'll take Story and Fashion off the list of Things to Try. The other nine will be ready to freeze. Let me know on Monday if there are any more I need to take off the list.

[ntlrsk]

No they won't be. Thanks. ⁣​

On Nov 10, 2016, 5:49 PM, at 5:49 PM, chrisgarrity notifications@github.com wrote:

@ntlrsk Thanks. Will story and fashion be available on Monday for the
freeze? If not I'll take them out of the list.

You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
#979 (comment)