ePortfolio User Guide Tutorial

Introduction

It seems that many students attending Penn State are looking for a way to use their access account as a way of storing data for future employers and opportunities after they graduate. Thankfully, the IT staff has developed the ePortfolio to do just that. Not only can students use it as a portfolio, they can use it as a way to create a resume and get their name out on the internet without knowing a thing about website hosting and development. How do you use this service though? Simple. Follow this tutorial and you will soon be able to upload pictures, reports, and other posts to your own website!

Getting Started

Before we're able to get our hands dirty, we first must make sure that we set-up webspace. To do so you first must:

• Be a Penn State Student
• Have internet Access
• Have five minutes of free time

Five minutes? Yes, it's that simple. To start, you must naviagte to https://www.work.psu.edu/webspace/ and read over the three paragraphs. Here, you will be prompted with a five question quiz about the internet where you must answer at least four of the five questions correctly. Understand that you may take this quiz as many times as you need to until you receive proficiency. Once you complete the quiz, you will be redirected to a new site telling you that the IT department will set-up webspace for you under "http://www.personal.psu.edu/YOURPSUSERNAME" in Three business days.

After you recieve notice that your space has been set-up. you're ready to get into the nitty gritty. It's time to log in and view the Movable Type interface! To log in, first navigate to http://blogs.psu.edu/. Once you are here, you'll notice that Penn State has offered some general words on blogs and how they can be used for academic purposes. Feel free to read through that and once you are finished, move along until you find an image that looks like this:

Click on this button and you will be taken to a login screen. Enter your username and password and you will be taken into the Moveable Type interface. Now you're ready to move onto creating the blog and adding content to it. You can view that in the next section.

Create Your First Blog!

We left off last logged into the Moveable Type interface. For most students, Moveable Type is a foreign program that they've never heard of or used. Thankfully, it's an intuitive platform built to satisfy people of all levels. For our purposes, we're going to want to use the blogging feature.

At the top of the screen you'll find a navigation bar that looks much like the one below.

• Move your mouse over the item that says "Create" and move the pointer down to "Blog" as shown.
• Click on "Blog".

You will now be redirected to a page with a screen that looks much like the one below. This form will be the basis of your portfolio so be sure you fill it out correctly.

• To start, name your blog "Portfolio" as this is going to act as your Penn State Portfolio.
• Click on the arrow beside Template Set and find "Professional Website".
• Thankfully, Moveable type automatically completes the rest of the form with the information given. You will notice that it gives the URL for your portfolio and a root to upload files if need be. Once you have finished the form, click the button that says "Create Blog".

You will now be redirected to a new page labeled General Settings. Here you are able to describe your Portfolio within the "Description Box" and manage your Portfolio's main heading.

• Change the label from "Portfolio" to "YOUR NAME's ePortfolio".
• In the description, enter something along the lines of "A Compilation of Work Done at Penn State". You can personalize it with anything else you'd like as well, be creative.
• Once you're done with the description, save your portfolio with the save button at the bottom.
• After, find the green bar at the top and the link that says "Publish". Publish your site so your changes can take affect. In the pop-up box, allow it to publish all files. You can see a picture below.

Now that the blog is published, we'd like to make note of a good feature to use throughout the tutorial. In the image below you can see a toolbar with a button to preview your website. This preview button will allow you to view all changes that you've made to make sure that it looks just right. Use it as frequently as you'd like because it's an important thing to check

With the blog now set-up, we are ready to move on to adding your picture to the main page which is covered in the next section.

Adding a Picture to Your Bio!

In the last section we covered creating your actual blog. Now it's time to make the blog itself so you can use it as your portfolio. The first step in doing this is to add a picture of yourself so people know who you are. To do this, click on "Manage" in the toolbar and move down to "Pages". Click on pages as shown below.

You will now see a screen like below, click on the "About" page. This is where we can add our picture to our biography. You can also take note of the other pages already created. Those are editable much like this one. The first link "Welcome to Our New Website" is typically used to introduce your portfolio and give some information. If you click on it, you can get some helpful pointers already within in. The contact page will be used so your employer or other onlookers can get a hold of you.

Once inside the "About" page, you'll notice that there is a lot of information that you can fill in.

• To start, you can change the title of the page from "About" to anything you'd like. For now, we'll leave it.
• The most important feature we will worry about though is the "Body" section. This is where all the content will be added such as a picture. You may erase the text in the box if you'd like but if you do, be sure to keep the "Edit this Content" link since it is handy when viewing your site. In the picture below you can see the button we pill press to add an image.

After you click this, a new window will pop-up for you to work with. You will click on the upload image link found in the top left corner as shown below.

This will bring you to a new screen where you are able to upload a picture from your own computer.

• Click on "Upload Image" and navigate to the place that you have a good picture stored. Remember, this is for future employers so find a picture that looks dignified and studious.
• After you've selected the picture, click on the "Upload" box in the bottom right corner to upload it to your page.
• You will be brought to a new page as shown below.

Here you are given different options to style the image and name it. Let's start by changing the "Name" of the image to "Me". In the "Description" box, change this to "This is a Picture of Me.". You don't have to worry about tags but can use them to categorize your photo. In the bottom blue box, make sure that the check box beside "Display Image in Entry" is checked. Change the "Alignment" to "Left" and you are free to press "Finish" in the bottom right. You will now be taken to your entry again and your picture will be beside the text from before "Wrapping" it. You may now press "Save" in the bottom left corner of the page and you will be told that your page is being published. You will find a green box on the top of the page that says "View Page" (as shown below). Click on that link to see your new page.

We have now edited our first page and added a picture to it! It's time to learn about creating .pdf documents and your resume!

Create a Resume in .PDF Format!

Creating a resume is something that most students have a lot of difficulty with. Thanks to Microsoft Word and http://www.doc2pdf.net/ this task becomes much easier. To start, let's open Microsoft Word.

Unlike the 2003 version of Word, users can no longer create resumes as simple as a few clicks. Microsoft Word 2007 offers a wide range of resume templates that are free to download online however and that's where we'll start. Navigate to http://office.microsoft.com/en-us/templates/CT101043371033.aspx and you will see different resume types. Clicking one will give you options to use some pre-made resume templates. Each one will have a download link next to it for easy use with Word 2007

For those that use Word 2003, you can get to this by following the sequence below.

• On the File menu, click New.
• In the New Document task pane, under Templates, click On My Computer.
• Click the Other Documents tab.
• Double-click Resume Wizard.
• If you do not see this wizard in the Templates dialog box, you might need to install it.
• Follow the steps in the wizard.

For those without Word, there are a multitude of free online templates and tutorials that can help you create your resume.

Once we have created and saved our resume, open your web browser and follow this link: http://www.doc2pdf.net/. This website is free and will convert your document to a .pdf file. What is a .pdf file? It stands for Portable Document Format and is widely used by employers and others since it can not be edited and it can be opened in Adobe Acrobat or other programs like it. We will want to convert it to a .pdf so we can directly link it from our ePortfolio.

• Scroll to the bottom of the page.
• Find the blue box and the items on the left-hand side.
• "Choose File" in the Convert This Document part. You will look for the saved resume on your computer.
• Make sure Portable Document Format (PDF) is highlighted in the next drop-down list.
• Click Convert Document and it will save your new .pdf file on your computer where you tell it to.

If you do own Word 2007, you are able to save your resume as a .PDF directly by clicking Save as and click the option PDF or XPS. Choose a file name and make sure to save it as the type PDF.

Now that we have a resume, let's go back into our protfolio through Movable Type. We'll navigate back to the "Manage" tab and select "Pages" as shown below.

Let's select our "About" page again and you will see that we still have our image and some text in there. Let's Highlight that text and type "Resume: ".

As you can see above, we're selecting the image beside the one we used in the last section to "Add and Image". It is called "Insert File". Once we click on it, we will be brought to a familiar screen where we can upload a new file or use an existing one (Our Picture) that we've uploaded before. This makes it easy to use the same image multiple times if you need to.

• Upload the Resume like the Picture.
• On the "File Options" screen, Name the file Resume.pdf.
• Describe it as My Resume.
• Click Finish in the bottom right corner.

You will be redirected back to the page screen and you can "Save" the page in the bottom left corner. Your page will be published and you will see the green box to view the page again. View your page to make sure it looks correct. You can also click on your Resume.pdf and see that it opens in a PDF format for easy viewing.

We've now successfully created and added our Resume to our portfolio! Next we will learn how to add additional pages to your portfolio to display other information.

Add Additional Pages

Adding pages beyond the basics is something that most students should consider. Beyond the "About" page, "Contact" page, and "Welcome" page you may want to add a page to display the classes you've completed. Perhaps you want to add a page for projects you have worked on in classes or papers you've written. Thankfully, Movable Type allows us to add other pages so we can get a better functioning portfolio.

As you can see in the image below, we are not managing anymore. Instead, we are creating a new page by clicking on "Create" and then "Page". After clicking, you will be directed to a page that looks similiar to the "About" page we edited earlier. They should though since they are nearly the same thing. Let's go ahead and create a page for our projects and papers that we've created at Penn State.

• Go to the "Title" bar and name the page My Work.
• In the body, we can use the "Insert File" command we learned in the last section to add papers (converted to .pdf) and other items.
• In the right column, uncheck Comments and Trackbacks.
• Once done, make sure you go to the "Tags" section and add @topnav. This will ensure that it is added to the top level navigation on our main website.
• Click Save in the bottom left corner.

Our new page will be published and we can view it in the Green box at the top of the screen. Now that we know how to add pages and edit them, it's time to get ready to give this to an employer. We will learn how to do that in the last section.

Prepare to Show to a Future Employer!

The final step is to distribute to an employer or other individual who would like to see it. Doing this is crucial since if no one sees it, it doesn't serve much of a purpose beyond keeping a personal record. Thankfully, Penn State automatically sets up a URL to give to the inquisitive party.

Before giving the URL though, follow this checklist:

• Go to each page and check for spelling and grammar mistakes. Employers don't want to see those.
• Check all links and images to see that they're working properly.
• Make sure all pages you wanted Published are published.

If that is all correct, find the image shown in the picture below.

This will bring you to your main page of your portfolio. You will be able to move in and out of it easily thanks to Movable Type coding. Your URL is located in the browser window at the top. It should look like: http://www.personal.psu.edu/USERNAME/blogs/portfolio/. This is how employers and others can view your information. Attach this to your application or tell them about it and they will be able to view your information from all over the world as long as they have internet access.

And with that, the tutorial is concluded. As you see, Movable Type is a powerful program that allows you to publish your own website from anywhere in the world with internet connection. There are endless possibilities with this machine so go ahead and look around a little on your own after this. Good luck in the Job Hunt and Happy Blogging!