Open Source Portfolios

How to use free web-based software to create an online gallery of your work that evolves and grows with you and your needs as an artist.

Hunter Cross + Maritsa Asghari

huntercross.com

Definitions

[any material that should appear in print but not on the slide]

Our Tools

Artists Need and Appreciate Good Tools

[any material that should appear in print but not on the slide]

Firefox

[any material that should appear in print but not on the slide]

Flickr

[any material that should appear in print but not on the slide]

Wordpress

[any material that should appear in print but not on the slide]

Linux

Most websites run Linux, a free operating system.

[any material that should appear in print but not on the slide]

Benefits of this Approach

Whats yours is yours.

You want to get the maximum amount of benefit out of the minimum amount of work and as emerging artists you want your content to fit into whatever technological future. This future will most likely be open because Free (open standards) wins when of comparable quality to paid services.

[any material that should appear in print but not on the slide]

But How?

  1. Set up Flickr Account
  2. Upload images to Flickr Account (organize later)
  3. Login to your Wordpress, clubarthouse.org/yourname/
  4. Activate your Flickr Account in Wordpress
  5. Add your contact information!
  6. Add Flickr photos to portfolio pages + organize in Wordpress
  7. Add more content, news, links
  8. Submit to Archive.org, Google
  9. Personalize! if we have time
[any material that should appear in print but not on the slide]

What You Will Need

[any material that should appear in print but not on the slide]

Setting up Flickr account

We will start with images because that is the core of our content.

  1. Find firefox and open up a browser window
  2. Type flickr.com in Firefox's location field (has the globe icon in it)
  3. Click the pink button that reads "Sign up now"
  4. Who uses yahoo email? Sign in and be patient with the rest of us...
[any material that should appear in print but not on the slide]

Yahoo! Registration: Step 1

  1. Under Don't Have a Yahoo! ID? click the blue underlined link that reads "Sign Up"
  2. Click "OK" on the security bulletin "You have requested an encrypted..." leaving the checkbox empty. (if it pops up)
  3. Click the pink button that reads "Sign up now"
[any material that should appear in print but not on the slide]

Yahoo! Registration: Step 2

  1. Fill out all fields with an orange asterisk to the left...
  2. Password suggestions - choose something memorable and replace the e with a 3, or the o with a 0.
  3. Uncheck the box to the left of "Create my free Yahoo! email address"
    (of course, leave this checked if you would like an email)
  4. I have a yahoo mail account, but use it rarely.
[any material that should appear in print but not on the slide]

Yahoo! Registration: Step 3

Choose a professional Yahoo! ID. This will be a part of your digital identity so think about it long-term, just for a second...

  • Good choices: huntercross, yourname, firstnamemiddlenamelastname, yournameartist
  • Bad choices: sexyman48, reallycrazyandlongnamedpolabear, iam*in*love-with(punctuation), huntercross1980, huntercrosstexas
  • Suggestions:
    • Use your name because it is easy to remember and works well in almost all social and business situations.
    • Avoid punctuation, locations, age-related info
    • People respect simplicity. Be creative with your work, be simple with the interface to your work.

One of the ways people judge information on the internet is through usernames. Trust is hard to earn on the internet, so the fewer opportunities you give for people to dismiss you and your work, the more opportunities they will offer you.

Yahoo! Registration: Step 4

  1. Choose a Security question and answer
  2. Avoid the rest of the questions (You can add this later)
  3. Type the letters/numbers that appear in the psychedelic image as they appear
  4. Click the "I Agree" button
[any material that should appear in print but not on the slide]

Registration Complete!

  1. If you typed everything correctly you will see the registration final page.
  2. Print out this page.
  3. Click the button labeled "Continue to Yahoo! Flickr"
  4. When the security message pops up "Although this page is encrypted, the information..." it is a warning you should always consider, but Yahoo is secure enough to be trusted so click the button labeled "Continue"
[any material that should appear in print but not on the slide]

Choose your Flickr screen name

  1. The Yahoo! account name you have entered will appear as your Flickr screen name in this next screen.
  2. If this is available you should use it. If not use the same professionalism considerations we discussed to come up with a good Flickr screen name.
  3. Click the blue button labeled "SIGN IN"
[any material that should appear in print but not on the slide]

Give your Flickr a bit of personality

  1. Click "Create your Flickr profile"
  2. Fill out the fields you feel comfortable with strangers knowing. Remember that this info is public and potentially archived
  3. The main ones to add are:
    • Your website: http://www.clubarthouse.org/yourname/
    • City you live in now: Austin, Texas
    • Country: USA
  4. Scroll to the bottom and click the blue button labeled "SAVE IT"
[any material that should appear in print but not on the slide]

Give your Flickr a bit of personality

[any material that should appear in print but not on the slide]

Flickr Uploading

  1. Click "Upload" in the menu at the top of Flickr's resulting webpage that reads "Photos: Yours · Upload · Organize...etc."
[any material that should appear in print but not on the slide]

Flickr Uploading - 2

[any material that should appear in print but not on the slide]

Flickr Uploading - 2

  1. 0% - Your monthly limit is 20MB with the free version of Flickr. This limits the number of images you can upload. If one digital camera photo is 1 MB (not unusual), then you have about 20 images that you can upload every month.
  2. Pace yourself and choose your best photos for today.
  3. Upload the highest resolution you have, and Flickr will handle making smaller versions available automatically. This will ensure that you can use your photos in all possible ways (print+web).
[any material that should appear in print but not on the slide]

Flickr Uploading - 3

  1. Click the top "Browse Button next to #1
[any material that should appear in print but not on the slide]

Flickr Uploading - 3

[any material that should appear in print but not on the slide]

Flickr Uploading - 5

  1. Add some Tags
  2. tag = a word that describes some aspect of the content. used for social sharing and organization of this content.
  3. Allows a bottom-up organization from the content makers....so...
  4. Add some tags such as "art austin texas painting sculpture carrots peas"
  5. Separate them with spaces not commas
[any material that should appear in print but not on the slide]

Flickr Uploading - 5

[any material that should appear in print but not on the slide]

Flickr Uploading - 6

  1. Leave this as a public image
  2. Click the blue button "UPLOAD" only once
  3. Be Patient....
[any material that should appear in print but not on the slide]

Flickr Uploading - 6

[any material that should appear in print but not on the slide]

Flickr Uploading - 7

  1. Add a descriptive title and description. Think about what questions a viewer might ask, and answer a few of them if you can.
  2. Image - description
  3. Check your spelling...
  4. Click the blue button labeled "SAVE"
[any material that should appear in print but not on the slide]

Flickr Uploading - Complete

  1. You have now added your photo to web. Congrats!
  2. Now, go play with Flickr, upload the rest of your photos, and we will be walking around available to help you with any problems you encounter. Help each other too...
  3. Your To-Do List:
    • Repeat this process uploading your remaining photos.
    • Invite each other as contacts
    • Comment on each others photos...
    • Choose your licenses - Copyright vs. Creative Commons
    • Add a photo as your icon, improve your profile...
[any material that should appear in print but not on the slide]

Creative Commons Discussion

  • Benefits:
  • Drawbacks:
    • A "limited" loss of control
    • You must have shot these images to give away the copyright
    • Unknown usage of your work could/will happen.
    • Privacy concerns
  • Choices:
    • Commercial vs. Non-comercial
    • Share-alike
[any material that should appear in print but not on the slide]

Your own site

  • What the public sees - clubarthouse.org/yourname/
  • Nothing much on there right now...
  • Your backstage - clubarthouse.org/yourname/wp-admin/
  • Your personal installation of WordPress 1.5.2
[any material that should appear in print but not on the slide]

Wordpress Login

  1. Using Firefox open a new tab
  2. Type in the location field "http://www.clubarthouse.org/yourname/wp-admin/" replacing "yourname" with your name all one word...
  3. Type in the included Username and Password included in your handouts.
  4. When Firefox warns you "Password Manager can remember this logon..." click No because this is a public computer. (If at home you may feel comfortable choosing yes for expediacy.)
[any material that should appear in print but not on the slide]

Wordpress Dashboard

This is your Dashboard. It has all the latest news about WordPress, and will keep you up to date when a new version comes out, or if you need to be worried about security. On to the customizing...

  1. Click the "Plugins" link in the main navigation menu at the top
[any material that should appear in print but not on the slide]

Wordpress Presentation

Choose the Portfolio template. Activate.

[any material that should appear in print but not on the slide]

Wordpress Plugin Management

I've pre-installed several plugins for Wordpress that are especially useful. Click Activate next to each of these Plugins

  1. Markdown - easy coding without html
  2. WP Flickr Post Bar - Flickr photos in your posts
  3. WP-ShortStat - track your visitors
  4. Shoutouts to Joe Tan, John Gruber, Jeff Minard, Shaun Inman, Michel Fortin
[any material that should appear in print but not on the slide]

Wordpress Plugin Management

[any material that should appear in print but not on the slide]

Wordpress Options

  1. Click "Options" in the main menu at the top
  2. This is the section where you can customize various aspects of WordPress
  3. Click "Flickr Post Bar" in the secondary grey menu bar below "Options"
[any material that should appear in print but not on the slide]

Flickr Post Bar Options

Configure your Flickr plugin to pull your images...

  1. Enter your Flickr screen name in the field to the right of "Flickr Username:
  2. Change the Image Size: From Square to Medium
    • This sets the size of image that will be automatically inserted into your posts and pages from flickr.
    • You will from time to time want to mess with this to get the size image you want.
    • if you want to access more than 18 pictures at a time you can change the number in the "Number of recent photos to retrieve:" to a higher number
  3. Click the button labeled "Save Settings »"
  4. You have finished setting up your Flickr to Wordpress connection!
[any material that should appear in print but not on the slide]

Your 1st Wordpress Page

How to build a page

  1. Click the "Manage" link in the main menu at the top
  2. Your default post will show up...we'll get to this in a little bit...
  3. Click "Pages" in the secondary grey menu bar below "Manage"
  4. Click the blue "Create New Page »" link
[any material that should appear in print but not on the slide]

Your 1st Wordpress Page

[any material that should appear in print but not on the slide]

Wordpress - Write Page

[any material that should appear in print but not on the slide]

Wordpress - Write Page

  • Page Title = Title, window title when bookmarked, link name on the site's menu
  • Page Parent = Choose a page to group underneath. Such as a single paintings page would group underneath the Paintings page. So "Paintings would be selected as a Page parent.
  • Page Content = The text, pictures, and media of the page.
  • Page slug = the word used in the location of this page. Very Important! i.e. http://clubarthouse.org/yourname/pageslug/ - Choose wisely and simply...WP will automatically add one if you leave blank.
  • Flickr Photos = If you scroll down to the bottom you will see all of your flickr photos dying to get on to your webpage...We'll get back to these...
[any material that should appear in print but not on the slide]

WordPress - About Page

Fill out the following to build your contact page

  1. Page Title = about
  2. Page Parent = Leave as "Main Page (no parent)
  3. Page slug = about (should always be all lowercase and match your title...NO SPACES!)
[any material that should appear in print but not on the slide]

WordPress - About Page 2

Adding your personal info...remember this is public so no street addresses...So inside the "Page Content" box please type

  1. A short sentence about you (short for now) describing yourself as an art student and/or artist, and your current city
  2. Your email address link like so: ‹hunter@huntercross.com›
  3. If you want to include a phone number you can...remember...public
  4. AIM addresses are also good, if you want to invite instant pestering...
  5. OK, very good...Click the "Create New Page »" button
[any material that should appear in print but not on the slide]

WordPress - About Page 3

[any material that should appear in print but not on the slide]

WordPress - About Page Live

Time to check your work...

  1. At the top of WordPress' interface, above the main menu, click the blue link labeled "View Site »"
  2. This will take you to what the public sees, notice you now have an "About" link
  3. Click this "About" link to see what you just added in the WordPress admin Area
[any material that should appear in print but not on the slide]

Live Editing

This is where a bit of the magic shows up...Say you want to add a little bit more to this, or the spacing is not quite right...Do you see the "edit" link at the bottom of the page?

  1. Click the "edit" link
  2. This will only appear if you are already logged into WordPress
  3. This will take you right back to your editing interface, make your edit and then...
  4. Click the "Edit Page »" button to return to this page to see your edit's effect.
  5. This allows you to edit your webpages and make edits more organically as you notice them, flipping between public view and backstage with a single click.
[any material that should appear in print but not on the slide]

Portfolio - Getting Started

Now that people can contact you for exhibitions, we can start building your portfolio.

  1. Click the "edit" link, like you did last time
  2. But now, click the "Write" link in the main menu
  3. Click the "Write Page" link in the secondary grey menu underneath "Write"
  4. We've seen This before...
[any material that should appear in print but not on the slide]

Portfolio - The Parent Page

You will want the Portfolio section of your site to contain all of your work.

This may be structured in many different ways, depending on how best you think it should be organized. For now we will organize all of your images as pages into one big group with the page we are about to create as the "Parent." Fill out the following...

  1. Page Title = Portfolio
  2. Uncheck the boxes to the left of "Allow Comments" and "Allow Pings"
  3. Page slug = portfolio
  4. Click the "Create New Page »" button
[any material that should appear in print but not on the slide]

Portfolio - Parent Page

You will want the Portfolio section of your site to contain all of your work.

This may be structured in many different ways, depending on how best you think it should be organized. For now we will organize all of your images as pages into one big group with the page we are about to create as the "Parent." Fill out the following...

  1. Page Title = Portfolio
  2. Uncheck the boxes to the left of "Allow Comments" and "Allow Pings"
  3. Page slug = portfolio
  4. Click the "Create New Page »" button
[any material that should appear in print but not on the slide]

Portfolio - Parent Page

[any material that should appear in print but not on the slide]

Portfolio - 1st Image page

You should already see another "Write Page" form...

  1. In the "Page Title" field fill in the title for one of your photos that you've uploaded.
  2. Uncheck the boxes to the left of "Allow Comments" and "Allow Pings"
  3. Click the "Page Parent" drop-down menu and choose "Portfolio"
  4. Give your page a reasonable page slug in that field.
[any material that should appear in print but not on the slide]

Portfolio - Add your Image

Flickr and Wordpress sitting in a tree...

  1. Scroll down to the bottom and click the image you would like to add to this page.
  2. This will add the image's html code to the "Page Content" box.
  3. Remove the link code in front of ‘img and after /’
  4. To take care of disabled visitors to your site fill in a more meaningful and descriptive caption in between the quotes of alt="IMG1284.JPG"
[any material that should appear in print but not on the slide]

Portfolio - Add your info

This is where you can add title, year, materials, dimensions. If it is an installation or performance you should not include dimensions. Include running time if appropriate.

  1. Type the Title, year (leaving a line break between the image code)
  2. Type : with one space after it on the next line
  3. Type your materials after that one space
  4. Type : with one space after it on the next line
  5. Type your dimensions with " as inches and ' as feet
[any material that should appear in print but not on the slide]

Portfolio - Example

[any material that should appear in print but not on the slide]

Portfolio - Explanation

For all the nerds in the house, thanks for helping me turn it out.

  • These colons are triggering the Markdown Extra Plugin we activated earlier...
  • This produces a syntactically correct html definition list, which is appropriate for content such as art piece labels. What?
[any material that should appear in print but not on the slide]

Portfolio - How's it Work?

  • I mean, with the use of simple colons you+markdown have produced this code:

‹dl›
‹dt>Summer Sun, 2002‹/dt›

‹dd>Oil on Wood Panel‹/dd›

‹dd>36" x 26"‹/dd›
‹/dl›
  • You can learn more about Markdown's code tricks by clicking the "Plugins" link in WordPress's main menu and clicking the "PHP Markdown Extra" link
    • [any material that should appear in print but not on the slide]

    Portfolio - Start Adding

    Now it is your turn to add the rest of your photos so that we can organize them...

    • Write a new Page for each photo you have (or you can in fact group several photos on to one page)
    • If you make a mistake you can click "Manage" to see all of your pages. Here you are able to "Delete", "View" and "Edit" them
    • Be sure to check your work, and choose "Portfolio" as your "Page Parent"
    [any material that should appear in print but not on the slide]

    Posts vs. Pages

    Posts are more like news items and blog postings. They should be timely and ephemeral.

    • Click the "Write" link in the main menu at the top
    • This will take you to write post
    • You can use the same exact strategy as filling out pages with posts, except these will automatically appear on your front page.
    • Try it out
    [any material that should appear in print but not on the slide]

    Archive + Links

    Set up these pages based on templates.

    [any material that should appear in print but not on the slide]

    Submit to archive.org

    Ways to be a part of the online conversation.

    [any material that should appear in print but not on the slide]