Computer Programming - Designing Interaction Across the Curriculum
Ways to Introduce the Foundational Language of Cyberspace and the Digital Age
Computer programming is the paintbrush that has composed every other form of "digital paint", creating our editors for everything from writing text to composing video to building robots and games and developing highly interactive social media, which in turn makes everything seen and experienced online. The power of computer code to build ever more complex designs from very simple ones is a key part of that power, as with the Turtle graphics design to the left. Computer programming has broad cross-disciplinary application and for many, a valuable career path.
These thoughts will introduce some of the fundamentals of programming, including information that will have you completing and running a Turtle Graphics computer program in a very short period of time. The next step is to pick one of several fine beginning points to learn a computer programming language. Good starter programming languages include Scratch, Python, Javascript, Lego WeDo and Lego NXT Mindstorms along with other resources that will be discussed below.
Introduction
Computer programming is the foundational language of cyberspace and the digital age. Not only has it found practical uses in serving as a tool maker for all the media tools of communication, but the process focused nature of computer programming has enabled it to serve as an ally in the processes of all content areas. This digital palette graphic on the left represents the wide range of tools now basic to communicating and turning our questions into problems being processed. Each palette element is now routinely part of Web pages, all made possible by programming, all elements of the transformation of what it means to be literate in the 21st century. The element of the palette most neglected by educational systems is computer programming, the paintbrush that has made all the rest of the digital palette possible. Wing, head of the computer science department at Carnegie Mellon, has argued that "(c)omputational thinking is a fundamental skill for everyone, not just for computer scientists. To reading, writing, and arithmetic, we should add computational thinking to every child’s analytical ability" (Wing, 2006, p. 33).
The "turtle" drawing that began this article to emphasize the power of modular thinking was created by tinkering or playing with the geometry commands that come from the Logo programming language. Many of the Logo languages features as well as primary concepts of computer science and computating thinking can be introduced and learned in minutes. Within minutes the product of this learning and programming can produce an image and have it inserted into a page visible on the Net. However, not only does computer programming help create the many forms of information for display on the page, it is also pushing the concept of page through a rapid transition to something much broader and deeper.
It is quite obvious to denizens of the Net that a single page can contain all of the different types of media currently in use on the digital palette though they are often distributed across many Web pages. This text and other media content of a page has always been the visible tip of the iceberg. A set of page display code composes every Web page using what is called HTML (hypertext markup language) which first emerged in 1993. Programming code, such as Javascript, has been added behind the surface display of a Web page's media and text since 1995. Like HTML, the programming code is invisible to the reader but present within the lines of the hypertext markup language that lays out the information on the page. The brief demo below uses code for text, user input, a variable and if conditional logic.
With the latest expansion of Web page design called HTML5 that has come to the forefront since 2010, all elements of the page are open to manipulation by embedded computer code. Browse some demos at Apple HTML5 showcase; Remy Sharp's HTML5 demos; and Falcon's HTML5 showcase. In short, as Sir Tim Berners-Lee, creator of the World Wide Web, has observed (Berners-Lee, 2013), every Web page now has the potential to become a kind of computer. That is, each Web page has the capacity to collect, store, retrieve, and process data independent of being connected to a server.
As literacy is the capacity to understand and compose what goes on a page, the digital age continues to move the goal posts for fluent literacy ever higher for all of us. But as that bar is raised, the opportunities for those becoming fluent continue to rise. Those opportunities are not just personal, they are global. Vanessa Hurst is the co-founder of GDI (Girl Develop It). Among other technology leaders who speak in the short five minute film below, she noted: "I think if someone had told me that software is really about humanity, about helping people by using computer technology, it would have changed my outlook a lot earlier" ("What Most Schools Don't Teach", 2013).
The field of computer programming and computer science has an important place in our culture, but it cannot solve all problems (Houghton, 1989). Yet applying the logic of computer science thinking more widely to the problems that can be addressed would still provide significant improvement to our lives and culture. The application of computer science to the problems that are possible to address has played a critical role in the active and growing part of the economy.
What is quite obvious for those who take the time to become aware is that there are many good and fun options for teaching computer programming to any age of learner. There are also many ways to show its relevance to all content areas. If you
pull together a collection of sensors, mechanical devices, and programming
languages you generate many high interest topics for students, from understanding cyberspace to basic electronics to robotics. Programming is also an important part of using sensors whether part of a robot
or not. Such study also create new reasons to learn to read and write better. These topics
lead to important career skills for many and important scientific and intellectual knowledge for the rest.
Computer Programming Careers
Using statistics from the Bureau of Labor Statistics, the National Science Foundation, the College Board and the Association for Computing Machinery, Code.org reports that
the United States is short some several hundred thousand people with computer
science training to work in this career area. Projections of need (graph on right) have run to
over a million positions in the United States alone by 2020 (Code Foundation, 2013). However, the "Bureau of Labor Statistics' notes that ....(e)mployment of computer programmers is expected to increase 12% from 2010 to 2020, about as fast as the average for all occupations," the website states. "Since computer programming can be done from anywhere in the world, companies often hire programmers in countries that have lower wages" (Claburn, 2013).
Children
and adolescents could greatly benefit with earlier and more exposure to
a variety of computer science ideas that incorporate
elements of programming. How this knowledge becomes more widely known and used is a growing issue. We are also seeing the beginnings of countries requiring programming instruction to begin in first grade in Estonia (Olson, 2012) and efforts that swing back and forth from active to inactive to active in American education (Papert 1980/1993; Hertz, 2012).
Let's Program, Now!
Web Turtle Programming Online - Assignment 1
Because most adults and students have had so little to exposure to actually
programming a computer, the first step in showing its relevance is to demonstrate
how easy and fun it can be to learn a few simple programming commands which can
do interesting things visually.
Click this link to explore Bill Kendrick's Web Turtle web
site using the directions below. Consider while using do this programming that it is happening with a Web page and its interconnection with a server.
Use the Web Turtle site to create and test simple programming ideas to
see the relationship between numbers, patterns, geometry, direction following and programming skills. Though it does not have a random number generator it includes a set of input
buttons on the programming page.
Just this one simple web site and the geometry of its Logo programming
language can be used to teach a wide range of math concepts that must be
taught in grades K-8.
When you visit this site, follow the directions there to get the programming screen active. Note the 2 column table which has directions in English, sometimes referred to as pseudocode, then in the programming language. This is a classic model of good programming practice, and good language arts practice in actually writing directions.
It is easier
to follow the directions on the first screen by printing it or if you have a big enough screen to put the windows for the directions side by side with the Web site. Then under
the table with the examples is a direction to "Start a New Drawing." Click this link, then type
in the Web turtle directions from the print of that previous screen (or you can copy and paste). Tinker. How can you make the image bigger or smaller?
Having finished that activity, it is time tinker, that is to experiment, to learn from what happens.
Create something other than a square.
Change
the numbers in the computer program just tried to make the turtle draw different shapes, such as triangles,
hexagons and octagons. Do these variations a couple of times.
Print out your finished Web Turtle picture.
Copy your programming instructions in the web turtle language and
paste it into a word processor. Save your file and print it out. Could you copy the image into Word and print out both the computer program and its output, the picture?
Staple any multiple sheets together to hand-in to your instructor.
In class, copy and paste your program into an email message to a class partner who should copy from email and paste into their Web Turtle web programming page to see it work.
There are many examples at this site of different programs and programming features to try and to modify. Explore the "Play with an Example" link and the "Available Commands" link.
Programming Knowledge
This web site and its Logo programming can be used to learn and to teach
some of the most basic concepts in programming:
primitives,
loops,
branches,
procedures or sets of commands (e.g., called different things in
different programming languages such as subroutines or objects) and
arrays.
Primitives are the most basic commands in programming that carry out some
single function and are then combined into ever larger arrangements. Loops
are commands that cause a procedure or step to repeated over endlessly
or until some condition has been met which then allows the next procedure
to begin. Branches create an if condition, which does one thing under one condition and if the value or values change then does something else. Procedures are the sets of directions, the paragraphs and sections of computer thinking. Arrays are sets of stored numbers that are used by different procedures.
The next activity that should be carried out at the Web Turtle site
is to learn to create a subroutine, a named procedure that can be used over and over again. Think of it as another programming paragraph. Below you'll see two "paragraphs", a main routine and subroutine.
Web Turtle Programming Online - Assignment 2
; Example 2 - Make A Square using a Subroutine
REPEAT 1
GO SIDES
NEXT
END
# SIDES
REPEAT 4
DRAW 100
RIGHT 90
NEXT
RETURN
Note that the resulting image should be the same as before. The # SIDES section is teaching the concept of a subroutine. The set of code above it down to the END statement is the main routine. Do you understand the purpose of the symbols ; and #? Can the computer teach you? What happens if you leave them out? Tinker.
With these few skills and short vocabulary (commands) much more complex images become simple to make. Next, return to the first Web Turtle
page and visit the Examples page. See the second example, called Squares.
This set of directions is a procedure that can be given a name, such as
square as seen is the Web Turtle page's example. The computer can remember this and later
simply giving the command "square" will cause the steps to be recalled and
completed where ever the turtle is located. That is, in these simple examples, several major programming concepts
have been introduced. The image to the right was made by using this composition model of the Squares to instead create a triangle and rotate the triangle until the rotation completes the shape. Can you tinker (experiment) to make the shape smaller and larger? Have the subroutine make different shapes? Add a new line to the main routine that will cause a turn after each square is drawn. Change REPEAT in the main routine to 3 and also try larger numbers.
So what? Thes examples are important because they demonstrate a fundamental idea in problem solving. Break the problem down and solve one small part of the problem, then go back and tackle the next step. The capacity to create a named special set of directions is similar to the capacity to create a lego brick or any other unit, item or activity that needs to be used repeatedly yet in creative ways to solve a problem. This intellectual skill is critical in solving many problems, whether completing a design or saving the world. Other commands extend this capacity in powerful ways.
The concept of branches introduces another key concept, "what if?" Branches use command sets that begin with IF and set the value for some
condition. For example, when the loop has been completed five times, drop
out of the loop and move on to the next command. To see a programming example of a branching
command that can be typed in, click the Available Commands button on the
opening page of the Web Turtle site. There you will see the IF command format.
If you are interested in an extra credit programming challenge, here
is one:
Can do you it? Use one the page's input boxes and an IF command. Here are the directions in English. If the Input 1 is equal to 8, repeat the subroutine that many times. Next, change the Input 1 value to something else and run the program again.
The IF command is also where a sensor's input would be used. There are
many possible examples for sensor use that a wide range of students can understand. Here are some examples. IF the sensor reports that the robot has stopped at a wall, turn the robot's wheels
90 degrees and try to move again. IF the sensor detects smoke particles,
direct the buzzer to sound the alarm. IF the sensor reports a temperature
that has climbed over 103 degrees, call the doctor.
Here's one last thinking/programming concept, arrays. Arrays are containers for holding a large set of variables. As an example,
a spreadsheet is a two-dimensional array in which each cell name is a variable
name that can hold some value, whether number, formula or text. Arrays
could be one dimensional, two, three or more. Arrays are not covered in
the directions at the Web Turtle site. However, arrays can still be demonstrated. There could be an array written down on a piece of paper that were entered using the Input command options.
The analytical thinking required for effective programming is also very close to the
types of thinking required for effective teaching. Programmers carry out
plans of actions in a process that would seem very familiar to anyone who
has every planned instruction for a class or an individual. Programmers
break a problem down into sets of procedures (analysis), much as a teacher
breaks an instructional event down into a six point lesson plan or an IEP
(Individualized Educational Prescription), that they can understand, and then give more detailed information and directions to a class.
In a similar fashion, programmers plan in their native language whose plans can easily be shared with other planners then the programmer type up the
steps for the computer to follow using a more detailed language that the computer can understand
(synthesis). Teachers type up or talk out the steps for students to follow
using language that they can understand. Programmers watch the computers
operation to see where the computer fails to do what was intended and then
they continue to change its directions until the computer can meet their
goals. Teachers do something very similar.
Programmers have the advantage
in that computers do not have independent minds or wills of their own.
Computers will follow the directions that they are given precisely and
promptly with very little error checking; this is not so with those human beings that we teach. Educators
have additional challenges that involve leadership and motivation skills.
With proper motivation and skills, human beings that run into problems will invent new commands
for themselves that enable them to work around bad directions and keep
going.
Programming Assignment 3 - Modify an Existing Program
G back into the Web Turtle site and click on Play with Examples. Try out several of the programs then select one of the many choices and modify it so that the outcome was different, even significantly different. Finally, paste the computer program and a copy of the result picture into a MS Word document and attach to the assignment link in Blackboard.
Look at the Common Core State Standards, the NC
Course of Study math competencies or art or science competencies and
figure out a way to teach one or more of those competencies using this
Web Turtle site.
In a word processing file, enter the grade level and content area competency and your explanation of how Web Turtle programming could be used in teaching that competency. Send this file as an email attachment using course Messages in Blackboard.
Decisions, Decisions
Which language to learn? The above Web Turtle activities provided a quick, free and easy way to gain some introductory experience with a programming language. Turtle graphics is just a small part of the first major programming language aimed at children and beginning programmers, Logo. The invention of the Logo language was led by Semour Paper, a collaborator and student of Jean Piaget, who was co-founder of the artificial intelligence and media laboratories at MIT. Most important to the discussion here is Papert's book Mindstorms, first released in 1980, then a second edition in 1993, which explored his work in teaching mathematics by learning and thinking with Logo's playful computer programming language. The title of the book is central to his sense of the opportunities that programming knowledge promotes, mindstorms. Since Logo, multiple languages and systems have been invented to teach programming to all ages. They all owe much to the heritage of Papert's work.
Scratch
There is a good choice for a place to begin to see the depth of what is possible. The most popular programming language being used by millions of children, adolescents and beginning adults is called Scratch.
Scratch is free and this page provides the links to download versions for the Mac, Linux and Windows operating systems. It extends Logo from a text command driven system to a simple graphical interface in which multimedia elements and actions are assembled like snap-together Lego building blocks, blending animated images, sound and video. Begin with the video tutorials on the Scratch home page.
Designed especially for those age 8 and older, Scratch allows anyone to create their own animated stories, video games and interactive artworks. First made available on May 15, 2007, this "drag and click together" type of composition parallels the design of the programming composition model used by the Lego WeDo and NXT Mindstorms languages and incorporated into the Lego Robotics competition. Many examples of applications written by kids in Scratch can be found at Squeakland (http://www.squeakland.org/).
Good Alternatives
Good alternatives to Scratch that are well supported with instructional resources include: Python (a good language for middle school and older learners), Javascript (the embedded language of Web pages), Lego (of which there are several variants), and several robotics languages including Lego's WeDo and NXT Mindstorms.
Interaction
Interaction is one of the elements of the digital palette at which computer programming excels. At its most basic, interaction is the trading of and processing of information between participants. The participants can also be thought of variables. These participants (variables) might be a computer and a person playing a game. They might be multiple computers buying and selling stock on an exchange without any direct human intervention. The interaction might also consist of a peripheral piece of hardware, such as sensor, in interaction with a computer that passes the information on to a person's mobile or smart phone via the cell phone system. Interaction can also be as simple and subtle as a comment box on a blog posting or in a Web page.
Observing and tracking the interaction between variables is at the heart of science's ability to create chains of cause and effect that have led to our engineered medicines, cities, transportation, the Internet and much more. Where scientists can find relatively low levels of interaction either in terms of frequency of interaction or depth of interaction, it can find persistent outcomes which lead to the ability to control and predict. Where interaction levels become high, computers can be used to collect observational data and help humans communicate about phenomena, but cannot help predict as they have no reliable rules to use in many situations.
Conclusion
Having actually tried a computer programming language is a critical first step in understanding the computer's abilities and shortcomings. With not much effort it is easy to quickly advance and find simple uses of computer programming that can be applied to many teaching and personal settings. However, in between novice knowledge about computer science and coding and a robust professionally effective computer application, there is big step which requires significantly more knowledge than this basic introduction provides. Fortunately there are many ways to find the paths to such knowledge for those that are interested.
Computer programming is the paintbrush that has composed every other form of "digital paint", creating our editors for everything from writing text to composing video to building robots and games and developing highly interactive social media, which in turn makes everything seen and experienced online. The power of computer code to build ever more complex designs from very simple ones is a key part of that power, as with the Turtle graphics design to the left. Computer programming has broad cross-disciplinary application and for many, a valuable career path. 
but the process focused nature of computer programming has enabled it to serve as an ally in the processes of all content areas. This digital palette graphic on the left represents the wide range of tools now basic to communicating and turning our questions into problems being processed. Each palette element is now routinely part of Web pages, all made possible by programming, all elements of the transformation of what it means to be literate in the 21st century. The element of the palette most neglected by educational systems is computer programming, the paintbrush that has made all the rest of the digital palette possible. Wing, head of the computer science department at Carnegie Mellon, has argued that "(c)omputational thinking is a fundamental skill for everyone, not just for computer scientists. To reading, writing, and arithmetic, we should add computational thinking to every child’s analytical ability" (Wing, 2006, p. 33).
Using statistics from the Bureau of Labor Statistics, the National Science Foundation, the College Board and the Association for Computing Machinery, Code.org reports that
the United States is short some several hundred thousand people with computer
science training to work in this career area. Projections of need (graph on right) have run to
over a million positions in the United States alone by 2020 (Code Foundation, 2013). However, the "Bureau of Labor Statistics' notes that ....(e)mployment of computer programmers is expected to increase 12% from 2010 to 2020, about as fast as the average for all occupations," the website states. "Since computer programming can be done from anywhere in the world, companies often hire programmers in countries that have lower wages" (Claburn, 2013). 
There are many examples at this site of different programs and programming features to try and to modify. Explore the "Play with an Example" link and the "Available Commands" link. 
With these few skills and short vocabulary (commands) much more complex images become simple to make. Next, return to the first Web Turtle
page and visit the Examples page. See the second example, called Squares.
This set of directions is a procedure that can be given a name, such as
square as seen is the Web Turtle page's example. The computer can remember this and later
simply giving the command "square" will cause the steps to be recalled and
completed where ever the turtle is located. That is, in these simple examples, several major programming concepts
have been introduced. The image to the right was made by using this composition model of the Squares to instead create a triangle and rotate the triangle until the rotation completes the shape. Can you tinker (experiment) to make the shape smaller and larger? Have the subroutine make different shapes? Add a new line to the main routine that will cause a turn after each square is drawn. Change REPEAT in the main routine to 3 and also try larger numbers.