Co-ordinate on Thimble templates we're creating for Maker Party / webmaker.org v2

RESOLVED FIXED

Status

Webmaker
webmaker.org
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: OpenMatt, Assigned: Sayak Sarkar)

Tracking

Details

* We're all working on Thimble templates, and increasingly relying on Thimble as a quick way to create pages and stories on our site and elsewhere
* Paula shared this list today -- helpful as a way to see what's already in queue: https://webmakers.etherpad.mozilla.org/ContentPlanMakerParty2013
* Let use this thread to discuss any additional requirements, see what's coming, etc. 
* Would be extremely useful to see early prototypes as they arise
(Reporter)

Comment 1

5 years ago
@ Paula: we have also created some protoype kits for teaching guides / kits here: https://webmaker.org/en-US/kit-prototypes/
* @ Paula: week of May 23 is on tap for actively hacking in Thimble in the MOOC. But sooner is good too.
(Reporter)

Comment 2

5 years ago
@ Paula: it's a bit hard for me to parse your pad into a concrete view of what's in queue. Is there a particular line I should be looking at?

Comment 3

5 years ago
+ Sayak, who's helping with the "what I made for Maker Party" Thimble project.
UPDATE: Sayak is building the "what I made" page here: https://github.com/sayak-sarkar/MakerGallery 

I advised using the header from the Kits styles (i.e. this header: https://thimble.webmaker.org/p/lzsz/ ). I figure once the Maker Party branding is done, we can easily adjust the CSS to match.
(Assignee)

Comment 5

5 years ago
UPDATE: Alternate-layout.html added to repository as per Laura's suggestion. 

Updated repository available at: https://github.com/sayak-sarkar/MakerGallery
Made the Hackable Agenda Template today: https://thimble.webmaker.org/p/l5yi/

Following the design of the hackable kits, with a header remixing elements pulled from Chris A.'s MakerParty Animated Gif. 

When Maker Party branding is finished (and given the popularity of these hackable templates), we might want to come up with another design? Something more simple? Lots of code in these. 

We can then correct the mistakes in some of the templates and launch them again (not correcting anything until this bug https://bugzilla.mozilla.org/show_bug.cgi?id=862862 is resolved - I can't keep track of all these links, it's insanity!)
Updated hackable agenda template: https://thimble.webmaker.org/p/l55m/

@Chris A - In response to your email about what design assets we need:

We are using and reusing the design from the User Profile page Jess made last year. I'm wondering if we should be designing a different layout for Maker Party & iterations? Or do you have any suggestions for how that template might be better? 

Thus far, using this design we have:
    Profile Template: https://thimble.webmaker.org/p/lj1p/
    Goals Template: https://thimble.webmaker.org/p/lj1k/
    Activity template: https://thimble.webmaker.org/p/lzsz/
    Resource template: https://thimble.webmaker.org/p/l5l8/
    Kit Assembly Template: https://thimble.webmaker.org/p/lj1g/ 
    Agenda template: https://thimble.webmaker.org/p/l55m/

Sayak's template hasn't been made to match this style yet, but I think it should. I still have to write an Event Documentation template, and I have a list of other "nice-to-haves" like certain checklists, tips and tricks, etc.

Thoughts?
Assignee: nobody → christopher
(Assignee)

Comment 8

5 years ago
@laura: Here's the link to a new simpler template for What I Made with Webmaker: https://thimble.webmaker.org/p/l5aj/

Please check it out and let me know if any further modifications are required.

P.S.: I've also added this page to the GitHub repository with the other templates: https://github.com/sayak-sarkar/MakerGallery
Flags: needinfo?(laura)
@Sayak - please replace the logo with the maker party logo, and fix the header and styles to match: https://thimble.webmaker.org/p/l55m/

I would get rid of the background colors on both the tool name and behind the images/iframes. I would also fix the text styles to match the above link (i.e. the tagline at the top should be green, the font should be Open Sans, etc).

Do another pass and then hit me back :) Thanks!
Flags: needinfo?(laura)
(Assignee)

Comment 10

5 years ago
(In reply to laura from comment #9)
> @Sayak - please replace the logo with the maker party logo, and fix the
> header and styles to match: https://thimble.webmaker.org/p/l55m/
> 
> I would get rid of the background colors on both the tool name and behind
> the images/iframes. I would also fix the text styles to match the above link
> (i.e. the tagline at the top should be green, the font should be Open Sans,
> etc).

@laura - Here's the new iteration as per your last specifications: https://thimble.webmaker.org/p/l56t/

Take a look at it and let me know. I kind of have a feeling that the page somehow looks a bit too basic now. Though not sure what is missing. What do you think?
@Sayak - fiddled around a bit, but it needs more work: https://thimble.webmaker.org/p/l58q/

I went back to your idea with the darker backgrounds, it was a bit boring. I modified styles to be a bit more clean, and used grays. I also edited some of your commenting. Good job on the comments. I basically just shortened them a bit.

The main thing that needs to be done is to get rid of all those pixel based widths and heights (particularly #page and the embed style). I started, but didn't finish. Use em or % because px will look really crappy on mobile, you know? 

It's looking great Sayak, thanks!
(Assignee)

Comment 12

5 years ago
(In reply to laura from comment #11)
> @Sayak - fiddled around a bit, but it needs more work:
> https://thimble.webmaker.org/p/l58q/
> 
> I went back to your idea with the darker backgrounds, it was a bit boring. I
> modified styles to be a bit more clean, and used grays. 

Even I thought so. It looked quite dull earlier!

> The main thing that needs to be done is to get rid of all those pixel based
> widths and heights (particularly #page and the embed style). I started, but
> didn't finish. Use em or % because px will look really crappy on mobile, you
> know? 
> 

Oops! My bad. It was in % earlier, but changed it later for testing compatibility for the Thimble editor. Will fix it right away.
(Assignee)

Comment 13

5 years ago
(In reply to Sayak Sarkar from comment #12)
> (In reply to laura from comment #11)
> > @Sayak - fiddled around a bit, but it needs more work:
> > https://thimble.webmaker.org/p/l58q/
> > 
> > I went back to your idea with the darker backgrounds, it was a bit boring. I
> > modified styles to be a bit more clean, and used grays. 
> 
> Even I thought so. It looked quite dull earlier!
> 
> > The main thing that needs to be done is to get rid of all those pixel based
> > widths and heights (particularly #page and the embed style). I started, but
> > didn't finish. Use em or % because px will look really crappy on mobile, you
> > know? 
> > 
> 
> Oops! My bad. It was in % earlier, but changed it later for testing
> compatibility for the Thimble editor. Will fix it right away.

On a second thought I think it would be better if I just include media queries for a responsive design maybe? The page shows up in its current 2 column layout until a certain screen resolution, below which it changes itself to a one column layout! 

@laura: What do you think?
sounds good to me :)
(Assignee)

Comment 15

5 years ago
@laura: could you please check if the Thimble supports media queries completely. Everytime I try writing something like, say: 
@media screen and (max-width: 600px){body{width: 600px;}}

It returns: Missing block closer or next property:value; pair following @media (max-width:600px). 

This happens specifically when I type in the internal block for the body tag. I'm pretty sure that my input HTML is correct. Cross checked the W3C specs to be sure.

If this is a valid bug, it should be filed, and we need to find an alternate way to take care of responsiveness. Putting in % won't help everywhere as the embedded Popcorn video especially needs a consistent height:width ratio.

Curiously, I also can't find other responsive Thimble pages, so I don't have any reference material for the bug or the template as such.

Suggestions?
(Assignee)

Comment 16

5 years ago
> I'm pretty sure that my input *HTML* is correct. Cross checked the W3C
> specs to be sure.

*CSS
(Assignee)

Comment 17

5 years ago
Current Iteration: https://thimble.webmaker.org/p/l5xm/
(Reporter)

Comment 18

5 years ago
* For more on Thimble templates and makes we're prepping for Webmaker vs launch, see these two spreadsheets:

For those who want to take part in curating the bucket of Makes into a nice gallery.
https://docs.google.com/a/mozillafoundation.org/spreadsheet/ccc?key=0AkvvpcilLIOndFE1MURBQjRFcjV3cHlpVElDVmhGRHc#gid=1

Formats
https://docs.google.com/a/mozillafoundation.org/spreadsheet/ccc?key=0AkvvpcilLIOndFE1MURBQjRFcjV3cHlpVElDVmhGRHc#gid=3
@Matt - who owns these spreadsheets? Michelle and I would like to feedback and add some things.
(Reporter)

Comment 20

5 years ago
Jacob

Comment 21

5 years ago
Hey Laura and Sayak,

These templates are looking good!
For the Maker Party specific templates, you might find this helpful:

https://www.dropbox.com/sh/ks5x321r47a3eqy/gcnwxZbpim

I've put together a style sheet that outlines some of the branding specs, provides some sample compositions as well as some basic visual elements for remixing.

Once you've had a chance to check that out and see if there's anything in there that would be useful to incorporate, let me know if you have any questions, or want any particular feedback about any of these.

Thanks guys!

-Chris
(Assignee)

Comment 22

5 years ago
(In reply to Chris Appleton from comment #21)
> Hey Laura and Sayak,
> 
> These templates are looking good!
> For the Maker Party specific templates, you might find this helpful:
> 
> https://www.dropbox.com/sh/ks5x321r47a3eqy/gcnwxZbpim
> 
> I've put together a style sheet that outlines some of the branding specs,
> provides some sample compositions as well as some basic visual elements for
> remixing.
> 
> Once you've had a chance to check that out and see if there's anything in
> there that would be useful to incorporate, let me know if you have any
> questions, or want any particular feedback about any of these.
> 
> Thanks guys!
> 
> -Chris

Hey Chris,

The style sheets seem to be missing from the link at the moment. I remember seeing them yesterday at the same place, but can't find them now. Could you please update the link to the new location.

Regards,
Sayak
(Assignee)

Comment 23

5 years ago
New "What I made with the Web" Template: https://thimble.webmaker.org/p/lvvf/
@Sayak - i hacked your page just a little to make the header match the others: https://thimble.webmaker.org/p/lvna/ - then I realized you all talked about this in the Mentor call yesterday. Hopefully I didn't just break your workflow!
Assignee: christopher → sayak.bugsmith
Flags: needinfo?(sayak.bugsmith)
(Assignee)

Comment 25

5 years ago
Final Version of the "What I Made" template available at: https://thimble.webmaker.org/p/l0r2/
Flags: needinfo?(sayak.bugsmith)
(Reporter)

Comment 26

5 years ago
* Awesome Sayak! Can we mark this closed?
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
(Assignee)

Comment 27

5 years ago
Yes please! :-)
(Assignee)

Comment 28

5 years ago
Thanks Laura! :)
You need to log in before you can comment on or make changes to this bug.