boot camp sgt. yawn’s file management building character through file management
TRANSCRIPT
Boot Camp
Sgt. Yawn’s File Management
Building Character
through
File Management
Good file management is
essential to successful website
development
File Management
Boot Camp
The rules for the Web are a
little different From those on your local
computer
File Management
Boot Camp
Knowing and following these rules will make for a
much happier web development experience.
File Management
Boot Camp
Run My Computer “Mine!”
Click on the Start button, find My Computer and click on it.
(Windows Explorer works too!)
Click the “Folders” button
To get two “panes” in this window
Click the “My Documents” To open that folder
(Hint: Click on the ICON, not the words.
If you click on the words, Windows may think you want to rename the folder)
There will be a lot of stuff already in “My Documents”
Note that the contents of “My Documents” now appears in the right-hand “pane”
We are going to create a new folder called: “My E-Portfolio”
Click “File”
Move to “New”
Click “Folder”
This action creates a new folder named “New Folder”
Gotta do something about that name!
Press the Delete key (on the keyboard)
To erase “New Folder”
Type in: “My E-Portfolio”
And press the Enter key(on the keyboard)
Click on the icon for My E-Portfolio in the left-hand pane to select it and display its contents.
The contents will be displayed in the right-hand “pane”
Note that there is nothing there…
Yet!
Here is the BIG DEAL:
ALL of the files that make up your E-Portfolio website
MUST be located in
THIS folder
BEFORE you link to them
Linking to files outside of this folder is BAD
Example: I know I’ll want a photo of myself in my webpage.
So I’ll find one I like and copy it into the E-Portfolio folder
Geek Trick:
Click the Views button, then Thumbnails to see small versions of pictures
Click on the photo,
Hold the CTRL key,
Drag the photo to the E-Portfolio folder, and drop it there.
Geek 101:
Click and drag while
HOLDING the CTRL Key
COPIES the file
Without the CTRL key, MOVES the file.
Other files are needed
Here I’ve found a resumé and a few samples demonstrating my verbal and musical skills.
Geek 101:
to select multiple files within a folder
HOLD the CTRL Key while you click on each one
Here is another way to copy
Click Edit, then Copy
This is the “safer” way to do it.
Geek 101:
Note that CTRL-C also copies.
The Edit menu provides a reminder of this, and other shortcut keys.
Find your E-Portfolio folder and open it.
Click Edit, then Paste to deposit your copied files in there.
Geek 101:
Note that CTRL-V is Paste
We now have several files in the E-Portfolio folder which will soon become part of the web page
More files can be added later, such as the Skills page and the Mission statement.
But a file MUST be saved into this folder BEFORE a link to it is made in home page.
Geek 101:
Filename Rules for the Web
Boredom factor: 9
Stress-reduction factor: 7
Webpage works factor: 10
Number of brain cells burned out: 3
Analysis: Definitely worth knowing.
Geek 101:
Filename Rules for the Web
Rule #1
Category: Hard Rule
“Do NOT include SPACES in your filenames!
Most web servers are running under Linux or Unix, which does not recognize the space as a valid filename character.
For added confusion, Windows does allow spaces in filenames. That means that you can assemble a website on your computer that works just fine, but put it on the web and it won’t work at all.
Geek 101:
Filename Rules for the Web
Rule #2
Category: Hard Rule
Use ONLY Letters, numbers, dash and underscore!
DO NOT use funny characters like:
!@#$%^&*()[]{}\|?<>/
Consider it cursing.
Geek 101:
Filename Rules for the Web
Filenames under Windows are NOT case-sensitive. “A” and “a” are treated as the same character.
Filenames under Linux and Unix are case-sensitive. “A” and “a” are NOT the same.
So if you name your file “Myname.html” and link to it as “myname.html” it will work fine on your local computer, but will not work on the web.
USE all lowercase LETTERSavoID usInG MixED CasE
Rule #3
Category: Soft Rule
Geek 101:
Filename Rules for the WebQuiz: Good or Bad?
Jimmy Yawn.html Bad! Contains space, capital letters
jimmy_yawn.html Good! Space is replaced with underscore
$alary.jpg Bad! Contains funny character
city scene.jpg Bad! Contains space
cover letter.doc Bad! Contains space
Geek 101:
Filename Rules for the WebQuiz: Good or Bad?
Jimmy Yawn.html Bad! Contains space, capital letters
jimmy_yawn.html Good! Space is replaced with underscore
$alary.jpg Bad! Contains funny character
city scene.jpg Bad! Contains space
cover letter.doc Bad! Contains space
Recommended Folder Structure
• NONE!• For the first pages, we
recommend using a FLAT structure
• Everything goes into ONE FOLDER
• Nowhere else!• Simplifies file
management greatly• Adequate for simple web
pages
Advanced Folder StructureFor professional websites, multiple folders are used
Files are sorted into meaningful categories
HTML pages link to files in these folders.
The HTML page MUST KNOW where the files are!
Advanced Folder StructureThis “hierarchical” structure must be
replicated precisely on the web server
If not, the HTML pages will not be able to find their files, and
“404: File Not Found” and other errors ensue.
BAD Folder StructureThe novice web designer is likely to link to files here, there and yonder on the computer.
This just won’t do!
KP will ensue!
Even worse, to copy and paste pictures, etc. from websites, e-mail, documents, etc. WRONG!
That’ll get you thrown in the brig!
Permitted Folder Structures
• FLAT • Simple, all-in one• Good for beginners
OR
• Hierarchical, • Nicely organized • Better for advanced
students
Boot Camp
Your Character has improved!
Congratulations!You have survived File Management