Sgt. Yawn’s File Management

1. Boot Camp Sgt. Yawn’s File Management Building Character through File Management

2. File ManagementBoot Camp Good file management is essential to successful website development

3. File ManagementBoot Camp The rules for the Web are a little different From those on your local computer

4. File ManagementBoot Camp Knowing and following these rules will make for a much happier web development experience.

5. Run My Computer “Mine!” Click on the Start button, find My Computer and click on it. (Windows Explorer works too!)

6. Click the “Folders” button To get two “panes” in this window

7. 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)

8. There will be a lot of stuff already in “My Documents” We are going to create a new folder called: “My E-Portfolio” Note that the contents of “My Documents” now appears in the right-hand “pane”

9. Click “File” Move to “New” Click “Folder”

10. This action creates a new folder named “New Folder” Gotta do something about that name!

11. Press the Delete key (on the keyboard) To erase “New Folder” Type in: “My E-Portfolio” And press the Enter key(on the keyboard)

12. 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!

13. 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

14. 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

15. 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.

16. 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

17. 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.

18. 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

19. 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.

20. 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.

21. 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.

22. 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.

23. Geek 101: Filename Rules for the Web Rule #3 Category: Soft Rule USE all lowercase LETTERS avoID usInG MixED CasE 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.

24. Geek 101: Filename Rules for the Web Quiz: 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

25. Geek 101: Filename Rules for the Web Quiz: 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

26. 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

27. Advanced Folder Structure For 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!

28. Advanced Folder Structure This “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.

29. BAD Folder Structure The 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!

30. Permitted Folder Structures • FLAT • Simple, all-in one • Good for beginnersOR • Hierarchical, • Nicely organized • Better for advanced students

31. Congratulations! You have survived File Management Boot Camp Your Character has improved!