How to use E-folio to make a site

Intro to E-folio
A Quick Guide for Students
Techniques for making an E-folio web site
Images – Basics
Images – Scanning
*Images – Uploading as MultiMedia* - Revised 10/31
Images – Edit My MultiMedia
*Images – A sequence of images like a slide show* - Revised 10/31
Assignments – Basics
Assignments – Submitting
Assignments – Edit My Assignments
Assignments – Deleting
Assignments – Comments
Assignments – Searching
Assignments – Diary
Adding and linking to images
Embedding images in a page
Linking – Images (MultiMedia)
Linking – Web pages
3D Presentation space


First I'd recommend that you open up this Help file in a new browser window while you work in E-folio or print it out so that you can have it available for reference while you work.

Intro to E-folio

E-folio is a web-based collaborative writing environment for students and teachers. Students are given a choice as to which audience they wish to make their work visible: they can keep a document private, or make it visible to their teammates, or only to the teacher, or to the class as a whole. This means that students can publish and access each other's work on the a web. Students and instructors can then read and comment on each other's work either as a whole class or within teams that are pre-designated by the instructor.

Before you begin...



1. A Quick Guide for Students

Registration and Login

This is very straightforward. To use E-Folio you need a login. The steps to procuring one are as follows:

If you are working in a team of 2, then just register your new team as if it were another user. By doing that, you and your teammate will be able to jointly access your team files. It's advised to have a meaningful, if not very creative user ID – something like "dfgdln". Your user ID can be a maximum of 12 characters.

Once logged in, you will be at the welcome screen which may, if the instructor has set it up to do so, provide basic instructions oriented around the top menu tabs within E-Folio. The following are very simple instructions for using the basics of E-Folio.

Users

Click on "users" to see a full list of participants in the course; this also allows you to change your password, email or add an image associated with your account for others to see (such as a headshot).

Welcome screen

Click on "welcome" to come back to this page at any point - it is simply a welcome page with these brief instructions to remind users of how to use E-Folio.

Activities: Assignments

Click on "activities" to see a list of assignments you need to do. From this list, click on "instructions" to get a description of the assignment. Click on "add new assignment" to get an interface that allows you to type in a short digest of what you are posting, and otherwise "browse" to a file on your hard drive containing the assignment. Type in a title in the title field, set the audience - to "private" if you don't want to share it with the class yet, to "class" if you want to submit to the class, and to "trash" if you want to delete it. Then click "save" to save. You can go back later and edit as needed. As assignments are uploaded, they will appear in a list beneath the relevant assignment for reading by the class.

Tools: Chatting

Click on "tools" to access the chat facilities; this will require you to login again - use the same login/pasword you used to login to E-Folio. Notice that after submitting a chat comment you have to delete your text to type in a new comment. Germano is available herein every Thursday from 8 to 10pm starting on January the 15th and continuing until April 29 (excepting Spring Break on March 11).

Top

2. Techniques for making an E-folio web site

The first step in making your web assignment is to do your analysis and type it up in the word processor of your choice. Type up your home page (your main page) and if you like, add notes to yourself about how you want to link to your other pages. I nearly always work on paper and make a digram that looks something like this:

Or you can make a more linear site that goes from page to page. Regardless, you should map out and set up everything before you begin working in E-folio: your main text, your images, your tangents, your links. Later you'll insert them into the structure of a web site.

Top

3. Images

3.a Images – basics

There are a few ways to deal with images. You can make a link to a site, paste an image into your web page if you copy it from a site on the web, or upload an image from your computer or disk directly into E-folio's MultiMedia space. This MultiMedia space can be seen as a sort of bucket to put your images or other items that will be on your web site.

3.b Dealing with images of your own

If you've got images that you've created yourself or scanned in from another source (like a book), you can use E-folio to store your image. If you already know how to scan and save images, you can skip ahead to Uploading your own images in E-folio.

3.b.1 Scanning your own images

If you have images you'd like to scan, you can bring them to the Digital Media Lab on the 3rd floor of Clemons library. Someone can help you with that, but hopefully this guide will be enough so that you can work on your own.

  1. Launch Adobe Photoshop.
  2. Go to the File menu at the top of your screen and scroll down to Import/EpsonTwain5.
  3. Click the Preview button
  4. Now you need to set the resolution. Because you are making these images for the web and not for print, you want to set a resultion of 72 or 96 dpi. Choosing 96 will make your image 33% larger. The size depends on your original image. If it appears tiny on the web page, you'll need to scan it at a higher resolution. Likewise, if it's huge you'll want to sample it at a lower resolution. You can also manipulate the image size from within Photoshop, but that's another step.
  5. If your image is black and white, choose Black & White Photo (avoid the "14-bit" option). If it's a color image, choose Color Photo (avoid the "42-bit" option).
  6. Select the area that you want to scan and click the Scan button.
  7. Choose File/Save. I'd recommend that you save the image in TIFF format because that allows you to make future edits of your image without the quality degrading. If you have a zip disk you can save directly onto that, otherwise you may want to save your images in your Home Directory (ask a consultant for help with that if you are unsure). If you save the image as a TIFF, make sure to add ".tif" to the end of your file name. Click Save. You'll then get another dialog box. If you plan to edit the image on a Windows machine you click Windows format, otherwise Macintosh is fine. There is no need to use LZW Compression.
  8. Now you'll need to save your image in a format that works on the web. Choose File/Save for web... You can test the different qualities or images that you'll wind up with from here. Basically, unless you are working with solid colors or line drawings, you probably want to save your image as a JPEG. Test the different levels of compression to see how it effects the quality and take note of the resulting file size of the image that you will get. If you compress and image a lot, the file size will be very small, which is good, but it will probably look pretty terrible. If you set the compression to a high number like 95 or 100, the quality will be better, but the file size will be too big and it will take a long time to appear in the browser. It's best to get an image size of no more than 30K if possible. Click Save.

Top

3.b.2 Saving images from the web

You can get an image from the web and save it to your local computer or disk (or Home Diretory). The most simple way to do this is to find a desired image in your browser and right click on it (control-click on a Mac) and choose "Download image to disk" (or whatever similar option is afforded by the browser you are running). Once saved, you can view the image off-line or manipulate it. However, if you want to use it in an E-folio assignment, you'll need to need to save it to a web location for that. You'll have to either link to the image in the original web site or upload it as a MultiMedia file to E-folio. If you just have it on your local copmuter, only you will be able to see it.

3.b.3 Uploading your own images/MultiMedia to E-folio

What is MultiMedia? In the digital media world, multimedia is commonly associated with video and audio. In E-folio, it refers to anything that supplements text - audio, video, animations, and even images. Though the procedure is the same for each of those types of media, right now we are concerning ourselves with the use of images.

The web requires that you link your images to a place somewhere on the web - it's not good enough to just have an image file on your hard drive if anyone else is going to be able to see it. One way to accomplish that is to find an image on a web site and just make a link to that (this is what you are doing if you copy an image and paste it into Ezedit in E-folio. Linking to an image is discussed in Embedding images in a page.) The other other way is for you to upload your images into E-folio itself and link to them from there. Though a couple of more steps are involved, by putting your images into E-folio's MultiMedia section, you'll be able to ensure that the images are always there, even if the web page where you got the picture from no longer exists (but remember to credit the source of the image). This is also a necessary step if you are going to make any edits whatsoever to the image.

The MultiMedia section of E-folio is something like a big bucket that stores your images (or other kinds of items like movies) on the web exists so that you can make links to them. When you view one of the things that you've uploaded into MultiMedia (in this case, an image), what you get is a web page that's got the image and then a place for some description of the image that you can provide.

The way it works is that your TA or Instructor needs to first give you permission to upload something into E-folio's MultiMedia section. Assume that this has been done for you. Here is how to upload an image as a MultiMedia item into E-folio:

  1. Follow the link to MultiMedia at the top of your E-folio window. You'll see 1 or more items under MultiMedia Uploads. You can click on View to see the details of the MultiMedia Upload options, such as the type of files you'll be permitted to upload. Use the Back button on your browser to get back to the MultiMedia Uploads page.
  2. Click on Upload.
  3. Click the Browse button and find the file that you want to upload from your hard drive, zip disk or Home Directory.
  4. Add a Title.
  5. For Audience, your only option for now is Public.
  6. In the text box, add whatever description you'd like to accompany the image.
  7. Click Save. You'll see notification that your file has been added.
  8. Click the link to return to your Main Menu (aka your E-folio Home).
  9. From your Home page, click Edit My MultiMedia.
  10. Find the MultiMedia item you've just uploaded and click View to see what you've got.
  11. To change the title or the description that goes along with the MultiMedia item, click Edit.

Top

3.b.4 Edit My MultiMedia

Having uploaded a multimedia file, when you return to your Main Menu, you should see a new option: Edit My MultiMedia. Follow that link and then choose View so you can take a look at the page containing your recently uploaded file. Click the Back button on your browser to return to My MultiMedia. If you want to change the text or title that appears with that MultiMedia file – or if you want to replace that image with one you may have edited or revised, click the Edit button. If you want to delete a MultiMedia file, set the audience to Trash, and then go back to My MultiMedia and empty the trash.

Note: For every image you want to upload to E-folio, you need to choose the MultiMedia option and then choose upload. If you want to edit its description or title, go to Edit My MultiMedia.

Top

3.b.5 A "slide show" style sequence of images

What is a slideshow? At it's most basic, it is a sequence of images. You can create them in a number of ways: the most ambitious is a presentation that has audio tracks, narration and annotation that correspond to each image. However you can use E-folio to make a very simple sequence where you have an image in a web page with some text describing the image. Within that web page, you can link to the next page.

Your structure might look something like this:

Here is a sample of this in action.

The first thing you should do is map out the structure of your image sequence. Decide on an image order and the content of the text that will accompany each image. The next step depends on how much control you want to have over the design of your pages.

The simplest way is to upload your images as MultiMedia items into E-folio. When you do that, for each image you get a web page with a very consistent layout. Every page consists of an image, a title, a link location and some descriptive text. For a discussion of MultiMedia in E-folio review Images – Uploading as MultiMedia.

  1. Upload each of the images that you'll want to use in the "slide show" into MultiMedia. Follow the steps above in Images – Uploading as MultiMedia, then come back here.
  2. Go into Edit My MultiMedia. For each image click Edit and use the text box to add a description of your image.
  3. Next, make a link to the next MultiMedia page. In order to do this, you need to get the link location of the MultiMedia file:
    1. Go Home
    2. Follow the link to Edit My MultiMedia
    3. Find the MultiMedia file you want to link to. Tick the Comments box.
    4. Click View.
    5. In the green box at the top, select the bottom line from just after "Link to Page:" it should look something like this: "MyDocumentsDetail.cfm?IDMyDocument=791". Press control+c to copy it or right click and choose copy.
  4. Return to Edit My MultiMedia, then go back to the MultiMedia item from which you will make the link and click Edit.
  5. Select some text that you want to use as the link to the next image page and use the Link editor to enter the address.
  6. Repeat ad infinitum.

Click here for a description of how to link to a MultiMedia item.

By default, when you link to another page, the new page will replace your current one in the browser window. Since your images will likely follow a linear sequence, that is appropriate. However, if you start to make a digression in your presentation, you may want that line to appear in a new window. In order to do that, when you make a link, set the Target to "_blank".

You may want to try adding a sound, though this can be problematic because of file sizes and accordingly slow downloads, especially over a dial-up connection. If you link to a song in the THDL Music Database and set the Target to "_blank", the song should open up in a new window and the user can return to your image-based analysis now supported by an accompanying sound track if all works well. For each song in the database, the URL of that song will appear at the bottom of the page. You can copy it and use that to make the link.

Top

4. Assignments

4.a Assigments – Basics

For every page of content you want to create for your E-folio web site, you need to go to the Assignment option in your section and Post a new Response. Keep this in mind, as the metaphor can be a little confusing. Although you might see it as creating multiple pages of a single assignement, the way that E-folio deals with it is that each Response to an assignment is its own assignment.

If you want to edit any of the pages you've made, you need to go the Home/Main page in your section, choose Edit My Documents and then edit your page of choice.

4.b Assigments – Submitting

From within your E-folio section click on the Assignments link at the top of the page. Click the View button to see the current assignment. To create your assignment, click Post.

Provide a title for your assignment. For the first page of your assignment – the one that you want your visitors to begin with – give it the title "Home page". For now, you should set the audience to Private. Once you have built your pages and are ready for the class to see, you have to go back in and edit your assignments, changing the audience to Class.

If you are using Internet Explorer on a Windows computer, you'll see the text editor that we used in the first meeting of our discussion sections. Although it may be tempting to use this like a word processor, that is not its intent. You should do your composing off line and save it, and then copy that into the text editor to clean up the formatting. When you work in the editor, it is actually creating HTML, the code that web browsers understand and in turn display as formatted web pages. In the text editor, if you are in the normal view -- the one with formatting and linking buttons above the text box -- you can set font size and color, text alignment, indentation and other features.

To toggle the view so that you're seeing the HTML code, click the button in the lower left of the editor.


To return to the normal view. click the button again. If you want to paste in HTML from elsewhere, you must do that within the HTML code view.

The text editor is not intended to handle very large documents. It allows a maximum of 64,000 characters – roughly equivalent to 3 double-spaced pages. For long texts, it is best to submit them as separate assignement pages.

Note that if you want the spaces in between paragraphs to be only a single line, you'll have to hold the Shift key as you press Return. This is called a "soft return". If you've pasted in a document from MS Word for instance, it will probably have double spaces between paragraphs. To fix this, you'll have to delete the paragraph return and insert a soft return.

Top

4.c Assigments – Edit My Assignments

To view an assignment you've created, go to your home page and click Edit My Documents. This will take you to a page entitled My Documents.

That option will not be available if you haven't yet created any assignments.

Find the assignment you'd like to see and click View.

Although you can see it, if your audience is set to Private, no one else will be able to view it from their E-folio space.

To edit your assignment, in My Documents find the title of the desired assignment and choose – you guessed it – Edit.

It is important to click the Save button before exiting the window that you are in. Be aware that if you go to another page -- even by clicking your browser's back button -- without having submitted your edits, your revisions will be lost.

Top

4.d Assigments – Deleting

From your Home/Main page choose Edit My Documents. Click Edit for the desired assignment and set the audience to Trash. After doing this, you'll have to go back to My Documents and empty the trash.

Top

4.e Assigments – Comments

One of the powerful features of E-folio is that it provides an environment for the instructor, assistants and other students to make comments. In order to make a comment on an assignment, from your Main Menu follow the link to View Class Documents. Tick the box in the Comments column for the desired assignment. (Note that if there are existing comments, the quantity of them will appear beside the box.) Scroll all the way down to the bottom of the assigment and you will see a text box for adding reader comments as well as a record of the existing comments. Beware that once you click the Save button and submit comments, you can't change or delete them, and they are emailed to the person who has created the page.

Top

4.f Assignments – Searching

You should give the initial page for your assignment the title "Home page" so that people will be able to find it. If you view the Class Documents, you'll see that every page that has been created in E-folio for every assignment will appear. For this reason, you need to know about the searching tools.

On your Main Menu, the links such as "View Class Documents" and "Edit My Documents" have a little icon of a magnifying glass. Click on the icon to search. Here you can base your search on a particular student's work or one of the assignments or even some text within an assignment. To view all the home pages, just type "Home" in the Title field. You can narrow your search to home pages for a particular assignment.

Top

4.g Assignments – Diary

The weekly diary assignment works like any other assignment. In the Assignments section of E-folio, you'll see an assigment called "Diary". Each week you must post a new entry with the title reflecting the date in a numerical fashion – eg. "Diary - 10/23/01". Make sure to set the Audience to Assistant. This means that only you, the assistant and the instructor will be able to view your entry.

Top

5. Adding and linking to images

Now you're ready to make links from within your assignment. You can paste an image into a page, link to an image on another page or make a link to a MultiMedia file you've uploaded; for linking to other pages, you can link to a page somewhere out on the web or link to another page that you've made in E-folio. You'll need to first set up the images and texts and even possibly make the web pages for them so that you'll have something to link to when you make your links.

5.a Embedding images in a page

If you find an image on a web site – such as the THDL Image Database or himalayanart.org – you can paste that into the editor tool (called EZ-Edit) that appears when you work on your assignment in Internet Explorer on a Windows computer. If you find an appropriate image on a web page, right-click on the image and then choose Copy. You can then paste it into the editor. In this case what you're actually doing is using the editor to copy the web location (URL) of that image and paste that bit of descriptive text into the behind the scenes HTML code.

If you are pasting in an image from the THDL Image Database, you can just paste in the URL that appears at the bottom of each image – it will look something like this: "http://hitchcock.itc.virginia.edu/TibetMedia/JPG/A2517.JPG".

You can also easily embed an image file that you've uploaded to the E-folio MutliMedia space. (Uploading MultiMedia is described above.) Just follow the link from your E-folio Home Page to Edit My MultiMedia. Click on View to see your desired MultiMedia item. Right-click on the image itself to copy it, then go back to your assignment and paste it in.

If you have an image embedded in a page, you can use the editor to do some simple formatting, such as changing the size and alignment and adding a border. With your assignment opened up in the editor, click on the image you'd like to manipulate and click the image editor button in the upper right of the editor:

Here you can change the dimensions of the image (though you have to perform your own calculations to maintain the proportions). You can also set a border for the image (it will be black) by entering a number in the Border field, determine the empty space around the image with HSpace and VSpace, and set the alignment of the image on the page. To see the effect of your changes click OK.

Note that if you've resized the dimensions and you click on the image edit button again, the image will revert to its original size.

You can click on the image and move it around within your assignment in the editor. If you want to delete the image, you must click on the delete key -- the backspace key will not delete it.

5.b Linking to images/MultiMedia files

In addition to pasting an image into your web page, you can make a link to a MultiMedia file you've uploaded to E-folio.

To get the link location of the MultiMedia file, folow this procedure:

  1. Home
  2. Edit My MultiMedia
  3. Find the MultiMedia file you want to link to. Tick the Comments box.
  4. Click View.
  5. In the green box at the top, select the bottom line from just after "Link to Page:" it should look something like this: "MyDocumentsDetail.cfm?IDMyDocument=791". Press control+c to copy it or right click and choose copy.

If you choose that location, when the viewer clicks on the link, it will open up that MultiMedia page, complete with the title and notation you've provided. If you want to link merely to the image, instead of copying the location after "Link to Page:", copy the location that appears after "Link to File". It should be something like: "users/dfg9w/images/rikor1a.jpg"

Go to Edit My Docouments. In My Documents, choose the assignment you'd like to edit and click Edit. Highlight the text that you want to serve as the link and click on the button that has a picture of a chain link. Make sure to delete the "http://" part of the URL and paste in the new location by typing control+v. If you want the link to open up a new browser window, set the target to "_blank".

Note that if you have some linked text and would like to change the URL, you cannot just click the Link button.


You can either switch to the code view and edit the URL manually, or unlink the text using the Unlink button, and then re-link it.

Top

6. Linking to other pages

Go to Edit My Docouments. In My Documents, choose the assignment you'd like to edit and click Edit. To link to a page on the web, highlight the text that you want to serve as the link and click on the button that has a picture of a chain link. For the URL, the default setting includes "http://". If you are linking to a web address that starts with "www", type that after the "http://". Otherwise, if you have just copied the whole address from a web page, copy that in place of the "http://". If you want the link to open up a new browser window, set the target to "_blank".

If you have created multiple assignments, when you choose to edit one of your assignments you'll see something below it: "My Other Documents". This is very useful because it lets you view the other assignments you've posted, and it shows you their link location, which is vital if you want to link to these other assignment pages. So if you want to link to another assignment instead of a page out on the web, do as you did above but enter the location of your assignment. So, first copy the location of your desired link (highlight it's location in My Other Documents and press control+c). Go back to the document you are editing and highlight the text you want to serve as the link, and click the link button. Make sure to delete the "http://" part of the address and paste in the new location by typing control+v.

To save your changes, click Replace No. X, where X is the number of the assignment you are editing.

Top

7. Navigating the 3D Presentation space

If you want to wander around within your section's 3D space you can do it in a couple of ways:

  1. From your e-folio home, go to Presentations, then follow the link to "View all VRML presentations". This should cause the browser to load up the plug-in so you can explore the 3D space.
  2. Having done that, if you're using Internet Explorer, look along the left side of the interface (beyond the boundaries of the room) and you'll see a couple of sets of vertically lined up buttons. In the upper set, make sure "walk" is highlighted. If it's not the case, then click on it. In the lower set, make sure that "plan" is highlighted.
  3. Now you can move around within the space. Press your left mouse button and then keeping it pressed, move around. The only problem is that you go through walls and it's a little hard to navigate if you're not used to it.
  4. For a more controlled experience, use the 4 arrow keys on your keyboard.
  5. If you know what room you want to go to, there are 2 ways to do it:
    1. Where it says "goto" at the bottom left, left-click on that and keep your button pressed down. You'll see some sub-menus, among which is "Viewpoints". Choose the room that you want from there.
    2. Or, right-click somewhere in the room (not on one of the window portals) and keep your button pressed down. You'll see those same sub-menus, from which you'll go to "Viewpoints" and choose the room that you want.

If you want to see the movies playing on the wall they need to be downloaded, which may take quite a while depending on your connection. On grounds it takes a couple of minutes; elsewhere it could take a very long time. There should only be movies in the group rooms and not the individual rooms. When you look at the 2 big windows (as opposed to the 4 little ones), the one on the left is the one that will have the movie in it. If the window appears blue, either there is no movie or it is not yet finished loading. If the window is black or contains the opening picture in your movie, then you should be able to click on it and have it play in the window.

Top