This intent of this guide is to help researchers find information and examples of teaching programming interactively on the web vs. traditional computer science methods of teaching programming.
It used to be true that not everyone working in a technology sub-discipline needed to know how to express solutions to problems as code. Data architects, systems administrators, desktop publishers, and even computer animators, didn't necessarily have to know how to write software to get their job done - but that is becoming less and less true each year. Many non-programming jobs now strongly encourage applied knowledge of scripting languages, such as HTML/CSS for document creation that used to be done by sharing Word documents, Python or Ruby and RDBMS integration for data analysis that used to happen in a simple spreadsheet, and bash/*nix for efficient machine and environment maintenance. The underlying foundation required for solving problems with code is analytical thinking, but due to rapid implementation and syntax changes, simply learning theory is not going to be enough for most people to be able to make the leap to applied knowledge. By exposing students to analytical thinking by way of using code to solve problems, we can better prepare them for a lifetime of rapid technology changes.
Bennedsen, Jens, Michael E. Caspersen, and Michael Kölling. Reflections on the Teaching of Programming: Methods and Implementations. Berlin: Springer, 2008. Kindle.
Bennedsen, Caspersen, and Kölling organize the result of several separate research projects and classroom observations about teaching and learning programming. The work is presented in 4 sections covering introductory programming, object-oriented programming, software engineering, and assessment. Each chapter is essentially an isolated paper, and while the book as a whole is language-agnostic, each chapter usually uses one language for examples. Although somewhat dated (published in 2003), the book has many useful insights, and serves as an example of a good format for future updates.
Papert, Seymour. Mindstorms. Brighton: Harvester, 1980. Print.
A seminal text for computer science educators, Papert's Mindstorms is as much about teaching as it is about computing. The material is presented with children as the main example, but adult readers should replace children with novices to apply the work to their domain. One tangible artifact from the book is the Logo programming language, which was popular in classrooms in the 1980's and 1990's for integration with the Turtle Graphics drawing tool. Papert follows a strongly constructivist approach to learning, stressing that the material being learned can't exist separate from the learner, but he also lays out a vision for a future where algorithmic thinking drives modern education.
Guo, Philip. "Teaching Programming the Way It Works Outside the Classroom." Web log post. Communications of the ACM. ACM, 7 Jan. 2013. Web. 20 Feb. 2014.
The article details a 6 step process for teaching programming in a way that is synonymous with how programmers actually engage with projects outside of the classroom. The main differences are that code reuse is seen as a necessity, not something to be avoided as it usually is in a learning setting. The hunt for reusable code eventually leads to more social coding as programmers fit the pieces together, so this approach has roots in social learning theory.
Victor, Bret. "Learnable Programming." Learnable Programming. N.p., n.d. Web. 18 Feb. 2014.
A short editorial that distills the problem with some programming education as the dichotomy between students that want to learn software development skills to get jobs vs. the professors that are more interested in lower-level research and specialization. The article uses the metaphor of music instruction to describe how a programmer must keep the complexity of a program they are currently analyzing in their head, yet be aware of how other parts of the program might interact with a future state.
Kak, Avinash. "Teaching Programming." Editorial. https://engineering.purdue.edu/kak. N.p., n.d. Web. 19 Feb. 2014.
A set of principles for designing environments that make learning programming effective. The key argument is that learning environments that hide away parts of the implementation and/or execution are lacking, even if those parts are normally hidden while a programmer works. This insight suggests that the design of such learning systems should avoid hiding implementation details, which may come at the cost of an increasingly complex system.
Reek, Margaret M. "A Top-down Approach to Teaching Programming." ACM SIGCSE Bulletin 27.1 (1995): 6-9. https://www.cs.duke.edu. Web. 17 Feb. 2014.
This paper describes an interesting approach that is different from traditional programming education. Using a top-down approach would mean that students would first be exposed to actions and abstractions of data, and then eventually learn how to write the syntax to represent those abstractions in code. The author uses Eiffel instead of a language like Java or C++ to teach abstractions and control flow, and only when those concepts are understood by learners does she introduce a formal imperative language like C++.
Robins et al. present research into teaching and learning programming. A framework for expressing the difference between experts and novices across the domains of knowledge, strategies, and models is outlined across the traditional program planning phases of design, generation, and evaluation. The authors conclude that while there is much educational research about analytical learning, it is not usually applied in the classroom in favor of a syntax/language-learning approach.
Wong, Wai-Tak, Chou, Yu-Min. "An Interactive Bomberman Game-Based Teaching/ Learning Tool for Introductory C Programming." Technologies for E-learning and Digital Entertainment: Second International Conference, Edutainment 2007, Hong Kong, China, June 11-13, 2007: Proceedings. Berlin: Springer, 2007. 433-44. Print.
Wong and Chou discuss the creation of a proprietary game to teach C programming. One unique thing about this project is that while similar efforts only include the bare-bones functionality, this game goes so far as to include scriptable graphics and sound, which increases the replayability and range of material covered during the learning experience.
Since learning to program interactively in a web browser is a relatively recent innovation made possible by advances in browser scripting technology, sometimes the methods and approaches taken when teaching are best experienced first hand as critical research may be unpublished. This is a list of some of the best examples of programming being taught interactively.
http://learn.code.org. N.p., n.d. Web. 25 Feb. 2014.
What started out as a PR move by several tech companies has grown into a strong curation of resources for learning to program. One such resource is a small set of interactive programming tutorials. While other interactive tutorial platforms focus on teaching material that is directly applicable outside of the sandbox environment, these tutorials purposely sandbox everything using the Blocksy platform, and they use partnerships with companies like Rovio and PopCap to include Angry Birds and Plants vs. Zombies characters so the learning is more enticing to younger students. Ultimately the goal of the tutorials is to get people excited about coding, unlike other resources that are focused on learning a specific set of steps or skills to complete a specific task.
http://codecombat.com. N.p., n.d. Web. 25 Feb. 2014.
Khan, Salman. http://khanacademy.com/cs. N.p., n.d. Web. 25 Feb. 2014.
Khan Academy is well known for their free videos covering a wide range of topics, but they are also experimenting with interactive programming lessons. The current set of lessons are about writing code to draw things on the screen and interact with them. Another unique thing they offer is a few innovative web tools, such as code talk-throughs, which pair a video-like player with a panel containing code, and the code is magically "typed" during playback and all panels update when scrubbing happens.
Pollack, Gregg. http://codeschool.com. N.p., n.d. Web. 24 Feb. 2014.
Sims, Zach, and Ryan Bubinski. http://codecademy.com. N.p., n.d. Web. 25 Feb. 2014.
Codecademy is a site that contains user-submitted interactive tutorials for learning to program. The site doesn't offer any video tutorials, and instead is driven completely by reading text either in a code editor or in a panel on the left side of the screen. The unique thing about Codecademy is that users can submit their own tutorials and interactive code challenges, although a small sampling of the lessons showed that the quality of those tutorials varies.