eportfolio Software Guide The SF State student s guide to creating and managing an electronic portfolio San Francisco State University Online Teaching and Learning 1600 Holloway Avenue Burk Hall 224 San Francisco, CA 94132 (415) 405-3536
Table of contents 1 Introduction 3 2 Getting to know the efolio software 4 2.1 Signing up for an efolio account 4 2.2 Logging in to efolio 4 2.3 Navigating through the workspace 5 3 Understanding the content area 7 3.1 Selecting a design 7 3.2 Using datatypes 7 3.3 Using tags 8 3.4 Preparing a reflection 9 3.5 Using related content 9 3.6 Creating content using the basic datatype 10 3.7 Creating internal and external links 11 3.8 Uploading files and images 12 3.9 Linking to a video 13 4 Building your site 14 4.1 Using the site management and work areas 14 4.2 Adding images and files 14 4.3 Using the content tools 15 4.4 Creating sub-pages 16 4.5 Adding and deleting pages 16 4.6 Renaming pages 17 5 Publishing your site 18 5.1 Creating a new site 18 5.2 Modifying site privacy 18 6 Appendix A Finding support 19 2
1 Introduction Welcome to Academic Technology s eportfolio Software Guide! efolio is a web-based eportfolio software tool used by San Francisco State University (SF State) and created by efolio Minnesota as a way to help you build a living showcase of your education, career, and personal achievements. efolio version 2.0 (efolio v2) is the newest version of this software. It requires no previous web design experience and uses a drag-and-drop technology to give users more control over the information structure of their sites. efolio v2 follows the principles of the SF State eportfolio process: Collect, Select, Reflect, Build, and Publish. Since it follows this process, you should structure your eportfolio within these recommended guidelines: Collect all content, files, and/or images that you would like to use in your eportfolio Select specific content you would like to feature, or have been asked to include in your eportfolio Reflect on your personal and academic experience(s) and support the content you upload into your eportfolio with reflective writing and clear labeling Build your eportfolio using the content you have selected Publish your eportfolio by making your efolio site public The eportfolio website (http://eportfolio.sfsu.edu) has a gallery with examples of student eportfolios built using efolio software. We encourage you to explore a variety of eportfolios across many disciplines to get ideas and inspiration as you begin creating your own portfolio. This manual will help you understand the overall eportfolio process with specific step-by-step information about how to use the efolio software supported by Academic Technology at SF State. 3
2 Getting to know the efolio software 2.1 Signing up for an account Signing up for an efolio account is a one-time, online process. 1. Connect to the Internet. 2. Open a web browser. Note: The preferred web browser for efolio v2 is Mozilla Firefox 3.0 and up. You may download this web browser for free at http://www.mozilla.com/en-us/firefox/personal.html. Other web browsers that work with efolio are Apple Safari 3.1 and up and Google Chrome. There have been many problems associated with using Microsoft Internet Explorer, so it is not recommended to use this browser. 3. Go the efolio Sign-up page at http://signup.efolioworld.com. 4. Click Continue on the first screen. 5. Read and accept the Terms and Conditions. 6. Enter your Sign Up Code. Note: Each department has their own sign up code. Contact your instructor for your department s sign up code. 7. Complete the Account Details. Fields that are in bold are required. 8. Click Continue to verify the Profile information, then enter the verification characters below. 9. Click Save. 10. Click on Login to your Account. 2.2 Logging in to efolio 1. Check the email account you submitted in the sign-up process for a message confirming your account information. 2. Go to the efolio Login page at http://login.efolioworld.com. 3. Enter your User Name and Password. 4
Note: Be sure to write down the email address and password you submitted in a safe place. You will need this information when you sign into your account. 4. Bookmark the login page on your personal computer s browser. Note: If you have forgotten your password, you can use the "forgotten password" link on the login page. Academic Technology will not have access to the email address and password you used when you signed up for your account. Contact efolio Minnesota directly for this information at 1-800-456-8519 or at http://www.efoliominnesota.com/. 2.3 Navigating through the workspace The efolio work interface is called the Workspace. Each area of the Workspace serves a specific purpose to help you build, edit, and manage your eportfolio. 1. Content area This area is located on the left side of your Workspace. It is where content is created, saved, and deleted. It contains the following sections: New Content This is where you create content and where you upload files and images. To Do This section contains a list of items to do at a later time. My Content This section, known as the Digital Locker, is where you save and organize all your content once created in the New Content section. Trash This section contains all your deleted content. 5
2. Work area This area is located in the center of your Workspace and is where you design the pages of your eportfolio. It is divided into three sections: Left and right columns (also known as sidebars) These areas are ideal for images, quotes, links to extracurricular activities and organizations, or presentations you ve given. Center area This is the main part of the page. The bulk of content will be shown here. Bottom bar This area is also known as the footer. Information in the footer text box found in the Site Properties will be shown here. 3. Site Management area This area is located on the right side of your Workspace. It contains all the pages, which also serve as the navigation, in your eportfolio. 4. Top tabs This row of tabs is located at the top of your Workspace. They are the administrative controls for your eportfolio and contain the following: Build Selecting this tab allows you to use all the workspace elements to build your site. Mail Selecting this tab will bring you to the messaging area for your eportfolio. It is where you will receive messages from SF State or efolio Minnesota regarding changes or updates to the site. In this area, there is also a feedback log to track users that left feedback on your site Designs Selecting this tab allows you to change the look of your site by choosing from many pre-designed templates. Utilities This tab helps you keep track of the storage used, history of the changes made to your site, and many more. Accounts In this tab you can find account information and invite visitors to view your eportfolio (with a personal password if your site is private). 5. Page name bar This is located above the Work area and contains that name of the page in which you are currently working. You can also locate the Preview button in this area to preview your site during development. 6
7
3 Understanding the content area The most important actions in the eportfolio process are Collect, Select, and Reflect. The Content area is the area in the Workspace where you will perform these actions and where you will do the most work. 3.1 Selecting a design 1. Click on the Designs tab. 2. Click on the Design group drop-down menu and select a design group. SF State has a few department templates located under Custom Designs. 3. Select a design. A preview of the design will appear in the Work area. 4. Choose a color for your design from the color swatches above the preview. Only select designs give you these color options. 5. Preview your eportfolio design by clicking on the Preview button to the right of the color swatches. 6. Click on the Save button once you have chosen the desired design. 3.2 Using datatypes Datatypes are reusable chunks of content that you can create in your eportfolio as way to display information in an organized way. For example, the Contact datatype can be used to record contact information of project leaders, supervisors, managers, instructors, mentors, or recommendations related to a project, employer, or organization in which you worked. You can create datatypes in the New Content section. Each datatype is specific to a certain type of content. Here is a list of the different datatypes and their functions: Activity Use this datatype for activities you have been involved in or helped organized. These activities can include volunteer service or an internship. Affiliation Use this datatype for organizations or clubs in which you were involved as related to a project, your major, or employment. 8
Artifact Use this datatype to show exhibits, store windows, shows, and presentations you have created through an internship or a project. Basic Use this datatype for miscellaneous content such as welcome messages, reflections, or stories. This is the most common datatype used because it does not ask for specific information. Contact Use this datatype to enter information for employers, club organizers, internship organizers, and recommendations. Course Taken Use this datatype to enter information about courses you have taken. Course Taught Use this datatype to enter information about courses you have taught. Credential or Degree Use this datatype to enter information about your accomplishments, degrees, or credentials. Employment Use this datatype to enter information about your current and previous employment. This employment can be paid, voluntary, or an internship. Event Use this datatype to record any event in which you organized or were involved. Goal Use this datatype to enter goals you have set and the timeframe in which you will reach those goals. HTML Use this datatype to embed HTML items such as video on your eportfolio pages. Skill Use this datatype to enter special skills you have acquired or learned such as cake decorating, for example. URL Use this datatype to enter external links, links that take the user to other websites, on your eportfolio pages. 3.3 Using tags Each item in your eportfolio can be labeled with a unifying word or phrase called a tag. According to Wikipedia, "a tag is a non-hierarchical keyword or term assigned to a piece of information." In your eportfolio, it is important to tag all your content to help you organize, find, and build pages, as well as to help you search for content. This is especially helpful in the later stages of development when your Digital Locker becomes filled with content. Note: Your instructor may give you a list of tags you can use. Each item can be assigned to multiple tags. 9
To add a tag: 1. Click on the My Content tab in the Content area. 2. Locate and click on the desired item, then click on the Edit button from the yellow sidebar. 3. A window for that item will open in the center Work area. Click on the Tags button located at the bottom right of the window. 4. The Tag window will appear in the Work area. Enter a tag in the Type a tag here text field. It will appear in the Tags for this Content text box. 5. Once you are done adding your tags, click on Ok button at the bottom right corner of the window. 6. Click on the Save button to save the tag. Note: If you have tagged previous items, you will see a list of tags under the My Current Tags text box. To add a word from the My Current Tags list, click on the word in the left column and it will appear in the right column. 3.4 Preparing a reflection A reflection is a statement that describes your personal experience with and thoughts about a specific project, paper, etc. You can add reflections in any or all of the content items in your eportfolio. To add a reflection: 1. Click on the My Content tab in the Content area. 2. Locate and click on the desired item, then click on the Edit button from the yellow sidebar. 3. A window for that item will appear in the center Work area. Click on the Reflections tab in the window. 1. Click on the Add button at the bottom right. 2. The Reflection will appear. Enter your reflection in the text box. 3. When you are done, click on the Save button at the bottom left of the window. The saved reflection will appear in the Reflections window. 3.5 Using related content Related content is information that relates to a specific project, paper, or artifact. This information can range from external websites, papers, and images. You can add Related Content in any or all of the content items in your eportfolio. To add Related Content: 1. Click on the My Content tab in the Content area. 10
2. Locate and click on the desired item, then click on the Edit button from the yellow sidebar. 3. A window for that item will appear in the center Work area. Click on the Related Content tab in the window. 4. Locate items from the My Content section in which you would like to add as Related Content. 5. Click on, hold, and drag the item(s) from the My Content section into the Related Content window. Release the hold and drop the item in the window. Note: Any related content must be uploaded or created first in order to find it in your My Content area. 3.6 Creating content using the basic datatype In the development of your eportfolio, the majority of your work will be in creating the content. Before you build your site, you must collect and create content. To create miscellaneous content, such as a welcome statement, use the Basic datatype. The Basic datatype does not ask for specific information so it works well for almost any type of content. To create a basic datatype: 1. Click on the New Content tab located in the Content area. 2. Click on the Add New... link to see the list of datatypes. Click on the More... link to extend the list. 3. Click on the Basic link. Then, click on the Create button on the yellow sidebar. 4. Enter the information shown in the Basic window in the Work area. Title This is title of your page and is required for all datatypes. You will notice that the title is in bold. Brief text This is a summary of your Full text. Brief text is shown when a datatype is dragged into the sidebars, or the left and right columns, of a page. Full text This is the actual textual content for your site. Related Content Drag items that are related to the content on the page such as papers, images, links to articles and/organizations, and etc. For example, if the content on the page 11
is about childhood obesity, the Related Content could be a paper about the issue or a link to an article supporting your content. Reflection This is a personal summary of a particular project, paper, article, etc. Feedback This is a log of all feedback you have received from visitors to your portfolio. Feedback is only available if the feedback option is activated. 5. After all information is entered, click on the Save button at the bottom right of the window. 3.7 Creating internal and external links Links, short for hyperlinks, are HTML coded connections to other websites from your eportfolio (external) or among pages within your eportfolio (internal). There are two ways to create a link. Creating links within your content: 1. When you enter text in the Full Text text box, highlight the word(s) in which you would like to create as a link. 2. After highlighting the desired word(s), you will see the Link icon (chain link) appear in the text box toolbar. 3. Click on the Link icon (chain link); the Insert/Edit link window will appear. 4. Enter the link URL, or the web address for the website, and select a target window. Once the link is clicked, this will either open the website as a new window or in the same window. 5. Enter a title. 6. Click on the Insert button at the bottom left of the window. 7. The word(s) you selected will appear blue and underlined. This signifies that it is a link. Creating links using the URL datatype: 1. Navigate to the Content area and click on the New Content tab. 2. Locate the URL datatype under the Add New link. Then, click on the Create button on the yellow sidebar. 3. Enter information in the window opened in the Work area (see image below). URL Label This is the title of the link and is required information. URL Type This is the prefix that appears before the web address. Typically, it is http:. In some cases, it is https: to represent a link that is stored on a secured server. URL This is the web address of the website and is required information. New Window This indicates that the page will open in a new window when a viewer clicks on the link. Intermediate Page? This indicates that the page opens in the same window when a viewer is clicks on the link. 12
3.8 Uploading files and images Supporting documents, such as papers and images, can be helpful for the overall message of your eportfolio. Each eportfolio account can hold up to 50MB of information. Because of this constraint, it is best not to upload large image and document files. Acceptable files to upload: Word Documents -.doc,.docx Portable Document Format -.pdf Microsoft excel -.xls Microsoft PowerPoint -.ppt Audio files -.mp3 Image files -.jpg,.gif,.png Note: Reduce the size of your images to 72 DPI by using software applications such as Adobe Photoshop. This will help you stay within the 50MB storage capacity. You may also use a free tool located on the SF State eportfolio site to help you reduce images. To use the tool click on the following link: http://eportfolio.sfsu.edu/imageresize.php To add files: 1. Navigate to the Content area and click on the New Content tab. 2. Click on the Upload arrow. An expanded list will appear. 3. Click on the File link and choose the Upload button from the yellow sidebar. 4. A window will appear in the center Work area. Click on the Browse button and select your file. 5. Select a file and click on the Open button located at the bottom right of the window. 6. Enter all the necessary information for the file. 7. Once you are done, click on the Save button located at the bottom right of the window. Note: You cannot upload files that have long title names or contain spaces. Please title your files with no more than eight letters and without spaces and symbols. To add images: 1. Navigate to the Content area and click on the New Content tab. 2. Click on the Upload arrow. An expanded list will appear. 3. Click on the Image link and choose the Upload button from the yellow sidebar. 4. A window will appear in the center Work area. Click on the Browse button and select your file. 5. Select an image file and click on the Open button located at the bottom right of the window. 6. Enter all the necessary information for the image file. Title This is the title for the image and is required information. Rollover Text This is short descriptive text used as an accessibility component about the image. Users that are visually impaired use a program called JAWS, which reads the website code and describes what is on the page. Rollover text, or alternate text, gives information to this program. Public Image The Digital Locker gives users the option of housing images in their eportfolio and linking to other sites. It functions similar to sites like Flick'r and Picasa. 13
URL You can enter a web address that relates to the image. Viewers can click on the image and go to another site. Full Text You can enter a description of the image. 7. Once you are done, click on the Save button located at the bottom right of the window. 3.9 Linking to a YouTube video Since video files are relatively large, you should add a video to your eportfolio by linking to an external site in which it is hosted. An example of an external site that hosts video is YouTube.com. YouTube provides two ways for users to link to their videos: URL A direct link to the video where people can view the video on the YouTube.com website. Embed A code that you can copy and paste to embed the video into your eportfolio. To add video: 1. Go to YouTube.com and locate the desired video. 2. Navigate to the video s URL in the browser s address bar. Highlight and copy the URL. 3. Go to your eportfolio site. Click on HTML datatype located under the New Content tab in the Content area. 4. Click on the Edit button from the yellow sidebar. 5. In the window in the center Work area, enter all the necessary information including the following elements: Title This is the title of the video. Embedded HTML This is the embed code that you copied from YouTube.com. Paste the code or URL here. 6. Once you are done, click on the Save button at the bottom right of the window. 14
4 Building your site Once you have collected and created content in your eportfolio, you can move onto the Build part of the process. Building your eportfolio in efolio is similar to painting. The content items under the My Content tab are your supplies and tools, your brushes and paints. The pages found in the Site Management area are the surfaces, or canvasses, on which you can choose to paint. The Work area is the easel to hold your canvas. 4.1 Using the site management and the work area The Site Management area contains all the pages that you will use to build your site. When you choose a particular page from this area, you will see it appear in the center Work area. To build a page: 1. Navigate to the Site Management area and choose a page. 2. Click on the pages and choose the Build button from the yellow sidebar. Your chosen page will appear in the center Work area. You will know that you are on the correct page if you see the name of the page in the Page Name bar at the top of the Workspace. 3. Click on the My Content tab. 4. Select a content item. Click on, hold, and drag the content item to the desired location in the Work area. Repeat this with as many content items you wish to add to the page you are building. 5. Navigate to the Site Management area to select other pages to which you also wish to add content. 6. Click on the preview button in the Page Name bar above the Work area to preview the page you are developing. 4.2 Adding images and files To add images and files, navigate to the My Content area and drag and drop them into the center Work area. Files that are added to the Work area will appear as a list on the page and will be automatically resized. 15
Images and files can be added in 3 ways: Dragging them into any of the sidebars. Dragging them into the center Work area. Dragging them into a datatype where the content will wrap around the image. Note: Dragging images into a datatype may take some practice. Drag the image into the datatype until it reduces in size. Then, let go. 4.3 Using the content tools The Content tools are found when you mouse over any content item in the Work area. Edit (paper and pencil) This tool enables you to edit information within a content item. Content Properties (tools) This tool enables you to edit the properties for a content item. o Fields and Formatting This is a list of fields that are available for a content item. The fields that are crossed out are not currently viewed on your eportfolio. To make any of these fields available, select the Show Field checkbox and be sure to click on the square on the bottom right. A checkmark will appear. You may view the fields chosen in the preview window on the right side. o Feedback Setup This option enable peers and colleagues to leave feedback in your eportfolio. Feedback can be setup for all items in the Content area. Delete (minus sign) This tool lets you remove the content item from the page you are currently building. It will not delete it from your eportfolio as a whole. 16
4.4 Creating sub-pages There are two reasons to rearrange pages within your eportfolio site. The first is to change the organization of the pages and the second is to move pages into subpages. Sub-pages are the pages that make up the sub-navigation of your site. Organizing your pages into sub-pages will help you format your content into smaller chunks, which will make it easier for users to navigate through your eportfolio. To create sub-pages: 1. Go to the Site Management area and select a page. 2. Click on and hold the page. 3. While holding the page, drag it under the desired page. You will see the Add icon (plus sign) in areas where it is acceptable to add the sub-page. 4. Release the mouse once you are satisfied with the location. The page will appear indented below the desired page. Note: The icon that appears beside your cursor during this process will show what action will take place. The Move icon (papers with arrow) indicates that you are moving the page. 4.5 Adding and deleting pages To add a page: 1. Go to the Site Management area and select a page. 2. Click on the page and choose the Add button from the yellow sidebar. 3. A window will appear in the Work area. Enter all the necessary information. Title This is the title of the page being added. URL shortcut This is the name that appears at the end of your page web address. For example, for the website http://angieportacio.efolioworld.com/eport101/efolioaddpage, the URL shortcut is /efolioaddpage. Status This allows you to control the privacy of individual pages. Enabled means that the page can be viewed. Disabled means that the page cannot be viewed. Hidden means that the page is available, but content is hidden. Last Edit Date This is the editing history for your page. You can find more editing information in the history log under the Utilities tab. Provide an RSS Feed RSS stands for Really Simple Syndication and is a way for users to subscribe to your eportfolio to view current changes without having to visit the site regularly. When this option is available, viewers can subscribe to the specific page. Once the viewers subscribe, they will be able to receive any updates you make to your eportfolio page. For more information on RSS Feeds go to: http://en.wikipedia.org/wiki/rss 4. Click on the Save button at the bottom right of the window. 5. You will see the page you added at the bottom of the list of pages in the Site Management area. To delete a page: 1. Go to the Site Management area and select a page. 2. Click on the page and choose the Delete button from the yellow sidebar. 3. The page will no longer appear in the Site Management area. 17
Note: Once you delete a page from the Site Management area, it will be permanently deleted and irretrievable. So, be sure you are deleting the correct page. 4.6 Renaming pages To rename pages: 1. Go to the Site Management area and select a page. 2. Click on the page and choose the Properties button from the yellow sidebar. 3. A new window will appear in the center Work area. In this window, enter a new name in the Name or Title text field. 4. After you have changed the name, click on the Save button at the bottom right of the window. 5. Check the page in the Site Management area to see the renamed page. 18
5 Publishing your site After you build your pages, the last part of the process is to Publish your eportfolio. 5.1 Creating a new site Users can have multiple eportfolio sites within one efolio account. You may create as many sites as you want so long as you do not exceed the 50MB storage capacity. A great feature of efolio is that you can repurpose the same content from your My Content area, creating new sites to target different audiences. For example, you can have an education/academic eportfolio, a professional eportfolio, a community service eportfolio, or a basic one-page digital CV using the same content, but displaying it in different ways. To add a site: 1. Click on the Add icon (plus sign) located near the Privacy Setting box. 2. A window will appear in the work area. Enter the necessary information. Site Label This is the name of the site you are creating. URL Shortcut This is the name that appears at the end of your page web address. For example, for the website http://angieportacio.efolioworld.com/eport101/efolioaddpage, the URL shortcut is /efolioaddpage. Status By default, your eportfolio is set to Private. You may change your privacy to Public, Private, or Disabled. Heading This is the title, or main heading, of the site. Slogan This is the subheading for the site. Description This is a brief description of the site. Keywords These are words you can enter into a web browser to find your site on the Internet. 3. Once you are done, click on the Ok button located at the bottom right of the window. 5.2 Modifying site privacy efolio v2 lets you control the security of your eportfolio. The Privacy section is located at the top of the Site Management area, below the site name. It has a drop-down menu containing following options: Public, Private, or Disabled. Public The Public setting makes your site available to everyone with access to the Internet. The general public can view your eportfolio. Private By default, all accounts are set to Private. The Private setting keeps your eportfolio accessible only to those you have given a password, which can be found under the Accounts tab. If you choose the Private option, the general public cannot view your eportfolio. Disabled The Disabled setting makes your eportfolio unavailable to the public. 19
6 Appendix A Finding support For further help with your eportfolio site, consult one of the following resources. eportfolio online help documentation https://quickguides.calstate.edu/quickguides/search/efolio eportfolio examples http://eportfolio.sfsu.edu http://www.efoliominnesota.com efolio account and password help efolio Minnesota Email: efolio@custhelp.com Web Chat: http://www.efoliominnesota.com Phone: 1-800-456-8519 eportfolio content help SF State Online Teaching and Learning Email: eport@sfsu.edu Phone: 415-405-3536 Examples of how efolio Datatypes display http://angieportacio.efolioworld.com/demo efolio 101 for Faculty at SF State http://angieportacio.efolioworld.com/eport101/home 20
21