Class 1 – Managing Project Files
Efficient file management is a prerequisite for any successful development work. Over time, you will become acclimated with how files are stored on a Unix server, Windows PC, or a Mac. In the meantime, here is a set of conventions that may help you effectively manage files during the duration of this course. By following a few simple rules, we can make sure that file management does not prevent you from learning to be a great developer.
Rule #1 – Always use a “workspace” folder
Create a folder that will always function as your workspace. Store all other files and folders you create inside of this workspace folder. This way, you will always know where your files live, and how to find them.
For example, I may create a subfolder in the Documents folder (a.k.a. My Documents on a PC) and call it “webdev”. This will function as my workspace folder for all the web development work I do. Whenever I want to find some files I worked on, I know that I have to look inside of the webdev folder inside of the Documents folder.
To create a new folder, navigate with Windows Explorer (or Finder on Mac) to the location where you want to create the folder.
In this example, I will navigate to the Documents folder, where I want to create my workspace folder.
Navigate to your Documents folder in Windows Explorer or Mac Finder
Once you are in the location where you want to create your workspace, click the File menu, and select New -> Folder. Enter the workspace folder name, and click the Enter button to create that folder.
Then double click on the new folder name to go into that folder.
Create the workspace folder
Navigate into the new workspace folder
Rule #2 – Create separate subfolders for each project
For each project, assignment, or other task, create a new subfolder within your workspace folder.
For example, when beginning a project called “project1″, from within your workspace folder, click File -> New -> Folder, and create a folder called “project1″. Then double-click that folder to go inside it.
Create a project folder inside the workspace folder
Rule #3 – For each project, set up subfolders for CSS files, Javascript files, and image files
A typical project will have XHTML files, Javascript files, CSS files. It is important to be organized about where you store each type of file. As a general rule, within each project folder, you should:
- put XHTML files in the main project folder
- put images in a subfolder called “images”
- put Javascript files in a subfolder called “scripts”
- put CSS files in a subfolder called “styles”
So for a project called “project1″, for example, you would set up subfolders that look like this:
A typical project folder setup
And we will eventually put XHTML files in the main project folder. So a typical setup after we create our first XHTML file will eventually look like this:
Typical project folder with XHTML file
Notice that the main XHTML file, called “index.html”, is in the root project folder. And there are subfolders for each other type of file.
Rule #4 – Maintain the exact same folder structure on the server
To avoid complication, you should use the exact same folder structure on the server as what you created on your client computers.
When you use a file transfer program, like WinSCP (or Cyberduck on Mac), you will be able to view the files on the client side-by-side with the files on the server. The structure of your project folder should look the same on each.
Note that WinSCP on PC will show you files on both the client and server in two different panes. With Cyberduck on Mac, you will have to have the Finder open to view files on the client, and use Cyberduck to view files on the server.
Viewing client and server files side-by-side in Cyberduck and Finder on Mac
Rule #5 – Know your URLs
When you’re ready to test your files to see what they look like in the web browser, you have to know the location of your files on the web. When using WinSCP, you can infer the location of the files on the web from the location of the files on the server’s hard drive.
In WinSCP, at the top of the right pane (the server pane), you will see the location of your files on the server’s hard drive. The location of these files on the web is included in this path.
The URL of your files on the server
This is the location you should enter into Firefox’s address bar.
The URL to enter into the Firefox address bar
Note: Not all servers are set up exactly like this, but you can usually infer the location of your files on the web from the location of your files on the hard drive in a similar way.
No related posts.
Tags: class 1
Loading ...