Class:Digital Portfolio 2016/Week 2

Last Week

• Introductions
• Discuss Class
• Discuss Wiki
• History of the Internet
• How the internet works for us

This Week

• Review Last Week
• Hosting Your Sites
• Introduction To Digital Portfolio Techniques
• Photography Site Building (CMS) Solutions
• The "size" of the internet
• Tools: Text Editors
• HTML / CSS Review

Notes

Review Your Inspirational Website Submissions

• Matthew's pinboard list of the photo websites the class shared.

Hosting Your Sites

Some of you will end up using a hosted web site solution and not need to setup a dedicated web host, others will end up needing to upload your website to a dedicated host.

Do you need a dedicated host?

Will you be building your website yourself (HTML/CSS) and uploading it? - Yes

Will you be using indexhibit or Wordpress to build your website? - Yes

Will be using a hosted solution like PhotoShelter, Squarespace or Cargo to build your website? - No

Even if it is not your main website, will you need to export galleries and post them online for friends/clients to see? - Possibly

It's important to go with a Hosting Provider that you trust, one that you can contact when you need some help.

I have created a Hosting Providers reference page for you here.

• My preference for all of you is to go with Dreamhost over Godaddy for JUST the hosting part.

Introduction To Digital Portfolio Techniques

This week in class I walked you through a series of slide presentations highlighting the foundation techniques for this semester.

Highlights Include

• Evolution of site design and technologies
• The Magic Poster theory
• Photographers should NOT have to learn code

We also talked a little bit about Responsive Web Design

• The article that started it all: Responsive Web Design at A List Apart
• 30 Responsive Portfolios For Your Inspiration
• If you are interested, the best place to start is A Book Apart: Responsive Web Design
• Fantastic repository of responsive sites: mediaqueri.es

Photography Site Building (CMS) Solutions

There was a time where a Photographer would build (or hire somebody to build) their website from scratch. Adding and removing content from these websites would require somebody to edit the HTML and upload the changes to a web server. Successful websites are no longer built like this... Content Management Systems (CMS) have redefined how the internet works. These tools are either hosted, or need to be installed on your webserver to run.

This week I introduced the class to the concept of Content Managed Solutions. We will be spending a lot of time looking at these options.

I have created a Site Building (CMS) Solutions reference page for you here.

The "size" of the web

• Screen Designers Guide to DPI
• A List Apart: Responsive Images in Practice

Reviewed Text and CSS Editors

Quick solid overview on design and HTML editors are in a few of the slides here

Tools of the Trade: Photoshop, Illustrator, Sketch, Textmate, Sublime

The web inspector within your web browser is an insanely useful design/develop tool.

And then there is Espresso, for visual CSS/HTML editing

Tools of the Trade: Espresso

We discussed three separate HTML & CSS tools that you should be familiar with for this Semester.

I have created a Text Editors reference page for you here.

Refresher on HTML & CSS

Our first big task is to review HTML & CSS techniques in an effort to get everybody more comfortable hacking away at their websites.

Download the choppingblock / html-css-demos files from github.com here

• We reviewed the basic HTML tags:
  • HTML Headers: <h1> to <h6> Tags
  • HTML Links: <a href="#">link</a> Tags
  • HTML Unordered Lists: <ul></ul> Tags
  • HTML Ordered Lists: <ol></ol> Tags
  • HTML Images: <img /> Tags
  • HTML Paragraph: <p></p> Tags
• We reviewed the HTML tags used for styling regions of pages:
  • HTML div: <div></div> Tags
  • HTML div: <span></span> Tags
• I showed csszengarden.com and the possibilities that CSS can bring to your HTML sites.
• I showed how to format a basic page using Espresso.

Files

• Download the choppingblock / html-css-demos files from github.com here

Assignment

Your task this session is to simply become familiar with the tools and HTML shown in class.

• Download the files
• Look over the HTML in the first few folders
• Download and open up Sublime text
• Download and open up Espresso, see if you can edit some CSS.

And spend some time refreshing your CSS/HTML Skills:

Complete the following lessons at Code Academy

CSS: An Overview

CSS Selectors

CSS Positioning

Next week, make sure you bring some higher resolution files of your images to class.