I can take no credit at all for the development of the tutorials pane of Thimble (that goes to Tom Park for development and Pomax for reviewing), but I was so excited by it that as soon as it was pushed out into production (before it was officially announced), I decided to try it by “converting” one of the existing starter makes.
A Little Background
I don’t know the whole story, but I do know the tutorial addition to Thimble has been in the works for quite a while. In particular, a lot of user testing was done to par down the choices, then again and again, to refine the chosen model to its “final” version. Bonus: Tom wrote up the process on his blog along with the prototypes he did.
The Old Way vs. The New Way
Starter makes (basically templates with instructions to help) are a great way to get people started on making webpages. However, because there was no tutorial feature, all the instructions were done using HTML and CSS inline comments.
There were a number of issues with this method of providing a tutorial to users using inline comments. By separating the tutorial from the code, you can immediately see a number of benefits (image below):
- ability to hide tutorial instructions (e.g. if you’re already familiar with HTML/CSS)
- cleaner code (without all the comments)
- shorter code, meaning you can see more of the actual webpage code
In addition, some nice added bonuses with the tutorial feature:
- instructions are chunked into manageable blocks (makes it easier to process)
- instructions can point to specific lines of code (as seen in the screenshot above)
- make it look nicer e.g. use actual links instead of having to paste the URL into the instructions
- you can do a lot more, because it’s just a normal webpage
A Simple Process
The great part of the tutorial system is that it’s very easy to do your own. Check out the tutorial make to start making a tutorial and for the full set of instructions.
If you want to modify an existing make into a tutorial, simply add the code below into your <head>,
<!-- this stylesheet provides default styles for tutorials -->
<link href="//thimble.webmaker.org/learning_projects/tutorial/tutorial.css" rel="stylesheet">
<!-- these scripts turn your make into a tutorial -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//thimble.webmaker.org/learning_projects/tutorial/tutorial.js"></script>
<script>
jQuery(document).ready(function($){
$('body').tutorial();
});
</script>
then:
- Separate your instructional text into <section>s.
- Publish your tutorial.
- Add your tutorial to a make by tagging that make with tutorial-{your tutorial link}. You can even add more than one!
That’s it!
Converting Some Starter Makes
I thought I would give it a try by “converting” the most popular starter makes. In both cases, I kept most of the tutorial the same with some changes to the wording to fit the tutorial. I also cleaned up the inline instructions and the code just a little.
The Keep Calm tutorial was actually the second one I did, but is simpler. If you remix my version of the Keep Calm Poster make, the tutorial is not integrated.
When I did it with the movie poster starter make, I made a couple of other changes, namely:
- changed the order of the tasks to start with the easiest (change title & subtitle)
- added changing the background image (because that’s a big part of a movie poster)
For these reasons, the Movie Poster Tutorial will look a little different, but otherwise, the Movie Poster make is the same.
What Next?
Use it!
One of the big things that needs to be changed is having a different way to refer to the source code, because the tutorial in a remix of a remix will no longer necessarily have the same line numbers and they are not automatically updated.
If you have any feedback, consider filing a bug or you might tweet at Thomas.
Learning (Lib)Tech 
2 thoughts on “Webmaker: “Education Friendly” Tutorials in Thimble”