Lab #1 (In-Home)

CS10001 – Computer Literacy: Final Project

Due: December 3, 2007 by 11:59 p.m.

Purpose: To further our computer literacy knowledge by creating an electronic portfolio using HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) templates.

Rationale: Employers in today’s job market are looking for individuals that stand out from the rest of the competition. Recall that you have about 20 seconds to capture the attention of the hiring staff. How will you separate yourself from all the other applicants? One way is to promote yourself professionally and showcase your credentials online. An electronic portfolio is a very popular tool for doing just that. And it lets prospective employers know that you are tech-savvy, something that is highly sought after in just about every job market.

If graduate school is the next step after your undergraduate studies, then the electronic portfolio may serve a different purpose for you. In addition to your transcripts and GRE/GMAT test scores, you will likely be asked for other documentation during the application process. The electronic portfolio gives you a central repository for all your undergraduate files. Then you have everything you need in one place—all syllabi, lecture notes and assignments—when required. Consider saving all the online documents from all your classes when you are able and upload these documents to the university’s servers for later retrieval.

Objective: To test our knowledge on several topics presented throughout the semester and increase our skills in these areas. This includes, but is not limited to, the following:

1. Using computers wisely and adapting to new technologies.

2. Using system software in the form of OS or NOS.

3. Using the Internet as a form of communication--beyond e-mail and browsing.

4. Using IP addresses to establish electronic connections.

5. Using FTP to perform electronic methods of transfer.

6. Using URLs and hyperlinks to navigate the Web.

7. Using complex number systems, particularly hexadecimal, to represent data.

8. Using many forms of application software including

· Word Processing (Word)

· Presentation (PowerPoint)

· Conversion utility (doPDF)

· FTP utility (FileZilla)

· Web browsers (Internet Explorer, Mozilla Firefox)

· Text editors (Notepad)

9. Using a variation of the top-down design technique to build Web pages.

10. Interacting with client/server networks and sharing in the resources provided.

11. Interacting with network servers through authentication and file uploading.

12. Utilizing permanent storage space for important files.

13. Implementing disaster recovery techniques.

14. Building confidence in the area of computer literacy.

CS10001 – Computer Literacy: Final Project

Steps for Phase #1

1. Use FileZilla to access the “research.kent.edu” server and authenticate yourself. Double-click on the public_html folder, then right-click. Select the option “Create Directory” and name the new directory CS10001 (note the uppercase CS). Set the permissions for the directory to 755. Move the resume.pdf, courses.pdf and interests.ppt files into this new folder by using the drag and drop method. Properly disconnect from the “research.kent.edu” server.

Note: If you are not sure what the new URL will be for your files, open up a new browser window and use the URL format of www.personal.kent.edu/~userid/CS10001/resume.pdf. If you are successful, Adobe Reader will open with your resume present.

2. Two HTML/CSS templates have been prepared for the project. Choose one of the designs by visiting the following links:

http://www.cs.kent.edu/~dreed/CS10001/Project/template1.html

http://www.cs.kent.edu/~dreed/CS10001/Project/template2.html

3. Some PowerPoint demos have been prepared to provide details on the template layout, colors, HTML tags, comments, and symbols. There are both full screen and handout formats available for review, see the following:

http://www.cs.kent.edu/~dreed/CS10001/Project/template1_demo_full.pdf

http://www.cs.kent.edu/~dreed/CS10001/Project/template1_demo.pdf

http://www.cs.kent.edu/~dreed/CS10001/Project/template2_demo_full.pdf

http://www.cs.kent.edu/~dreed/CS10001/Project/template2_demo.pdf

CS10001 – Computer Literacy: Final Project

Steps for Phase #1

4. Use the Internet Explorer browser to save the template of your choice to your hard drive in the folder of your choice. Do not use Mozilla Firefox to save the template. Only Internet Explorer will successfully save the file automatically in Notepad (text editor) with the formatting intact.

While viewing the template, right-click and choose View Source. Notice that Notepad opens and the name of the file on the blue title bar is “template1[1]” or “template2[1]”.

Select File ® Save As and rename the file from “template1[1]” or “template2[1]” to index.html. Change the “Save as type” to All Files and leave the “Encoding” as ANSI. Save the file. Notice that the filename on the blue title bar is now “index”. Leave this window open.

5. Open the index.html file in a browser window.

For Internet Explorer users:

From the browser window, select File ® Open ® Browse and open the

index.html file that you just saved in Step #4. Because you are working on your local machine, the URL in the address line of the browser should show

C:\path of where you saved your file\index.html

For Mozilla Firefox users:

From the browser window, select File ® Open File and open the index.html file that you just saved in Step #4. Because you are working on your local machine, the URL in the address line of the browser should show

file:///C:/path of where you saved your file/index.html

6. Use the Restore Down button to minimize the browser window. Set the browser window and the Notepad window side by side.

7. Examine the text file to familiarize yourself with the CSS elements discussed in the demos. Recall that these elements simply define how boxes, content, text and links look.

CS10001 – Computer Literacy: Final Project

Steps for Phase #1

8. Updating the student name in the text file.

From the text editor (Notepad), select Edit ® Find. For “Find what” type in Joe Student and choose “Find Next”. Change the highlighted name between the <title</title> tags to your name. Find the next occurrence of Joe Student and replace it with your name.

Save the text file at this point and refresh the browser view to see the changes. You should see that both the blue title bar at the top and the top bar on the page now have your name.

9. Updating the userid in the text file.

Use Ctrl-Home to go to the top of the text file and select Edit ® Find. For “Find what” type in userid and choose “Find Next”. Change the first userid to your Flashline userid and follow the same “finding” method as used in Step #8 until all occurrences of userid are changed to your userid.

Save the text file at this point and refresh the browser view to see the changes. Check all the links associated with “Contact Me” and under the title “About Me”. You should jump to all the files you created for this project (see the boxed Note on Page 2). If you do not jump to your links, check to see that you are connected to the Internet.

If any of your links fail, look at the text file and check that you changed the userid correctly. Other problems could be from not naming the files correctly, not naming the directory correctly or not moving the files to the new directory.

10. Updating the “Date Updated” text.

Use Ctrl-Home to go to the top of the text file and select Edit ® Find. For “Find what” type in November 11 and choose “Find Next”. Change the date to reflect the current date.

Save the text file at this point and refresh the browser view to see the changes.

CS10001 – Computer Literacy: Final Project

Steps for Phase #1

11. Changing background and foreground colors.

If you chose to use template #1:

Use Ctrl-Home to go to the top of the text file and select Edit ® Find. For “Find what” type in 888888 and choose “Find Next”. Change the hexadecimal color to the color you have chosen for your background.

Use Ctrl-Home to go to the top of the text file and select Edit ® Find. For “Find what” type in DDDDDD and choose “Find Next”. Change the hexadecimal color to the color you have chosen for your foreground. Continue to change the remaining occurrences of this foreground color.

Save the text file at this point and refresh the browser view to see the changes.

If you chose to use template #2:

Finally, use Ctrl-Home to go to the top of the text file and select Edit ® Find. For “Find what” type in 444444 and choose “Find Next”. Change the hexadecimal color to a color that is darker than either of your background or foreground colors. Change all occurrences of this color.

Save the text file at this point and refresh the browser view to see the changes.

12. Upload the index.html file to the “research.kent.edu” server and place it in the CS10001 folder along with all the other files for the project. Set the file permissions to 664. Open up a new browser window and type in the following URL, replacing “userid” with your Flashline userid.

www.personal.kent.edu/~userid/CS10001/

If you are successful, you should see your new portfolio page displayed.

CS10001 – Computer Literacy: Final Project

Steps for Phase #1

13. Work on the future information for the web page.

For the navigation bars on the right or on the left of the portfolio page:

· Compile pertinent Kent State University links

· Find links of other interests

For the content boxes in the middle of the portfolio page:

· Identify your long-term goals

· Define your research interests

· Name your favorites

Note: The content block for the current semester information may be found on the courses.pdf document.

For the picture block the portfolio page:

· Find a photo to use--of yourself, of the university or of something else that you like.

14. If you have any questions or have any problems with these instructions, contact the instructor during office hours, during class times, or via e-mail at .

15. Future postings:

· Project, Phase #2 on Thursday, November 29, 2007.

· See the class Web page at www.cs.kent.edu/~dreed/CS10001/ for details.