Posting Your Professional Portfolio On-line

this dog will have animation. speech will be a voiceover.

Developer notes: narration by dog introducing learning module“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.

• Module 2 – learning about files

• Module 3 – developing your on-line portfolio

• Module 1 – evaluating web-building sites

Modules

tips from true grit

appears after he says whenever you see my bone

“Module 1” – hyperlinks right to Module 1“Module 2” – hyperlinks right to Module 2“Module 3” – hyperlinks right to Module 3

Beam in the graphic of the dog saying “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 web-building site.

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

Insert graphics as described below

Narrate by the dog – read:

So you decided to make this on-linePortfolio

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 web-building sites appear)

HTML

CSS

PHP

Ajax javascript

jQuery

Flash

MySQL

XHTML

HTML5

the best part is You don’t have to know any of these scary languages to use one of these web-building sites(these will fly in like bats and disappear )

If you can speak those web languagesYou are already hand-coding your site...

You are trying for an easy “A” in the portfolio class.

Better leave this course and check line 1223of your code.

You forgot the close the {}’s.Yep ,I caught that. I thought you should know.

The rest of youSTAY PUT!!!

A little web humor!

Here is a list of things to consider in selecting a web-building 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?

This will be bullets appearing in timed list

Have the dog speak the elaboration for each point:•“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 truegritsawesomesite.freewebbuilder.com 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 truegrit@truegritsawesomesite.com That's better than truegrit@gmail.com, 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• http://www.websitetooltester.com/en/website-

builder-reviews/

Maybe spreadsheet showing popular builders and features

Skill Checks for Module 1

Matching:

• Domain name – www.myportfolio.com• 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 – www.myportfolio.com•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 advertisements on your

pages.

Developer note: Blank the word “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)TrueGrit@truegritsawesomesite.com

B) TrueGrit@gmail.com

C) Truegrit@verizon.net

a. TrueGrit@truegritsawesomesite.com

True/False

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.

True Falsemaybe

Maybe

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 web-building 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 Advantages Disadvantages

.flv 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

cannot be seen on IOS devices, like iPhones or iPads

.mp4 Smaller than .mov files, recommended by Youtube

some loss in quality

.mov much higher quality files largest file sizes, up to 5 times larger than mp4

(Printed on slide:“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 Advantages Disadvantages

.wav Maintains sound, assures CD quality, universal (runs on most browsers)non compression

Format does not compress sound; creating sizable chunks of storage space

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

Compromise between sizes

.mp3 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…

Click for more information about file size: www.fileSize.com

File Advantages Disadvantages

.doc Word 97- Word 2003 format; advance features offers password protection

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

.docx 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

.pdf 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

“Let’s now talk about the different print filesIn 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, .pdfThe last 3 or 4 letters indicate the type of print file.Appearance/format is not guaranteed

One of the more popular Print filesIs now an open standard for electronic documents…A (.pdf)… portable document formatGenerally maintains appearance across platformsThis 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

The (.pdf) file size also has the capacity to become…increasingly large when adding lots of full color graphicsAlways check file size before uploading…Sometimes alternative methods must be considered…. Consider storing your larger print files on dropbox, or Issuu.com and your video files on Youtube or Vimeo. You can link to them on your website and save yourself from going over your free limits. “

What distinguishes between file types?

A. Size of the fileB. First 3-4 characters of the file nameC. Which program automatically opens the fileD. The 3-4 characters at the end of the file name

Answer is D

MatchingMatch the correct file extension with the

type of file

1. Video file2. Audio file3. Print file

A. .wavB. .flvC. .docD. .movE. .docxF. .mp4G. .aacH. .pdfI. .mp3

A. 2B. 1C. 3D. 1E. 3F. 1G. 2H. 3I. 2

Which of the following print files is “edit

proof”?A. MyResume.doc

A.GettingThingsDone.pdfB.SplitEnds101.docxC.DogWhisperer.aac

Answer is “B”

Which video file type does YouTube recommend users upload?

A. .flvB. .mp4C. .movD. .wav

Answer is “B”

Module 3Given a specific web-building site (www.yola.com), 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.

Show TPO initially, and enabling objectives appear one after the other with brief pauses in between.

Narrator to read:

“For demonstration purposes, True Grit asked me to take you through how to build a website using yola.com.

First things first - Go to Yola.com 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. “

truegrit@gmail.com

“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...”

truegrit@gmail.com

“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! “

http://truegrit.yolasite.com

“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.

False

The ability to upload files to your Yola website is enabled by going to the website section called

A) StylesB) LayoutC) Widgets

Widget

When creating your website, where would you go to upload a banner that you have on your computer?

A) Find stock bannersB) Browse uploaded banners

The technique to move the text boxes from one location to another on the page is called (drag and drop).

On

Fill in the blank

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

True False

True

In the widgets section, to upload a resume to your site choose this category.

C. File

If you are finding that a video file is too large to import through the “file” section in widgets you can

True

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