Page 1

Posting Your Professional Portfolio On-line

“Hi everyone! I’m True Grit! Most of you know me as the UMBC Mascot. You want a job right? You want to show people what you can do? You want to reach more people to do that? the Internet is perfect for showing off your stuff. I have lots tips and tricks and I’m gonna guide you thru the whole deal. It’s gonna be awesome. Even a cat could do it We’re going to make an on-line portfolio!!! I have set up a course for you to follow that’s going to show you everything you need to know. Just follow along and don’t worry, I’ll pop in to make sure you don’t get lost.

Terminal Performance Objective •

After completing this web-based training course the student enrolled in EDUC 689: Portfolio Development & Talent Management will successfully build a web-site with all required elements of a professional portfolio.

Modules •

Module 1 – evaluating web-building sites

Module 2 – learning about files

Module 3 – developing your on-line portfolio

tips from true grit

“Module 1” – hyperlinks right to Module 1 “Module 2” – hyperlinks right to Module 2 “Module 3” – hyperlinks right to Module 3 “There are three modules in this course. You are encouraged to work through the modules sequentially. After you’ve done that, you are welcome to go into any of the modules for closer study by clicking on the hyperlink “Module 1,” “Module 2” or “Module 3” Whenever you see my bone , you can click to see more information about the topic. . At the end of the course, there will be a slide with links to more learning as well as links to pdfs that you can print out or save for later.

Module 1

Given a list of four popular web-building sites, the student enrolled in EDUC 689: Portfolio Development & Talent Management will evaluate each site on five specific characteristics. •

Determine for each web-building site the specifications for hosting audio and video files including file type and size.

List the cost for basic and enhanced use of each web-building site.

Determine the availability of “drop and drag” capability for each web-building site.

Determine the variety and flexibility of templates on each webbuilding site.

Determine ability to own domain name and site-specific email address.

So you decided to make this on-line Portfolio There are a lot of easy to use, inexpensive, Website builders available on the web today. How do you choose which one to use? Well I retrieved some of the best. We can go thru what makes them good and you can pick which one is right for you! (As the dog is reading the above text, overlaying graphics of screen shots of popular webbuilding sites appear)


HTML Flash





the best part is You don’t have to know any of these scary languages to use one of these web-building sites


If you can speak those web languages You are already hand-coding your site... You are trying for an easy “A” in the portfolio class. Better leave this course and check line 1223 of your code. You forgot the close the {}’s. Yep ,I caught that. I thought you should know. The rest of you STAY PUT!!!

A little web humor!

Here is a list of things to consider in selecting a webbuilding site: 1.Cost 2.Can you use your own domain? 3. What about email addresses? 4. What file sizes and types can you use? 5. What are the Templates like? How much can you change them? 6. Can I move the site later if I want?

•“Many web-building sites can be used at no cost. But nothing is free in life – for example, you may have to tolerate ads on your website if you aren’t paying for it. •First, what’s a domain ? A domain is the URL or web address of where your portfolio will be found. On these free-web-builders, it is common for the name of the web-site builder be included (such as vs just truegritsawesomesite .com. If you prefer to use just your domain, you will usually pay extra for that. 1.It would be cool if you could have an email address that is related to your site, like That's better than, isn't it? Again you might pay for that privilege. 2.There are different types of files such as video, audio and text. Different web-building sites have size limitations for different file types. It’s important to consider this when selecting a site, depending on the size and types of files you want to post. You will learn more about files in Module 2. 3.Templates are very helpful to quickly achieve a specific look and feel to your web pages. Web-building sites vary in terms of the number and diversity of templates available for you to choose from. 4.Some web-building sites are easier than other in terms of uploading your files and moving them around on your web site. If the site is “drag and drop” friendly, it will be easy to move files to the site. •You might want to move your site to another host(that’s web-speak for my home, home on the web!). Iti s nice to be able to move your site as it is. Unfortunately that's not usually possible with these web site builders. It’s because of the way they are built. The easier it is to put up a site, the more likely you can’t move it. •Now that we know a little more about them…Let’s compare some of these features between popular web-building sites”

Comparing Web-Site Builders • •

Link to awesome comparsion site

Skill Checks for Module 1

Matching: • Domain name – • Drawback to “free” web building sites – ads on your web site • The look and feel of your web pages – templates • Computer graphical interface – drag and drop

Matching: •Domain name – •Drawback to “free” web building sites – ads on your web site •The look and feel of your web pages – templates •Computer graphical interface – drag and drop

Fill in the blank

When using a free web service, the company may take the liberty of pasting company ______ on your pages.

“advertisement .�

What is a Domain 1. French word for tomorrow 2. The hair on a horse’s head 3. I don know 4. An address on the web

Answer 4. An address on the web

Multiple Choice

Which of the following is a customized email address?

A) B) C)



When of the great things about free websites is you can move the contents later when you are ready to move to another company that provides other features.


Mayb e



Module 2 •

Prepare media for posting on a web site including the appropriate file type and file size limitations for audio, video, animation and print files. •

State optimal video file size and type for the webbuilding site, to be viewed on a tablet, smart phone or CPU.

State optimal audio file size and type for web-building site, to be viewed on a tablet, smart phone or CPU.

State optimal print file size and type for web-building site, to be viewed on a tablet, smart phone or CPU.

“So, why do you have to consider the file size and type when working with a web-building site? There are a few reasons. First, the web-site host has file size restrictions, especially if you’re getting it for free! Second, you want maximum flexibility in terms of devices your end user will view your content on (such as smart phones, tablets and computers), therefore the file type must be compatible with all these devices. Last, you have to consider the integrity of your files – in other words, do you want end users to be able to download or print your files, or not? You probably will want to restrict the ability of the end users to alter your files. These are all important considerations! “ *add clipart of various media (e.g., a musical note, a video camera, etc.).

So you ask what is a file type?

“So what is a file type – I’m so glad you asked. There are many different types of files – audio, video, printed word, excel spreadsheets and so forth. File are coded for storage on the computer. We can distinguish between different files by the 3 or 4 characters at the end of the file name. This extension tells the device (such as CPU, tablet, smart phone) what information is in the file and what program should be used to open it. “

So lets begin with video files… File .flv


Advantages Nearly universal flash video player (Adobe Flash Player versions 6-10) Smallest file size after compression, but retains good quality. Loads quickly on the internet, minimizes bandwidth Smaller than .mov files, recommended by

Disadvantages cannot be seen on IOS devices, like iPhones or iPads

some loss in quality

Youtube .mov

much higher quality files

largest file sizes, up to 5 times larger than mp4

“So let’s begin with the most common types of video files.) Narrate: the common file extensions for video files include .flv, .mov and .mp4 “Flv file -is a file container format used to deliver video over the Internet using Adobe Flash Player. Flash Video content may also be embedded within SWF files. Adobe Captivate is a program that uses FLV files which are output as a single SWF file. FLV is the single most common sharing format on the web today… In addition to the nearly universal flash video player, FLV is popular because it gives one of the smallest file sizes after compression yet it retains fairly good quality. This means that the videos load quickly on the internet, and won’t spend a lot of time using up your bandwidth. The downside is that your iphone and your ipad can’t read them. A (.mov) file indicates a quick time movie file. It is an extremely large file size . It has the best quality for viewing. A (.mp4) file is a video format common to camcorders and cameras. YouTube actually recommends that users upload using MP4 format. It is a standard internet sharing format that works with HTML5 and most mobile devices. This is the format that we recommend for online delivery of your media. …Video file sizes can easily consume your web storage space. And most CMS’s only allow a minimum amount of web storage space for FREE”

So how about those audio files… File




Maintains sound, assures CD quality, universal (runs Format does not compress sound; on most browsers)non compression creating sizable chunks of storage space


Generally offers higher Close to CD quality quality than (.mp3), compresses sound

Compromise between sizes


Universal, compresses sound; downloads quickly

Quality not as good

“Key differences between audio files include: •Ability to compress sound •Ability to maintain sound quality •Universal or software dependant Different audio files include: .wav, .mp3, .aac A (.wav) file is a lossless file that assures of CD quality audio, this file does not compress, They take up a sizeable chunk of storage space… A (.aac) file is a lossy format file , and…delivers close to CD audio quality… An (.mp3)… is supported by most software systems, downloads quickly, These files compress to about one tenth of their original size”

So how about those print files… File




Word 97- Word 2003 format; advance features Printing format not guaranteed offers password protection Document is editable if not password protected; Images can easily bloat files


Word 2007 - Word 2013 format; advance features offers password protection

Printing format not guaranteed Document is editable if not password protected; Images can easily bloat files


Portable document format (PDF); maintains appearance across platforms, edit proof and allows password protection

Files have capacity to become increasingly large with full color graphics

Click for more information about file size:

“Let’s now talk about the different print files In order to print files from the web, smartphone or tablet… Choose print files that have the •Ability to make portable •Ability to maintain appearance across platforms •Edit proof With that in mind we will look at the following ... doc/.docx, .pdf The last 3 or 4 letters indicate the type of print file. Appearance/format is not guaranteed One of the more popular Print files Is now an open standard for electronic documents… A (.pdf)… portable document format Generally maintains appearance across platforms This file is edit proof; and allows password protection… Now let’s talk about the printing file size (.doc/.docx ) including images in a Word document can easily bloat files Causing them to expand rather quickly

What distinguishes between file types? A. B. C. D.

Answer is D

Size of the file First 3-4 characters of the file name Which program automatically opens the file The 3-4 characters at the end of the file name

Matching Match the correct file extension with the type of file 1. 2. 3.

A. B. C. D. E. F. G. H. I.

2 1 3 1 3 1 2 3 2

Video file Audio file Print file

A. B. C. D. E. F. G. H. I.

.wav .flv .doc .mov .docx .mp4 .aac .pdf .mp3

Which of the following print files is “edit proof”? A.GettingThingsDone.pdf B.SplitEnds101.docx C.DogWhisperer.aac D. MyResume.doc

Answer is “A”

Which video file type does YouTube recommend users upload? A. B. C. D.

Answer is “B”

.flv .mp4 .mov .wav

Module 3 Given a specific web-building site (, the student enrolled in EDUC 689: Portfolio Development & Talent Management will learn how to post portfolio content for a basic career portfolio for learning and performance professionals.

• List the steps that allow development of a site map that reliably navigates to posted artifacts. • List the steps involved in selecting and modifying a template including changing font and graphics. • List the steps involved in uploading files including video, audio and print.

“For demonstration purposes, True Grit asked me to take you through how to build a website using First things first - Go to and become a registered user. Next, it’s a good idea to watch the demo as shown on this screen. Watching the tutorial is a great way to get started. “

“Make sure you enter your email address of choice when creating your account. It will be shown on the contact page of your website.�

“Some web-building sites help you decide the styling you’d like by providing sample templates in various categories. I am going to select personal and see what it gives us. “

“It seems like this will be easy...”

“After your website launches, the look may not be exactly what you had in mind. You can always choose a different template by going to “style” button. The starred ones cost money, hmmmm. For True Grit we will pick a free one...” NOTE: red arrows should appear at the appropriate time during the narration. Why are there two red arrows – what’s the difference?

“For example, we want to change the Header or Banner. Let’s choose the Elementary Theme from the list of styles. This will let us edit the Banner. After we select the style, we will click on edit the Banner to edit it. “ NOTE: red arrows come in when the narrator says “select elementary” and then “click on edit the banner”

“I am going to upload a Banner that True Grit already has. But, it’s cool to see that we could buy one for our site if we needed one. “

“True Grit keeps his files organized. That way it’s easy to find what we need. We are going to select this one. “

“Easy, huh! We are going to put it in the center. We should check this box that says apply to all pages because we want the Banner to be the same on all pages. We click on the save button and voilà! We have a custom Banner! “ NOTE: red arrows should appears at appropriate times duration narration.

“Here’s our final product – our customized banner for True Grit’s web page. “

“We start filling out the page content by clicking on these boxes and typing what we want. You can move the text boxes around by dragging the title bar. You can edit the text by double clicking. Another nice feature is that the Theme came with a contact page already there and this “contact me now” already links to it. Sweet! “ Note: red arrows to appear at appropriate points in narration

“Now let’s put a nice picture of True Grit next to the text. We go to the widget menu at the bottom right and drag the picture widget where we want it. “ NOTE: red arrow to appear at appropriate time during narration

“Same as before, we go thru this menu, find our picture and add it. “ NOTE: time red arrow appropriately

“True Grit is looking as sharp as ever! “

“Let’s get his resumé up. We go to widgets again, this time select the file widget and drag it where we want it. “ (Read what it says in the yellow box) This is as easy as pie! “ NOTE: time red arrow appropriately

“Nice. We told you it was easy. Next we are adding a picture gallery. “

“This is getting really awesome. We are almost done! “ Read what’s in yellow box

“Awww….aren’t those puppies adorable!! True Grit is so proud! “

“We have to add a page for examples of True Grits work. We already have a home page and a contact page. This will be our last page. We selected the page manager and in this pop-up, we selected new page, and named it Examples of my work. You can see here that we could re-arrange, re-name and delete pages here as well. “

“ We use the widgets to add True Grits audio file same way as we did his resumé. This time we choose the multimedia widget for Mp3s and drag that in. After we upload the audio file, we add a text box underneath to tell people a little more info. Next we go to get his therapy dog movie. “

“We try to add the file same way as always, but we get this message asking for money to upload a larger file. No way! True Grit is a volunteer – he doesn’t get a paycheck! “

“So we open the widgets again and see that under multimedia, there is a youtube video widget! Yea!!! “

“SO how this works is first we upload our video to the YouTube web site. Then we copy in the URL for this video which is now posted on YouTube. “

“Wow, how nice!. It even looks like it’s on True Grit’s webpage instead of housed at YouTube! “

“So that’s it. We added a few text boxes to describe the items and you can see the awesome site here! It was so smooth, like True Grit said, even a cat could do it!! “

Skill Check for Module 3

When designing the look of your website, once you decide on a style you cannot modify it. True False

Fals e

The ability to upload files to your Yola website is enabled by going to the website section called A) B) C)

Widge t

Styles Layout Widgets

When creating your website, where would you go to upload a banner that you have on your computer? A) Find stock banners B) Browse uploaded banners C) Upload new banner


Fill in the blank The technique to move the text boxes from one location to another on the page is called _________

(drag and drop).

A contact page is automatically set up for you on all Yola’s free websites. True False

Tru e

In the widgets section, to upload a resume to your site choose this category. A) html code B) text C) file

C. File

If you are finding that a video file is too large to import through the “file” section in widgets you can work around it by uploading that same file to Youtube and pulling it in through the “multimedia” section of widgets. True

Tru e


The End

“ I want to thank you all for paying attention to my little course. You can see how easy making an on-line portfolio is! Click on the next slide for some extra credit or to learn more about the things we discussed. See you on the net! “

Wrapping Up! •

You have all the tools you need now to complete your web-based portfolio!

True Grit thanks you again for all your attention!

Additional resources: •

Adobe PDF

Links to tips from true grit.

This last slide will hold links to downloadable pdfs and links to more information topics

online portfolio  

how to make an on line portfolio

online portfolio  

how to make an on line portfolio