Digital Portfolio Guide

Welcome

2007-04-27T09:34:00.001-07:00

This is a step-by-step guide to help journalists and journalism students create their own Web site through which to showcase their work and connect with potential employers in a creative, digital format. We show you how to use and adapt Blogger to create a digital portfolio that looks more like a Web site than a blog. You'll learn how to manipulate the Blogger template, buy and use extra server space if necessary and the best ways to present your print, audio and video clips.

As the world of journalism becomes increasingly Web-based, having a digital portfolio will impress employers and show them you have the skills they are looking for. At the same time, they are introduced to you and your work. It's fun, it's easy and it's a smart career move!

Columbia Journalism Professor, Sree Sreenivasan writes regularly about why writers should set up personal Web sites. Here's a link to one of his articles discussing what you'll need to get started.

Audio Clips

2007-04-27T09:18:00.000-07:00

With the Blogger format it's easy to add examples of your audio work and it makes it super convenient for prospective employers to see your work.

See the following postings in this section:

Adding Your Audio Clips
Examples of Audio Clips
What The Experts Say

What The Experts Say - Audio Clips

2007-04-27T07:59:00.000-07:00

Susan Green, Development Director at Public News Service in Boulder likes to see a written script with the "actualities." An actuality would be the audio clip that includes the host lead and wrap. There may also be several different versions of the story to air at different times of the day.

Here's a sample of a PNS script about clean energy. Susan provided three different versions.
Here's the full story;
Here's one teaser ;
Here's a second teaser.

Getting Radio Experience
The masters program here at CU doesn't offer any radio classes so if you're interested in radio work one way to get experience is to volunteer at the campus radio station or KGNU which is right here in Boulder. I volunteered at KGNU because the campus radio station volunteer drive was heavily geared to music. KGNU is also geared to music but they have alot more news coverage.

Public News Service also offers internships. The work includes more scripting and web work. Here's a recent internship description.

See also:
Adding Your Audio Clips
Examples of Audio Clips

Advanced Template Changes

2007-04-26T06:34:00.000-07:00

Your Blog is starting to look like a website, but a few pesky Blogger elements need to be removed.

At the bottom of your posts, “Newer,” “Older,” “Home,” and “Subscribe to: Posts (Atom)” links appear. With some targeted editing, you can remove these from your Blog.

Hint: Before attempting advanced template changes, make sure to save a copy of your template. You can do this by copying your template code into a blank document or by choosing the “Download Full Template” option in the “Edit HTML” section under the “Template” tab.

Begin working under the “Template” tab, by clicking on “Edit HTML.” Check the “Expand Widget Templates” box and search for:

newer

The first hit you will come across will be part of the Cascading Style Sheet (CSS) and will look like this:

#blog-pager-newer-link {
float: left;
}

Ignore this section and search for the next instance of “newer.” You should find coding that looks like this:

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

Delete all of this coding and save your template. Take a moment to view your Blog to make sure that the “Newer” link has been removed.

Next, search for:

older

As before, ignore the CSS code. Instead, look for something like this:

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

Delete this code and save your template. Again, review your Blog to make sure that the “Older” link has been removed.

Your next search will be for:

home-link

Again, ignore any CSS codes and find coding that looks like this:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

Delete this section of code, save your template and view your Blog.

Your final search will be for:

feedLinks

Locate coding that looks like this:

<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

Once more, delete this section and save the template. “Newer,” “Older,” “Home” and “Subscribe to: Posts (Atom)” should no longer appear on the bottom of your posts.

In this section:
Choosing a Template
Personalizing the Header
Changing Fonts and Colors
Fixing the Sidebar
Removing the Blogger Banner
Hiding Comments
Advanced Template Changes

Return to Adapting the Blogger Template
Return to the Main Page

Print Clips

2007-04-25T22:35:00.000-07:00

Once you have your clips, posting them online is a paper and stamp free way for employers to browse your talent.

The following steps can help you make that happen.

1. Scan in all desired clips

2. Convert all desired clips to PDF (portable document format)
By converting your clips to PDFs, you are ensuring that your clips are readable by anyone, anywhere, on any system. Your file will appear in a compressed format, looking exactly how you wanted it. The best way to do this is by using Adobe Acrobat. Adobe Acrobat can be downloaded on the Adobe Web site and is also available on most university systems. Because Adobe is always looking out for our needs, going to this site will allow you to turn five of your favorite files into pdfs free!

Adobe Acrobat provides specific conversion directions here.

3. Once your clips have all been converted, link them on your blog/site however you’d like, either by date, by subject, by publication, etc.

4. Finished material will look similar to this.

To provide a professional perspective, Yvonne Mihalik, managing editor of the Boulder Women’s Magazine, shared her views on digital clips.

Personally, I prefer someone to apply digitally. It is so much easier to look at things online then have a cumbersome pile of papers. For freelance journalists, applying digitally is probably the best way. For a staff job, it would probably be wise to have both methods (paper and digital)available, because every editor has his or her own personal preference of how he/she likes to look at things. Usually, the simpler the better.

…if I were to access someone's materials online, I would like to see the resume first, including experience, credentials, as well as what the person is interested in writing or doing (both with my publication and in the future). Then I would like two or three writing samples available to read. Including different styles of articles is preferable, such as a profile or interview piece, an informative piece and a reflective piece.

What I really don't like is when a writer emails me with a vague query and requires me to get back in touch just to find out what the writer is really pitching. I usually don't even respond to these people. The people I do respond to are the ones who write a nice, two or three paragraph email about who they are and what they would like to do, with a resume and writing samples attached.

Examples of Audio Clips

2007-04-20T08:03:00.000-07:00

For illustration purposes, here's a link to a NPR story. This story aired on Morning Edition on April 20, 2007. I linked to the page introducing the story and a reader would have to click on the "listen" button to hear the actual story. I think this is better than linking directly to the audio because it gives control to the user.

Click here to listen to a MP3 file I created for a story of mine about Cemex that aired on Morning Magazine on KGNU on April 5. Here's the script for the Cemex story - I adapted a template from my TV Newsgathering class for this - KGNU didn't really have a template.

See also:

Adding Your Audio Clips
What The Experts Say

Setting Up Your Blog

2007-04-19T21:54:00.001-07:00

It’s free. It’s simple. It’s Blogger.

Once you create an account and name your Blog, you’re only an hour or two away from creating a digital portfolio.

Before you begin, take a moment to create a "design map." What do you want your portfolio to include? What color scheme will you use? Do you have an updated resume? Have you picked out your favorite clips? If you spend a few minutes planning your design, you will save time as you build your site.

In this section:
Creating Posts
Adding Links and Photos

Return to the Main Page

Creating Posts

2007-04-19T21:51:00.001-07:00

Click “Create” under the “Posting” tab. Give your post a title and begin typing in the white text box. As you type, use the quick buttons on top to format your text, create a bulleted list or center a paragraph. Clink on the preview button to check how the posting will look on your blog. When you’re done, click “Publish,” and your post will appear as the latest entry in your blog.

For your digital portfolio, you will need at least three posts:

Home: Greet visitors here and tell them how to navigate your site.
About Me or Resume: List your work experience or post your resume here.
Clips: Create links to your print, audio or video clips.

Additional posts could include links to your personal Blog or a page listing references. If you would like your portfolio to look active, consider adding an RSS feed -- from your personal Blog or your favorite news site. Visit this site for more information on RSS feeds.

Hint: Make sure to create your "Home" post last. Blogger shows your most recent post first. If you post your "Home" post last, you will ensure that your personal greeting is the first thing that visitors see.

In this section:
Creating Posts
Adding Links and Photos

Return to Setting Up Your Blog
Return to the Main Page

Adding Links and Photos

2007-04-19T21:48:00.000-07:00

One of the benefits of Blogger is that you don’t have to mess around with a lot of HTML to create a fully interactive website. Adding a hyperlink to an outside Web site is as simple as clicking on the quick "link" button while you compose your post. A pop-up window will appear. Type in the address that you would like to create a link to and press ok. A hyperlinked Web address will now appear in your blog posting.

Switch to the “Edit Html” tab to rename a website. Look for this code:

<a href="http://www.mywebsite.com">http://www.mywebsite.com</a>

The bolded text -- listed between the HTML codes -- is what appears on your posting. Type in a new title, like "My Website," and your HTML code will now look like this:

<a href="http://www.mywebsite.com">My Website</a>

The only words that will appear in your Blog will be “My Website.”

To add an image, click on the photo button. A pop-up window will open, giving you two options: 1) adding an image from your computer or 2) adding an image from the Internet.

Adding an image from the Web is the simplest method, but is not recommended for your personal Web site. Images and photographs available online are often rights-protected, meaning that the artist is entitled to receive royalties or photo credit for any use of the image.

Since this is your portfolio, why not use some of your own images instead? To add an image from your computer, click the “Browse" button and locate a photo file from your personal collection.

Once you have an image, choose the size and positioning of your photo, before clicking the “Upload Photo” button.

Hint: If you have purchased server space, consider hosting your photos there by FTPing your photos to the server. See the What You'll Need section for more information on setting up server space.

In this section:
Creating Posts
Adding Links and Photos

Return to Setting Up Your Blog
Return to the Main Page

Hiding Comments

2007-04-19T21:33:00.003-07:00

Comments are great for Blogs, but do you want people commenting on your resume post? Probably not. The good news is that it is easy to hide comments. Click on the “Settings” tab and click on the “Comments” link. Check “hide” and you’re done.

While you’re in the “Settings” tab, take a quick tour and customize your Blog even more. One major highlight is under the “Formatting” link. This is where you can set your Blog to show only one post (your home page) at a time.

In this section:
Choosing a Template
Personalizing the Header
Changing Fonts and Colors
Fixing the Sidebar
Removing the Blogger Banner
Hiding Comments
Advanced Template Changes

Return to Adapting the Blogger Template
Return to the

Removing the Blogger Banner

2007-04-19T21:33:00.001-07:00

One of the downfalls of Blogger is the pesky proprietary blue banner that they paste on the top of each Blog. However, it is extremely easy to remove.

First, search for the following code in the "Edit HTML" section under the "Template" tab:

-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
-----------------------------------------------

Directly below it, type this:

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

This section of your template should now look like this:

-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
-----------------------------------------------

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

It's really that simple.

In this section:
Choosing a Template
Personalizing the Header
Changing Fonts and Colors
Fixing the Sidebar
Removing the Blogger Banner
Hiding Comments
Advanced Template Changes

Return to Adapting the Blogger Template
Return to the Main Page

Fixing the Sidebar

2007-04-19T21:32:00.002-07:00

Remove all current page elements so that you are starting with a clean slate. Take a look at your design memo and add as many link lists as you have categories. For example, add three side elements if you are adding sections for “about me,” “home” and “clips.”

Label each section. Create one (or more posts) for each section. These posts will host your portfolio. Finally, create a link to each of these posts in your sidebar elements. You now will be able to click on the main pages of your blog from any screen.

In this section:
Choosing a Template
Personalizing the Header
Changing Fonts and Colors
Fixing the Sidebar
Removing the Blogger Banner
Hiding Comments
Advanced Template Changes

Return to Adapting the Blogger Template
Return to the

Changing Fonts and Colors

2007-04-19T21:32:00.001-07:00

The “Fonts and Colors” link allows you to customize the look of your blog. Not interested in an orange and blue color scheme? Switch to a purple and green one instead.

In this section:
Choosing a Template
Personalizing the Header
Changing Fonts and Colors
Fixing the Sidebar
Removing the Blogger Banner
Hiding Comments
Advanced Template Changes

Return to Adapting the Blogger Template
Return to the Main Page

Personalizing the Header

2007-04-19T21:31:00.001-07:00

Adding a background image to your header is a quick way to make sure that your Blog looks professional and different than the millions of other Blogs out there.

Look for an image or a photograph with a good horizontal crop. Since you're going to change the proportional sizing of the photo, it's a good idea to avoid photos of people or objects. They may look distorted after they have been resized. Using photo editing software, such as Photoshop, adjust the size of the photo to approximately 660 x 150 pixels. Post the resized photo on your server.

Under the “Template” tab, click on “Edit HTML.” Search for:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;

Add this text below:

background-image: url(http://www.mywebpage.com/nameofphoto.jpg);

The code should now look like this:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background-image: url(http://www.mywebpage.com/nameofphoto.jpg);

Change the font and color of your title to match the new header under the “Colors and Fonts” link. See the Changing Fonts and Colors section for more information.

Hint: For more detailed instructions on adding a background photo to a header, check out this site.

Adding a new header to a Blogger template is a little more complicated, but well worth it. Your new header will be personalized, searchable and will include a link to your Blog’s homepage.

Start by adding more page elements to the header. Click on the “Page Element” link under the “Template” tab. Do you have an “Add a Page Element” link above your header? If so, skip this step. If not, you need to add some code to your template.

Switch to the “Edit HTML” link and search for this:

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1’ showaddelement=’no’ >

Change the maxwidgets='1' to maxwidgets='3' and showaddelement='no' to showaddelement='yes' (changes marked in bold):

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’3’ showaddelement=’yes’ >

Next, search for:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

Change this section to read (changed marked in bold):

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>

Save changes to the template and return to the “Page Elements” tab and click on the “Add a Page Element” link above the header. You can now add up to two page elements in your header.

Hint: Visit this site for tips on removing the Blogger header and replacing it with your own.

Hint: To remove the border from your header, search for #header-wrapper and #header and find the border setting. Delete the border code, or change the size from 1px to 0px.

In this section:
Choosing a Template
Personalizing the Header
Changing Fonts and Colors
Fixing the Sidebar
Removing the Blogger Banner
Hiding Comments
Advanced Template Changes

Return to Adapting the Blogger Template
Return to the

Choosing a Template

2007-04-19T21:28:00.000-07:00

Each Blogger template is uniquely different. We've used Blogger's “Minima” template to set up this example. While some of the coding may vary from template to template, the basic steps are the same. Look for a template that is the closest match to your final design goals.

In this section:
Choosing a Template
Personalizing the Header
Changing Fonts and Colors
Fixing the Sidebar
Removing the Blogger Banner
Hiding Comments
Advanced Template Changes

Return to Adapting the Blogger Template
Return to the

What You'll Need

2007-04-13T09:27:00.002-07:00

Blogger is great because it will host your content for free. But, if you want to use elements such as a personalized header, lots of pictures, PDF's of your clips or video not hosted at YouTube, you're going to need some outside server space. And, if you're going to buy server space, you might as well buy a domain name, too. Buying your own name is a good idea for two reasons. First, you don't want someone buying www.yourname.com and putting up whatever they want. Secondly, it's more professional than having your Web site's address as www.yourname.blogspot.com. Here's what you do:

1) Buy a domain name at a site such as domains.com or godaddy.com, and hosting to go with it. You probably won't need too much space, and you can usually get both for less than $10 per month.

2) You'll need an FTP client to transfer your files to your new server space. There are plenty of free ones available for download. SmartFTP is a good one that is very easy to use.

3) If you bought your own domain name, you'll need to tell your hosting service that your site is hosted at Blogger (although some elements will be on your private server space). This is called creating a CNAME record. Every service will have slightly different instructions, so just search or contact the provider. Instructions for GoDaddy can be found here.

4) Lastly, you'll need to tell Blogger that you have a private domain. Just log into Dashboard, and go to Settings>Publishing>Custom Domain. Enter your personal address and voila! Your Blogger page will appear at your personal domain in a few hours.

Return to the Main Page

Adapting the Blogger Template

2007-04-13T09:27:00.001-07:00

If you aren’t a web designing guru, Blogger is a great host for your personal Web site. The good news is that you don’t need a degree in computer programming to create a basic and professional personal Web site on Blogger.

Blogger mimics word processing programs so that you can post beautiful sites, while feeling like you're still typing in Word.

In this section, you’ll get a crash course on making subtle changes to the Blogger template, so that your site will transform from the standard Blog to a digital portfolio.

Hint: If you get stuck or have questions, search the Internet for an answer. A benefit of using Blogger as a host is that millions of Bloggers have gone before you and they love to post advice on the Web.

In this section:
Choosing a Template
Personalizing the Header
Changing Fonts and Colors
Fixing the Sidebar
Removing the Blogger Banner
Hiding Comments
Advanced Template Changes

Return to the Main Page

Digitizing Your Resume

2007-04-13T09:24:00.006-07:00

The trickiest part of putting together your digital resume is deciding how much personal information you want to post on the Internet. You need to present your work history in a professional way, but you don’t want to give identity thieves or spammers too much personal information.

Here are a few pointers:

Don’t include your physical address.
Consider spelling out your email address (example: “yourname at domain.com” instead of yourname@domain.com).
Keep to the basics for your job listings: company, job title and tenure. Long job descriptions are distracting.
Delete your “personal interest” section.
Try adding a "skills" section to highlight your technological experience.

If you want to post a traditional resume that will be easy for employers to print, create your document in a word processing program and convert the file to a PDF. By doing so, you can control the appearance and integrity of your document. If you don't convert, your formatting may look different on another computer and another user could change the content. Next, you will need to host your PDF resume on your server. Once you have done so, you will be able to create a link to this document on your Blog. See Adding Links and Photos and Print Clips for more information on creating links and PDFs.

Another option is to post the content of your resume directly on your Blog in an "About Me" section. Many writers use one of these sections instead of a traditional resume because potential employers can quickly view their work history without opening or downloading a new document.

Before you start designing your digital resume, take a few minutes to search the Web for examples of what other writers have done.

Sree Sreenivasan lists several examples on his site. Here are a few examples from that page:

Jody Brannon
Karyn Bryant
Borzou Daragahi
Jonathan Foreman
Liz Garone
Amitava Kumar
Barry Lank
Gina Pace
Jennifer Pirtle
Nancy Reardon
Stacee Sledge
Shauna Staveley
Chris Taylor
Rob Walker

Return to the Main Page

Slideshow

2007-04-13T09:24:00.005-07:00

Photo journalists should consider creating a traditional Web site to showcase their work because Blogger has some limitations on this front. Still, it is helpful to know where you can create a slideshow and how to embed it in your Blog.

Here are a few sites that create slideshows:
Soundslides
Slideroll
Flickr
Picnik
Rock You!
SlideShowPro (This program was used to create the slideshow gallery displayed below.)

The program you use to create the slideshow will affect what code you use to embed the slieshow in your Blog. However, you can use this code as a guide:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="400" height="400" id="class" align="top">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.digitalnewsroom.net/ssp/slideshow/class.swf" />
<param name="quality" value="high" /><br />
<param name="bgcolor" value="#ffffff" />
<embed src="http://www.digitalnewsroom.net/ssp/slideshow/class.swf" quality="high" bgcolor="#ffffff" width="400" height="400" name="class" align="top" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
<br />
</embed>
</object>

The code listed above will make this interactive slideshow appear in your Blog:

Video

2007-04-13T09:24:00.003-07:00

Whether you're a videographer, producer, editor or on-camera talent, putting your video clips on your Web site is a great, easy way to let potential employers see what you can do!

"Nearly everyone working in television, and I assume in Web video, has a reel of their work," says Heather Domko, a producer at the Denver PBS affiliate KBDI. "I definitely think managers would love to just go a Web site and see applicants work rather than being mailed a DVD, which is usually how it works."

Here are some things Domko says to keep in mind:

Keep your video under two minutes unless it's your whole reel, which can run up to 10 minutes.
Make sure your sound quality is good. People will watch bad video but they will not listen to bad audio.
Provide a written description of what the video is from, and what role you had in creating it.
Note the length and file size of the video.

Once you have your video (or reel of video) edited and ready, there are several different ways to post it on your site. The two easiest ways are to use YouTube or to upload and link to a Quicktime file on your server.

YouTube
If you choose not to buy your own server space outside of Blogger, YouTube is your best option. Just register for a YouTube account, upload your video and copy and paste the embed code the site gives you into a blog post. The downside to YouTube is that the video will have the site's logo on it, which could look unprofessional depending on your job goals. Also, the video will be searchable and viewable on the YouTube site.

Quicktime
If you're including video in your portfolio, chances are you already know how to get into an editing program on your computer. Before you put it on the Web, though, you need to compress it. This will depend on the editing program you're using, so check for instructions on how to compress for the Web. Once you have your Quicktime (or similar format) file, you'll need to upload it using your FTP client onto your server space. Then, you'll link to your file in your blog post. The downside to using Quicktime in this way is that your video will pop up in a new window.

Here is detailed guide to putting your videos on your Web site.

See an example of how one student presented her videos here.

Adding Your Audio Clips

2007-04-13T09:24:00.001-07:00

As with other clips, there are two ways of adding audio clips. If the story is posted to a website, you can link to the website and the story directly. This is exactly the same as linking to a print story. This works if you can link specifically to your story. But if your story is part of an hour long broadcast you'll need to create your own MP3 file and link to that.

Creating Your Audio File
I used Audacity because you can download it for free. There's versions for both Microsoft Windows and Mac. If you're working in Windows, you'll also need to download a plug-in called "lame-lib." This enables Audacity to create an MP3 file.

Go to the website where the audio for your story is posted and download the audio file to your computer;
Open Audacity and import your audio file; save the file as a new project;
Delete the portion of the audio before your story; if there's an anchor lead you'll want to keep that;
Delete the portion of the audio after your story; if there's an anchor close you'll want to keep that;
Export the file as an MP3 file. Don't use any spaces or dashes in the filename;
Use a FTP to upload the MP3 file to your server space;
Now you can link to the MP3 file from your blog. It's a good idea to include the radio station, the program and the date your story aired.