Back in my teaching days, we had a ninth hour elective class where students could take classes like computer repair, plumbing, ceramics, or guitar. In essence, as teachers, we got to teach classes based on our own hobbies. At the time, I was doing a lot with some basic web design, and thought it would be fun to work with students on some basic HTML and CSS principles. The class expanded horizons pretty quickly, and by the end of the semester, I had students working on everything from vector graphics (which I have no understanding of), PhotoShop, JavaScript, and Python in addition to HTML and CSS.
Part of where I struggled was writing up files for demos and examples each day for a lesson. Rather than writing out entire documents and refreshing the browser to see the effect, I start by prototyping in services like CodePen or jsFiddle.
Why Rapid Prototypes?
Our brains can handle a limited number of inputs to complete a task. When you’re learning something new, you have a lessened ability to think creatively, problem solve, or abstract. With coding, there are a lot of details which must be in place before the website or script will run properly. It’s important to teach syntax standards and proper formatting, but when I have them experimenting with ideas, the structure of the whole document isn’t nearly as important.
The same is true for you as you’re working with students. At times, all you want to do is show a quick concept or solve an isolated problem. Rather than firing up a development environment (IDE), you can get right into the meat of the question. Prototype environments help you get to the root issue and communicate quickly and effectively.
Examples
There are two I use regularly: CodePen and jsFiddle. They both do the same thing: allow you to prototype some HTML, CSS, and JavaScript in one window while giving a preview of the output as it appears on the web. Both work well and have similar features, but I tend to prefer CodePen because of it’s profile-based use, auto-updating preview, forking (remixing), and embedding abilities. When a student had an issue or a particularly interesting prototype, I could use it in my own example or highlight it on the class website.
An example embed from CodePen:
See the Pen LfiqI by Brian (@bbennett) on CodePen.
What About Screencasting?
Curating examples is a tough task. I don’t want to create every sample myself because 1) students tend to copy what I do, and 2) I don’t have time to do that. Using the embed and sharing function of CodePen, I can use student demos to teach particular concepts. Think back to when your teachers would use a student writing sample (with the name blocked out, of course) to highlight teachable moments. Using screencasts, I can do the same thing.
One way to approach this is to have students screencast their own thought process. Students write up their code and then fire up something like Snagit for Google Chrome and talk through their code. Verbalizing their thought process helps strengthen communication skills and abstraction around their work. Reflection on their work is also valuable for both the teacher and the student because it builds up common threads of discussion.
Another easy way to get started building an example library is to record Q&A sessions. Let’s say a student is working on a problem they can’t solve, and they call you over. Before you answer their question, open a screen recorder so you can capture whatever feedback, ideas, or examples come out of it. You now have another video which can be used as needed with other students.
Expanding the Idea
I know this is written from a computer science point of view, but rapid prototyping can play a significant role in many situations. In the science classroom, students used neon whiteboard markers on our lab tables to solve problems before copying their final work over. In English, students can do quick concept maps or plot maps when discussing a piece of reading. The idea isn’t limited to the visual real, either. Students can improvise on a theme in music or play with ingredients in Home Econ.
The main idea is to remove barriers to creativity. Structure can be reinforced continually, but it often gets in the way of innovation and exploration. How do you encourage students to be creative in their learning? Leave more ideas in the comments!
The featured image is a creative commons licensed ( BY-SA ) flickr photo shared by torres21
The post Teaching with Screencasts and Rapid Prototyping appeared first on TechSmith Blogs.