2.4 Essential Technological Pedagogical Knowledge [TPK]
File Types
As a teacher you are probably already familiar with several types of digital files. A student might submit their English essay as a Microsoft Word Document (e.g., 'essay.docx'), an Apache OpenDocument Text file (e.g., 'essay.odt'), or in Adobe's Portable Document Format (e.g., 'essay.pdf'). The program Microsoft Office can open a '.docx' file, the program OpenOffice can open a '.odt' file, and the program Adobe Acrobat can open the '.pdf'. In the last few years companies have worked very hard to create cross-platform compatibility so that we might not even know that file conversions, such as 'essay.docx' to 'essay.pdf', are happening. However, if we are going to teach coding it is very important to know that file types are distinct and certain programs are required to open and manipulate them.
whales.png
|
Notice that each type of file discussed above has a filename extension (.docx, .odt, or .pdf). By looking at the filename extension, a dot followed by a few letters, you should be able to determine it's type. A file can have only one filename extension and if a file is missing an extension it will not work properly because the computer cannot identify what it is.
For example, a file called 'whales.png' is a picture in Portable Network Graphic (.png) form. A file called 'chickens.html' would be a Hypertext Markup Language (.html) document, more commonly known as a web page. A file called 'poem.txt' would be a Plain Text Document (.txt). Thankfully, for the purposes of Codegogy, we only need to know about two file types: Javascript files (.js) and Hypertext Markup Language files (.html). |
Downloading Files
As we discussed earlier p5.js is a framework built on Javascript (JS). Therefore you would expect that it would involve Javascript files! And it does. In fact, the programming language name 'p5.js' is actually just the name of the file you need to download to use it.
The button below will allow you to download the file off the p5.js website. The 'p5' is the file name and the '.js' is the filename extension, meaning that this is a Javascript file called 'p5'. This file contains the digital library of 'special functions' that we'll work with as we start coding. Go ahead and click it now!
The button below will allow you to download the file off the p5.js website. The 'p5' is the file name and the '.js' is the filename extension, meaning that this is a Javascript file called 'p5'. This file contains the digital library of 'special functions' that we'll work with as we start coding. Go ahead and click it now!
Ok, so where did this file go? As was mentioned before, a lot of the file handling is done automatically by the programs we use and so students (and many adults!) are often very confused when they have to manually locate a file. This is one of the important digital skills that students gain from learning to code using a text-based programming language.
The p5.js file should be in your 'Downloads' folder. If you are not sure how to access the file or open the folder then feel free to use this resource to help you find it. Once you find it, double click it. Your default plain text editor program should automatically open it up and you should see something like this.
The p5.js file should be in your 'Downloads' folder. If you are not sure how to access the file or open the folder then feel free to use this resource to help you find it. Once you find it, double click it. Your default plain text editor program should automatically open it up and you should see something like this.
|
Is that terrifying or what? If you scroll to the bottom, you'll also notice that it has over 100 000 lines of code. Whoa!
Ok, so thankfully we don't have to know what any of this means to be able to program with p5.js. However, we do need to have local access to this file; in other words, it needs to be physically stored on our computer somewhere where we can find it. This file contains all the specialized and simplified functions that we can use in our programs. Another point that needs to be addressed is the fact that a plain text editor opened this file by default, not some special 'Javascript' application. When we discussed the reasons for selecting this language we said that Javascript (JS) is part of a trio of languages that make up web pages: HTML, CSS, and JS. These three determine the structure, the presentation, and the behaviour of the web page. I sometimes like to make a comparison to birds; they are like the body (HTML), the feathers (CSS), and the brains (JS). |
So why didn't the web browser open the p5.js file? Didn't we say that web-browsers are the special programs that work with Javascript files? Why didn't it work? This is actually a great example of a potential communication error between a computer and it's human user.
When you clicked on the Javascript file the computer got confused. Whenever the computer gets confused about a file you ask it to open it uses its default plain text editor. It's your computer's way of saying, "I don't get it. Why don't YOU look at the code and tell me why this isn't working?"
The reason that the computer isn't using a web browser to open 'p5.js' is two-fold. First, Javascript files can't actually stand on their own; they are like brains without a body. In order to get Javascript files to 'work' they need to be 'called into action' by an HTML file. This is exactly what we will do in the next section titled 'Using p5.js'. Second, the file 'p5.js' is a just a library; it's not a set of instructions to actually do anything, it's just a bunch of 'tools' we can call up and use in our future programs. I must warn you, this is not the last time you will have to sort out a communication error with your computer!
When you clicked on the Javascript file the computer got confused. Whenever the computer gets confused about a file you ask it to open it uses its default plain text editor. It's your computer's way of saying, "I don't get it. Why don't YOU look at the code and tell me why this isn't working?"
The reason that the computer isn't using a web browser to open 'p5.js' is two-fold. First, Javascript files can't actually stand on their own; they are like brains without a body. In order to get Javascript files to 'work' they need to be 'called into action' by an HTML file. This is exactly what we will do in the next section titled 'Using p5.js'. Second, the file 'p5.js' is a just a library; it's not a set of instructions to actually do anything, it's just a bunch of 'tools' we can call up and use in our future programs. I must warn you, this is not the last time you will have to sort out a communication error with your computer!
Tired of sitting? Get up and stretch before scrolling down!
File Organization
We are just about to start coding with p5.js, but before we do we need to talk about file organization.
|
I'm not sure if there is anything that I see students struggle with more during a class on coding than file organization. It is hard to blame them as most applications that we use don't actually make us search for, move, or open files. Students will be glued to the screen for a full hour as they develop an exciting new program only to come back the next day and realize that they somehow lost the file. Maybe they saved it to the Desktop on the school computer which gets wiped after every user session. Maybe they saved it to their student drive but forgot what they named it. Maybe they forgot which labyrinthian route they need to follow to dig it out of their student folders. I've seen countless examples and it is very demoralizing for learners.
|
For the limited scope of Codegogy, we won't get into setting up file directories; we'll mostly be concerned about keeping things in the same place and knowing where to find them. First, select a storage location you know you can access again. This could be your hard drive if you're using a personal desktop or laptop ('C:' Drive on Windows and 'Macintosh HD' on Mac) or your main 'Desktop' area; it could be a removable USB flash drive. If you have your own dedicated storage on a school network drive that is also a possibility. I would caution against using cloud storage (such as Google Drive) because complications arise when files are stored on the cloud and not locally, i.e., physically on your computer.
Next, create a new folder in that storage area. Practice good digital organization habits by giving this folder a name such as 'ADST-CODE'. Then copy and paste the p5.js file from your 'Downloads' into that the 'ADST-CODE' folder as shown below. Alternatively, you can drag the 'p5.js' file into the 'ADST-CODE' folder. Now we are ready to do some coding in p5.js!
Next, create a new folder in that storage area. Practice good digital organization habits by giving this folder a name such as 'ADST-CODE'. Then copy and paste the p5.js file from your 'Downloads' into that the 'ADST-CODE' folder as shown below. Alternatively, you can drag the 'p5.js' file into the 'ADST-CODE' folder. Now we are ready to do some coding in p5.js!
|
Freeze & Reflect (2.4a):
|
