Closed Bug 891546 Opened 11 years ago Closed 11 years ago

Build teaching kit template in Thimble

Categories

(Webmaker Graveyard :: webmaker.org, defect)

Product:
Webmaker Graveyard
Component:
webmaker.org
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: cassie, Assigned: daleee)

References

Details

(Whiteboard: [mentor] [teaching kit] [aug1] s=20130729 p=1 [mentor work sprint])

Attachments

(5 files, 3 obsolete files)

Code Review
49 bytes, text/x-github-pull-request
kate
: review-
Details | Review
http://imgur.com/lBmY7PH
24 bytes, text/plain
Details
http://imgur.com/OxheRJ8
24 bytes, text/plain
Details
Design Review, Mark IV
39 bytes, text/plain
Details
Wide style issue
30 bytes, text/plain
Details 
This will be based on designs in bug 888272.
Dale, this template is ready to begin building. See attachments in bug 888272. I've moved the final jpgs and psds into google drive / production / teach – you should be looking at Teaching-kit-template v4.psd.

Let's go over it together if you don't mind before you begin. We'll want to make this template both flexible – so users can add and subtract "components" or sections – as well as rigid, so that we can protect the CSS styles as much as possible throughout the hacking/remixing process. Not sure if that means making the style sheets external?

I still owe you a mobile view for this as well as the print styles, which I'll keep tracking in bug 888272.
Dale, one thing – please remove the "all activities" functionality. It's not a very remixable piece of content.
Blocks: 891922
No longer depends on: 891922
Attached file Design Review (obsolete) — 
http://radiant-atoll-7236.herokuapp.com/teaching
Attachment #777882 - Flags: review?(cassie)
Comment on attachment 777882 [details]
Design Review

I LOVE this being a live link, nice! However, I'm seeing this as a single column, which doesn't seem right.
Attachment #777882 - Flags: review?(cassie) → review-
Comment on attachment 777882 [details]
Design Review

Updated, fixed problem with FF rendering (forgot that 'box-sizing' was still behind -moz prefix)
Attachment #777882 - Flags: review- → review?
Attachment #777882 - Flags: review? → review?(cassie)
getting some text-cut-in-half issues on the print css (looks like it's not respecting lines of text, cutting a div up instead?)
viewing this on desktop with a not-full-screen browser does not reflow the elements on the right.
Pomax stole my comment.
Whiteboard: [mentor] [teaching kit] [aug1]
Gavin, can you do a first pass for design QA between Dale's build and the designs? You can flag me afterwards for a second review.
Flags: needinfo?(gavin)
Comment on attachment 777882 [details]
Design Review

I'd like Gavin to take the first pass at design QA feedback.
Attachment #777882 - Flags: review?(cassie) → review-
Whiteboard: [mentor] [teaching kit] [aug1] → [mentor] [teaching kit] [aug1] s=20130722 p=1
Attachment #777882 - Flags: review- → review?(gavin)
Comment on attachment 777884 [details] [review]
Code Review

A few things to fix up

As a general note, I think it would be better to include this stylesheet in a link tag for the following reasons:

- global changes could be applied without having to update individual makes
- overwriting base styles is still possible because of the cascade
- you can use LESS
Attachment #777884 - Flags: review?(kate) → review-
Here's the main issues I'm seeing:

- Webmaker icon is very aliased & jagged. Looks like there may be an issue with the original asset in the comp.
- Layout is wider than the comp. If this is intended as a fixed width layout, it appears that it should be 980px wide.
- Agenda "note pad" is overflowing its container. The comp has it contained inside the right column.
- Missing the "Teaching Kit" badge on upper left.
- Overall content block should be center aligned. Appears to be left aligned in build.
- Columns are set at 66 and 33% but have padding which is making them go over 100% cumulatively. (See: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ for solution.)
Gavin caught some great things. I have some additional comments:

Overall
* Good that page is centred, but for the max width, let's keep the padding on the edges consistent (so that the blue expands, not the white). 

Header
* Gravatar has a jagged edge and doesn't look to be a perfect circle - https://docs.google.com/file/d/0BzfN9sXlOXt1VmxTZS1OVS1OcG8/edit?usp=sharing
* Please show us what this build looks like with a photo (https://docs.google.com/file/d/0BzfN9sXlOXt1R2l2TlhTd1lTSHM/edit?usp=sharing)
* Missing the "teaching kit" yellow banner on the top left
* Print button is too big, should be 45x45px

Tags: 
* the space between the tags should be equal to the space between the rows. 5px
* How do you plan to link these up? This should be dynamic.

Agenda
* type is too small. These should be big solid noticeable links, as they're linking to pretty important content.
* background looks diff. than the psd. Did you find this somewhere? As discussed, the items do not need to line up perfectly with the line rules. 
* The line where it says "this is a second line" is meant to show how the line breaks. That should be incorporated into the styles.
* The numbers in the list should be a lighter grey
* Please double check the design for correct left alignment. Ideally, this list and the bulleted list below in additional resources have a strong left alignment.

Badges Available 
* Remove this section entirely, you don't need to build it now.

Additional resources
* using the wrong bullets. Should be round, not square, to match the design.

Main text area
* The text column is too wide. Please match it to the psd. This is for readability - shorter columns are more readable because your eye doesn't have to travel as far back to the left after a line break.
* Will links in the main area be blue? Please demo this.

Review and Assessment
* Your checkboxes look too small - should be 20x20 unchecked. 
* The colour on the checkboxes (on and off states) looks wrong. Make sure the green is consistent with the rest of the site.
* The type should be slightly larger than the regular body copy.
* The backgrounds under Review & Assessment should have rounded corners.
* There is too much space at the bottom of the background. Should be equal space above the top text and below the bottom text.
* The background should match the width of the text column (shouldn't run right up against the righthand column)
Flags: needinfo?(gavin)
Also, on the print styles – it looks pretty great printed out, except the header seems to print on a separate page from the rest of the content. Any idea why that's happening?

The print styles could also include the URLS from links, would make them a lot more useful on paper. See http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/ if that's helpful.
Cassie, I can't seem to cut out the mozteach gravatar out from the .psd's without buggering it up. Could you possibly extract it out for me?
(In reply to Dale Karp (:daleee) from comment #16)
> Cassie, I can't seem to cut out the mozteach gravatar out from the .psd's
> without buggering it up. Could you possibly extract it out for me?

It should be pulling it in dynamically though, from Gravatar... Seems strange to have a cut graphic in there anyway.
The Gravatar version seems to come with a white square background, causing it took like this:

http://dl.dropboxusercontent.com/s/c4cyv5yjs19bhr6/2013-07-23%20at%202.38%20PM.png :\
A few things to fix up:

At 1540px: http://dl.dropbox.com/u/29163874/Screenshots/k1.png
- Remove the break (if we're supporting 1540 a conditional break won't really make sense for people using the template)
- Add a bit of padding to the header .wrapper (40px 0 40px 125px)
- Add padding to the right of the #left-column, about 120px, to reduce the line-length
- center #content with 20px auto

At 1020px:
- center #content wit 20px auto http://dl.dropbox.com/u/29163874/Screenshots/k3.png
Also, as Gavin pointed out, it would be better not to use percentage column widths here, but rather fixed pixels due to sub-pixel rounding
Attached file Design Review, Mark II (obsolete) — 
radiant-atoll-7236.herokuapp.com/teaching

Thanks for the feedback, al. I've implemented most of it.

I'm having a bit of trouble getting the photo in without blowing the flow of everything else up, but it should be done soon *crosses fingers*

Also, the print style is *nearly* done, just needs a bit of tweaking (re: inconsistencies found by Pomax & Brett)

In response to:
> Tags:
> ...
> * How do you plan to link these up? This should be dynamic.

Unfortunately, I don't think we can use any dynamic meta-content in Thimble. Thse tags are just links so just replacing the tag part of the search in the URL should be enough to change what search the tag uses.

> Agenda:
> * background looks diff. than the psd. Did you find this somewhere? As discussed, the items do not need to line up perfectly with the line rules.

I create the whole thing with CSS. Should the items not line up at all with anything in the agenda CSS?
Attachment #777882 - Attachment is obsolete: true
Attachment #777882 - Flags: review?(gavin)
Attachment #780028 - Flags: review?(cassie)
Comment on attachment 780028 [details]
Design Review, Mark II

Looking soooo good Dale! I'm excited to share this with the mentor team. Am liking the way the page stretches too. I know I still owe you mobile view, so will work on that asap after the cross-team meeting. Looks great on retina display.

A few small details:

- The print button icon and text are on one line instead of two, and the button is still too big (looking like 60ish px, should be 45px) - https://docs.google.com/file/d/0BzfN9sXlOXt1MDVXZkR2aFhkeW8/edit?usp=sharing
- the gravatar image is showing up as a square instead of a circle. It should also be clickable (to same place as the name links)
- I like the space between the Tags and the Agenda components. There is less space between Agenda and Additional Resources - can you make this consistent?
- the horizontal space between the tags buttons is greater than the vertical space between them. Ideally they should match (should be 5px space between them, horizontally and vertically)
- like the bullets better, but they are a bit too big.Make them smaller and add a bit more space between the bullets and text.
- the agenda background is awesome, nice work recreating it in css! I do want to be careful of the space we have for the text though, so maybe moving the double lines over to the left a bit. Could actually only be a single line, as in the design, and move the numbers and text to the left as well. Want to leave as much room as possible for the activity names.
- the last dotted line on the agenda background should go the full width of the yellow background.
- the checkboxes are a much better size, i like! But on hover, the check mark icon moves the text over. Can you keep it in a consistent spot?
- can we add a bit more page at the bottom, more blue
- the white page background should have rounded corners at the bottom and a slight dropshadow

Still to-do:
* What does this look like with a photo
* Mobile view
* Print styles

Questions:

I want to push some of the dynamic abilities of this template if possible... This is going to be remixed over and over again by non-mozillians, so if things are not tagged appropriately, that's a big problem in terms of exposing content correctly and the reliability of our search. I have the same concern about making the "maker" gravatar and the "when it was created" features dynamic. Can we huddle heads on this?
Attachment #780028 - Flags: review?(cassie) → review-
It was mentioned in the cross-team call today that we should remove any content that is necessarily dynamic, as folks will forget to update it and that will create a metadata / UX mess. So, let's remove the gravatar functionality. I think people will still like to have a space to "author" their content, so I'd like to keep a space for their name, though we can remove any linkage on the name since people might forget to update the link. Maybe once we get profile pages working we can return to linking up user names.

We should keep Tags in, as they're crucial to giving a quick overview of what the template is – bearing in mind that as we translate this to a remixable template, we should use a single generic tag, like "#Tag instead of the more specific ones in the design, so that people aren't forgetting to update tags in the makes and essentially messing up metadata in the site. We'll need to walk through this to make sure this is actually easy enough to do.

Whenever the template is finalized, we'll need to update this template with generic content (from Laura/ErikaD) in order to close out this bug. We are aiming to do this be end of day Monday, July 29 (if not sooner).

Lastly, as an FYI, we will be creating another page on webmaker.org (webmaker.org/teach-templates) to house all the remixable templates. That'll be happening in bug 897648. It was mentioned it would be pretty awesome to link back to this overview page from these templates, so I've made a new bug for that, one that is dependent upon that section getting designed and built. That'll be bug 897661.

So Laura, please let us know when you have generic content ready to load into this template. Thanks!
Flags: needinfo?(laura)
I put in a copyedit bug 898405 for Erika on the generic content. Will put this as a blocker.
Flags: needinfo?(laura)
Attached file Design Review, Mark III (obsolete) — 
http://radiant-atoll-7236.herokuapp.com/teaching
Includes print, mobile, desktop (large & small) versions!
Attachment #780028 - Attachment is obsolete: true
Attachment #781715 - Flags: review?(cassie)
Cassie, I fixed those two issues we discussed so it's now ready for a review.
No longer depends on: 898405
@Cassie - here's the copy for teaching kit template https://mofocomms.etherpad.mozilla.org/teaching-kit-template-copy

activity template not yet finished, but on it's way to being done.

Mozteach should publish this, should I put this text in and then pass to you for design review? Or do you want to make the make and then I remix to publish from mozteach?
Depends on: 898405
Flags: needinfo?(cassie)
(In reply to Laura Hilliger [:epilepticrabbit] from comment #27)
> @Cassie - here's the copy for teaching kit template
> https://mofocomms.etherpad.mozilla.org/teaching-kit-template-copy
> 
> activity template not yet finished, but on it's way to being done.
> 
> Mozteach should publish this, should I put this text in and then pass to you
> for design review? Or do you want to make the make and then I remix to
> publish from mozteach?

Awesome! Just discussed the handoff with Dale, and he is going to clean everything up, insert your template copy, and leave some code comments with instructions for where/how to edit.

Then he'll send the code to you via pastebin or something, so you can create the raw make in Thimble. Once you have that up, you can go ahead and publish, then ping me to have a look for design review. (Any idea what time that will be? Early EST tomorrow?)

Does that work? We are still aiming to deliver the code for EOD today.

Did you have a photo you wanted to add to the make for the GOOD feature? I could go ahead and look at that now.
Flags: needinfo?(cassie) → needinfo?(laura)
Whiteboard: [mentor] [teaching kit] [aug1] s=20130722 p=1 → [mentor] [teaching kit] [aug1] s=20130729 p=1
Comment on attachment 781715 [details]
Design Review, Mark III

Hey Dale,

Some comments on the mobile styles, a lot of which have to do with spacing and font weight, so if you want to sit side by side to make these corrections I'm happy to do that.

* The text below the header (Tags, Agenda, Resources, what is this kit about, etc) are too close to the left-hand edge. Give it some more breathing room. 20px total from the left edge would be good.
* Am finding the text on the yellow background difficult to read. Can you make it the "regular" text weight?
* Not enough space between each section; add another 20px.
* On Agenda item 4, which breaks into two lines, the line height is too high. See https://docs.google.com/file/d/0BzfN9sXlOXt1cWlpOHRIM1NHWFE/edit?usp=sharing This should be consistent with a two-line item in "additional resources", which looks good right now.
* In the "additional items" list, not enough vertical space between each <li>. 
* In the "additional items" list, finidng this text a too lightweight as well. Is this "regular" weight?
* The body copy under what is this kit about needs a lot more line height. Difficult to read right now as the lines are crammed together.
* Review & Assessment - the text is too lightweight, and the line height between <li>s is too small. 
* Review & Assessment - can we make the check boxes bigger on mobile? Hard to tap right now.
Attachment #781715 - Flags: review?(cassie) → review-
Attached file Design Review, Mark IV — 
http://radiant-atoll-7236.herokuapp.com

Addressed issues in previous design review.
Attachment #781715 - Attachment is obsolete: true
Attachment #782732 - Flags: review?(cassie)
Hi all,

Here is the HTML for the template:
https://gist.github.com/daleee/6110112

CSS is being hosted on stuff.webmaker.org to keep the HTML clean.

Let me know if you have any questions and/or problems!
Hi y'all. Found some stuff while using the template. If you change the template HTML, please keep track of your changes, I have the 6 pages Games kit in this template already:

*Line 18 of the code forgot " around the id:  <div id=teachingkit-banner>

*Checkboxes don't work anymore

*We need a new color for the a:link style for links in the header-group h2 (example: https://mozteach.makes.org/thimble/adventure-time-with-javascript )

*Unordered List text seems too small in the right sidebar (example: https://mozteach.makes.org/thimble/adventure-time ) 

*There's a problem with the wide style and the header h2. See attachment

*Javascript print doesn't work in Thimble, JS is stripped out.

*Design Question: We have "Discussion" in the sidebar. Most of the time this is fine, but in this example, it's kind of not. Should we move to main area?
https://mozteach.makes.org/thimble/hack-a-board-game

@Cassie - Here are all the links for Thursday. NOTE the activities are in the wrong template, we'll iterate when bug 891566 is resolved.

Kit URL, you can get to all the other pages from here
https://mozteach.makes.org/thimble/teaching-kit-a-beginners-guide-to-game-makery 

Activities
https://mozteach.makes.org/thimble/games-in-the-wild
https://mozteach.makes.org/thimble/mini-game-challenges 
https://mozteach.makes.org/thimble/adventure-time
https://mozteach.makes.org/thimble/adventure-time-with-javascript 

Additional Resource
https://mozteach.makes.org/thimble/the-ultimate-gamemakery-tips 

The Teaching Kit Template (with the not-yet-finished most recent text update):
https://mozteach.makes.org/thimble/teaching-kit-template
Flags: needinfo?(laura)
Flags: needinfo?(dale)
Flags: needinfo?(cassie)
Flags: needinfo?(cassie)
I already spoke to Laura on IRC re: some of these things but posting it here so there is a public record!

> *Line 18 of the code forgot " around the id:  <div id=teachingkit-banner>
Thanks for finding that!

> *Checkboxes don't work anymore
So this is an odd issue. When you first copy/paste the HTML in, the checkboxes seem to work in the preview window. Once you publish, it seems the checkboxes break. They remain broken in the preview window if you remix the make. This seems like a thimble issue though :\.

> *We need a new color for the a:link style for links in the header-group h2
> (example: https://mozteach.makes.org/thimble/adventure-time-with-javascript )
Done & updated CSS, should be good now.

> *Unordered List text seems too small in the right sidebar (example:
> https://mozteach.makes.org/thimble/adventure-time ) 
You can fix this by removing the id="resources" attribute from the <section> tag. Any section with the #resources tag will have special styling applied. If you just want a section to re-use for whatever content you wish, just make sure it doesn't have an id tag, or if it does, that the value of it is something new / not currently on the page.

> *There's a problem with the wide style and the header h2. See attachment
Fixed, uploaded new CSS.
 
> *Javascript print doesn't work in Thimble, JS is stripped out.
Please remove this from the templates:
    <a class="print" href="javascript:window.print()">
      <i class="icon-print"></i>
      <span>Print</span>
    </a>
I'll post a link to an updated version of the template at the bottom of this comment.
 
> *Design Question: We have "Discussion" in the sidebar. Most of the time this
> is fine, but in this example, it's kind of not. Should we move to main area?
> https://mozteach.makes.org/thimble/hack-a-board-game
Seems like you could copy a lot of the HTML from the 'review' sections. I'm no designer but it seems like a good fit for that content. The review HTML is in the main area so it should be a simple matter of copy/pasting the HTML and changing the contents.

Newest version of template: https://gist.github.com/6115125
I'd really like to move this template into it's own repo for version control goodness, BTW.
Flags: needinfo?(dale)
* @ Dale: I made some modifications here: https://openmatt.makes.org/thimble/teaching-kit-template
* @ Laura: have a look and see what you think about copy?
* @ Cassie: can you do the same, + review for UX & design?
Matt - there were a couple mistakes, which I fixed. I also added some more comments in the HTML for people who are HTML/Thimble newbies (just the standard intro and soem "hey this is an H tag" kind of comments).

Finally, I'm confused by the two new wiki pages. Why 2? The "how to create a teaching kit like this one" is covered in the template? The other page "Pro tips" should be renamed to just "Tips and tricks..." (don't want to turn people away who think "well I'm not pro, just winging it", feel like "pro tips" is jargony, internal, and not inclusive)

https://laura.makes.org/thimble/teaching-kit-template
Flags: needinfo?(matt)
Re Matt's template: https://openmatt.makes.org/thimble/teaching-kit-template

* The title looks like it's being pushed down. It should have equal space above and below it... More like on https://radiant-atoll-7236.herokuapp.com/teaching
* The photo should be a circle. This should be done with the CSS, right?
* Not sure if fixing the photo will fix this (probably it will) but the header text also seems too far over to the right
* On the "Your name" link – might change the copy to: Your webmaker name. Include in the code comments that you'll need to update the end of the link so it doesn't still search for mozteach
* The Help and support bullets should look the same as the Additional Resources bullets. Looks like if you change the id back to "resources" it fixes it (there is no id for "help" as far as I know)
* Assessment criteria appears to be missing the blue/grey background. I assume this is a missing id? Because the "assessment" title also looks like the wrong style.
* There's some inconsistency in the headlines - should all be Title Case or just capitalize the first letter... as long as that's consistent
* Might include code comments about manually linking up the correct tag searches.

Dale, can you grab some help from someone more familiar with Thimble (maybe Scott??) to find out what's happening with the check boxes? Ideally we can get those working, but if we can't, would probably be better to change the icon or turn them into bullets.

Re. Laura's make here: https://mozteach.makes.org/thimble/adventure-time-with-javascript

I know we're squeezing this into the Teaching Kit template when it should be activity, so some of this should ultimately be moot, but thought I'd advise anyway:

* I might figure out how to make the steps into headlines, so repeat the green headlines with a 1. and a 2. in front of them, just so the content isn't indented throughout because it is in a numbered list. Or just take it out of the <ol>. I know you'd have to number manually, which sucks, but might give the page a slightly better structure.
* Are the videos going to ultimately be the small thumbnails in the activity template? Maybe an alternative is to embed them into the page at a larger scale, as you have here, but even slightly wider so they are actually full-width. 500px might be a good width to aim for if you can change that on the embed code.

Looking good guys, excited to see the final results!
Flags: needinfo?(dale)
(In reply to Laura Hilliger [:epilepticrabbit] from comment #36)

> I'm confused by the two new wiki pages. Why 2? 

* Maybe you're right -- maybe we just need one good piece of documentation here, instead of two. 
* My original thinking was: a) instructions for people on how to perform the steps required in Thimble. and then b) tips on *content* and pedagogy. But let's just combine those into one, like you're suggesting.

+ 1 to all else.
* Ok so process wise: 

** I'm going to review Laura's version here:
https://laura.makes.org/thimble/teaching-kit-template

** then remix it to address Cassie's points above. Plus try to shorten Laura's code comments a bit. 

** then will update here for final review
Flags: needinfo?(matt)
(In reply to Cassie McDaniel [:cassiemc] from comment #37)
> Re Matt's template: https://openmatt.makes.org/thimble/teaching-kit-template
> 
> * The title looks like it's being pushed down. It should have equal space
> above and below it... More like on
> https://radiant-atoll-7236.herokuapp.com/teaching
> * The photo should be a circle. This should be done with the CSS, right?
> * Not sure if fixing the photo will fix this (probably it will) but the
> header text also seems too far over to the right
These three are odd, especially considering that when I copied/pasted the template into Thimble and turned the image on, it seemed to work fine, as seen here: https://bsb.makes.org/thimble/teaching-kit-marktwo

> * The Help and support bullets should look the same as the Additional
> Resources bullets. Looks like if you change the id back to "resources" it
> fixes it (there is no id for "help" as far as I know)
Because an id in HTML is supposed to be unique and only used once within a page, you can replicate the style of the id=resources sections by adding class="teach-list" to the <section> you want to style like that.
eg: <style class="teach-list">

> * Assessment criteria appears to be missing the blue/grey background. I
> assume this is a missing id? Because the "assessment" title also looks like
> the wrong style.
Similarly, you can also use class='teach-checklist' on a section to replicate the style used in section id=review. 

For both of the new classes above, just make sure you copy the same HTML structure as in the template when using these new classes and you should be good! Let me know if you have any issues. 

> Dale, can you grab some help from someone more familiar with Thimble (maybe
> Scott??) to find out what's happening with the check boxes? Ideally we can
> get those working, but if we can't, would probably be better to change the
> icon or turn them into bullets.
Yup!
Flags: needinfo?(dale)
Re. the classes vs. ids – I think these should all be classes. Users won't know to use a different class than what is already in the template, and as these are supposed to be reusable "components" I think this is worth republishing the html.

Let us know what you find out about the circle photo.
* I have created an updated version here:
============================================================
https://openmatt.makes.org/thimble/your-teaching-kit-title
============================================================

A few notes for finishing touches:

@ Laura: 
1) Code comments. I really like your addition of a welcome comment with context at the top. Makes it less overwhelming for newbies. I've shortened the rest for simplicity and crispness. Let's keep the HTML coaching to a minimum -- and push it to the supporting documentation where needed? 

@ Cassie:
2) ADD A STANDARD DEFAULT HEADER IMAGE? I think it would be great to have a generic placeholder image that is included in this template. It could just be the Webmaker logo, or a generic icon like the ones you're using elsewhere on the site. This would surface the fact that header images are supported, and also 
make for easier user experience. Since adding their own image would just require users to swap in a new img src -- instead of having to un-comment code. Thoughts?

@ Dale:

3) Title looks pushed down. As per Cassie's comment above. Not sure if this is still an issue. Can you check and fix if needed?

4) The "Your name" link. I've included a new placeholder URL here: http://yourwebsite.org. 

5) Assessment criteria is missing the blue/grey background. Dale can you fix?
One question about how we're using TAGS here

* I just realized that we require users to manually paste in the Webmaker search URL for every tag they include

* I know we're going for MVP here, but I think that's pretty arduous user experience. And my guess would be that very few users would bother to do it. 

* It's counter-intuitive, fairly labor-intensive, and not really consistent with how tagging tends to work on the rest of the web. 

* Cassie: what do you think? Is there some way we can make this easier?
I'm working on making everything more modular/re-usable by converting the ids to generic classes, you'll be able to do things like make a section a class="checkbox-list" and it should give you the CSS to make those checkbox areas.

Also filed a bug re: the checkboxes breaking once published https://bugzilla.mozilla.org/show_bug.cgi?id=900161

Re: the circle photo, as I said above, I'm not sure. In the the make I linked, I have a photo and it works fine and I'm fairly certain I haven't changed the markup of that area.
>>Code Comments. Let's keep the HTML coaching to a minimum -- and push it to the supporting documentation where needed? 

The Mentor Community definitely understands and uses the concept of code comments to help them learn and edit HTML. We should include strictly HTML tips IN the HTML. I suggest adding back in the basic "this is a <p> and this is what that means", <h1 - 6>, <ul>, <li> comments, and using the supporting doc for MOAR and ped stuff.  

>>2) ADD A STANDARD DEFAULT HEADER IMAGE?
Agree, maybe use the Mozteach version of the logo (monochromatic red)

>>Tags
Yeah, MVP got rid of all the cool dynamic stuff. Should we just use them on Mozteach stuff?

Finally, the #help ul li style needs changing (it indents, looks like an error), under tips and tricks on Matt's version.
(In reply to Laura Hilliger [:epilepticrabbit] from comment #45)

> I suggest adding back in the basic "this is a <p> and this
> is what that means", <h1 - 6>, <ul>, <li> comments.

* Can we save this for user testing? ie, add it back in if users request it? Our over-use of code comments in Thimble is a recurring complaint. Trying to push us to err on the side of radical simplicity and less is more. :) 


> >>2) ADD A STANDARD DEFAULT HEADER IMAGE?
> Agree, maybe use the Mozteach version of the logo (monochromatic red)

+1 
 
TAGS
> Yeah, MVP got rid of all the cool dynamic stuff. Should we just use them on
> Mozteach stuff?

+1 
Lets keep the tags as is -- with the understanding that this is a fairly high bar to start, and may primarily rely on *us* to do tagging right to start. 


> Finally, the #help ul li style needs changing (it indents, looks like an
> error), under tips and tricks on Matt's version.

* I can't seem to fix this. Dale, can you?

* Updated version is here:

===========================================================
https://openmatt.makes.org/thimble/your-teaching-kit-title
===========================================================
* I've made some proposed improvements to the "TAGS" section:

1) CHANGED DEFAULT TAG URL. I've changed it from "#" to this: 

<a href="https://webmaker.org/search?type=all&q=your_tag">#tag</a>

* this way, users can replace "your_tag" in the URL with their tag (e.g., HTML, CSS, storytelling, foo) to point it at the right search URL.  

2) ADDED "HOW TO" CODE COMMENTS

* added this: 

 <!-- HOW TO USE TEACHING KIT TAGS
Proper tagging is coming soon! For now, please manually enter your tag: a) in the "#tag" space below, and b) in the URL where it says "your_tag" -->

* does that help?
* @ Cassie: if you're down with the default image idea, can you provide a URL we can include?
Flags: needinfo?(cassie)
Depends on: 900596
(In reply to Matt Thompson (@OpenMatt) from comment #48)
> * @ Cassie: if you're down with the default image idea, can you provide a
> URL we can include?

I'm hesitant to use the mozteach logo for this as default, because I still think we want to keep the 'mozilla-approved' type of content as separate and special. I wouldn't want to see users muddling this message by using the logo where it shouldn't be used. I think that would be *fine* to use as a default for our own content but wouldn't want to use that in the template.

I have filed a new bug for the template asset: bug 900596
Flags: needinfo?(cassie)
Blocks: 900601
(In reply to Cassie McDaniel [:cassiemc] from comment #49)
> I'm hesitant to use the mozteach logo for this as default

* Okey doke. Any image or illustration you think's best would be just fine.
* I think that placeholder image is the final blocker for closing this ticket.

* Given that that's the case, Dale, do you want to start a review and any final steps on this?

===========================================================
https://openmatt.makes.org/thimble/your-teaching-kit-title
===========================================================
We still need to figure out what's going on with the checkboxes and the review and assessment background, too.
* Good catch, thanks Cassie
* Dale: are you able to fix those?
Matt, I fixed the header content not being centred but to me, the lists on https://openmatt.makes.org/thimble/your-teaching-kit-title are looking pretty good to me. What else did you want me to fix?
@ Dale: Cassie mentioned that the background color for the review section still isn't quite right.

@ Cassie: any other fixes before we put this to bed as the definitive version: 
https://openmatt.makes.org/thimble/your-teaching-kit-title

?
It would be helpful to know what the background colour for the review section *should* be rather than knowing what it shouldn't be. The PSD says the colour code for that section's background is #e3eaee, which is exactly what I have in my implementation, so I'm not quite sure what colour is off.
Flags: needinfo?(cassie)
@ Dale: I'm not seeing any background color box around Review and Assessment at all
* What link should I be looking at? This one?
https://openmatt.makes.org/thimble/your-teaching-kit-title
@Dale - yes, I'm not seeing the background either, that was what I meant.
Flags: needinfo?(cassie)
Attachment #782732 - Flags: review?(cassie)
Hey all,

https://bsb.makes.org/thimble/remix-of-your-teaching-kit-title-mk-2

I fixed up the CSS & HTML structure of Matt's template, and added some comments. IDs are no longer required; all styling has been moved to classes or the structure of the actual HTML.

Hopefully this helps! Keep in mind that changing the structure of the HTML at all could potentially break the design, so if you need more sections, try to copy & paste the <section> tags and if you can, just change the text, not the tags / tag structure. If you need to have more freedom, let me know and we'll try to work something out.
Great, thanks Dale!

This fixes the background issue. It works in Chrome but breaks the "Agenda" component on FF - can you cross-browser (and mobile) test this template pretty please?
I've recreated the "official" template on Mozteach, as well as the teaching kit for games. I haven't started any of the other transfers!

The only issue I see (@Cassie, I don't see anything wrong with the Agenda) is the header image shifting.

FF: http://i.imgur.com/RlAo8NW.png
Chrome: http://i.imgur.com/EmaRXoO.png

https://mozteach.makes.org/thimble/teaching-kit-template
https://mozteach.makes.org/thimble/teaching-kit-a-beginners-guide-to-game-makery

I'm also confused by: 

1) this template (and anything made with it) seems to disable the users ability to click in the preview window and see the code highlighted.
2) in Firefox you have to clear your cache to update the display (hard refresh doesn't work), but when you hit remix the code is already updated.
Also FYI - at the TOP and BOTTOM of the template, in the code (and comments), I've changed the URL for the tips/tricks documentation to: http://mzl.la/teachingkit-tips which leads to the SUMO article
Hey Laura,

That header issue should be fixed in Chrome & Firefox; currently attempting to make it look right in IE10 & Safari. Oh, cross-browser-ness...

As for those two points are the end, I'm not sure about those; they seem to be Thimble-related and I don't have much (or any) experience with Thimble code. :\
* so close! looking great :)
* what issues are still outstanding before we can close this ticket?

1) cross-browser and mobile testing. Dale: is this complete?
2)  placeholder default image. Cassie: do you have one you want us to use? Or are we just using the photo of the kids gathered around the laptop.
3) Laura's two issues above. Laura: are those blockers for this? or do they need to be files as separate Thimble bugs?
4) anything else?
Hi all,

I believe I've resolved all the style related issues... please let me know if you're still experiencing them. I've tested across all supported browsers & devices and it's looking good!

Laura: I'll look into that Thimble issue.
All that's left is the default image question (@Cassie) and QA. W00T!

@Dale - don't worry about the Thimble issues, Humph let us know what's going on there in a meeting yesterday (e.g. it's NOT the template, and Devs are aware).

THIS IS THE MOST RECENT and COMPLETE TEMPLATE (2 URLs and the Title are different from Dale's!!)

https://mozteach.makes.org/thimble/teaching-kit-template
Flags: needinfo?(cassie)
Looking good! Dale and I plan to go over any remaining items in person for the two templates, will send an update end of day.
Flags: needinfo?(cassie)
https://bsb.makes.org/thimble/teaching-kit-template-final

Final template. Please open a new bug if there are any more issues!
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
@ Dale: as per our discussion, can you paste in the sample copy and code comments back in from this:
https://mozteach.makes.org/thimble/teaching-kit-template

* also: where did we land with the default image? we can't ship this as a completed template with a nicolas cage image :)
@ Dale: if that links give you a 404, see Bug 904528
@ Dale: can you paste that copy into the template so that we can share this with the world? :)
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Whiteboard: [mentor] [teaching kit] [aug1] s=20130729 p=1 → [mentor] [teaching kit] [aug1] s=20130729 p=1 [mentor work sprint]
https://bsb.makes.org/thimble/a-teaching-kit-template Here it is.
Status: REOPENED → RESOLVED
Closed: 11 years ago → 11 years ago
Resolution: --- → FIXED
Attachment mime type: text/plain → text/x-github-pull-request
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: