Creating Tutorials

Creating Examples and Tutorials

At the moment, netnet's "Internet Artists' Guide" (the learning guide) has a section for examples, another for tutorials and then an appendix with links to various netnet reference widgets. This wiki explains how to use netnet's built-in meta-widgets to create interactive code examples as well as hypermedia tutorials. Creating new reference widgets for addition to the appendix is a bit more of an involved process (no meta-widget for this, you'll need to write some code), see Creating Widgets for more on that.

creating and sharing a "sketch"

The quickest way to start working on an interactive code example is to go straight to netnet's editor: https://netnet.studio/#sketch and start writing (or copy+paste) some code. Once you've created something you want to share with a friend, student or collaborator use the save shortcut (ctrl + s or cmd + s on Mac). Using this shortcuts saves the code currently in the editor into netnet's local session data (see Data Privacy for more on that), but netnet will also give you the option to "share" this sketch, choose the "Can I share this sketch?" option and netnet will open the "Share Widget" which you can use to create a shareable URL that you can copy+paste anywhere. This URL contains a compressed version of the code itself (see Anatomy of a netnet URL for more info on that), this way examples/sketches can be shared with others without the need to create accounts or store any data on our servers (unless you choose to shorten the URL, which can be helpful especially to generate a QR code you can use to quickly test your sketch on a mobile phone).

Sharing sketches with students and collaborators via netnet is great because not only can it be used to quickly ping-pong remixes back and forth, you can also take full advantage of all of netnet's helpful features, like friendly error messages and double-clicking any piece of code to have netnet explain it to you.

creating an annotated sketch

Developers have been annotating their code with "comments" for years, but if you're an educator looking to annotate interactive code examples in a more beginner friendly way you can use our Demo/Example Maker widget. This widget let's you annotate your sketch and create a special link where netnet is used to explain the code in its editor step by step.

Here's a simple example of what an annotated sketch looks like.

Because annotations, which show up as netnet dialogue, are written in HTML which means they can be styled and include links (both to external sites and internal netnet references) as demonstrated in the example linked above. In that example you'll also notice netnet can highlight specific lines in the editor to draw attention to them at any particular step/annotation. Additionally, you can choose which layout you'd prefer netnet to be in when you share the example as well as whether or not to include an optional "table of contents" widget with your example which lists each of the annotations or "steps" (these can also be accessed by clicking the green dots next to the line numbers in the editor if/when the table of contents isn't present)

To create these, navigate to https://netnet.studio/sketch to get started with a new sketch and then open the Demo/Example Maker widget with the ctrl + 4 (cmd + 4 on Mac) shortcut key. You can also use that shortcut to open the widget on a pre-existing example to edit those annotations.

The Demo/Example Maker widget contains a drop down list of "steps" (or annotations). An annotated sketch needs at least 1 step which is named "getting started" by default, but you can change this by editing the content in the step title field and pressing the update this step button. New steps/annotaitons can be added by clicking the add new step button or removed by clicking the remove this step button (warning, there is no "undo"). Each step contains three fields...

field	explanation
step title	this title appears in the Code Example widget's Table Of Contents, these can be clicked to jump to that annotation
line numbers	You can optionally choose to have netnet focus on (spotlight) a particular section of your code by specifying the line numbers (comma separated) of the code you'd like to highlight
explain step	The text you type into this field is the content that will show up in netnet's speech bubble. This can include HTML code (like <code>, <b>, <i> and <a> elements)

To share your annotated code example with someone simply press the generate link button and then click on the generated link to copy it. The URL itself contains not only your compressed code but also all the annotation data.

Creating Interactive Hypermedia Tutorials

WARNING: THIS PART IS STILL WORK IN PROGRESS

In netnet v1.0, creating a new interactive hypermedia tutorial involved writing a lot of code. But I've been working on some tools for being able to generate all the necessary metadata using widgets/tools built right into netnet! You can check these out by opening up https://netnet.studio/ and pressing:

• ctrl + 3 (or cmd + 3 on Mac) to open the Netitor KeyLogger widget, which can be used to record whatever you type into the code editor (which can later be played back in the interactive tutorials)
• ctrl + 2 (or cmd + 2 on Mac) to open the Live Streeeeeeeamz widget, which is used to record the video (talking head) for tutorials as well as optionally also record whatever you type (like the KeyLogger) while recording that video so that your code/typing can be played back in sync with the recorded video.
• ctrl + 1 (or cmd + 1 on Mac) to open the Tutorial Maker widget, which is used to create a new tutorial from videos and keylog data generated with the previous widgets. This widget is used to create the tutorial's metadata as well as add keyframes for any pop-up widgets and/or code highlights during the tutorial.

This system is still very very rough around the edges, it can only really be used locally (see Setting up a local environment), but if you're curious to give it a try you can check out our internal tutorial for making tutorials.