Summer 2006 - Work-in-progress - please email me at jane@notfortourists.com to use/re-use/abuse this work - I'd simply like to know who this is helpful to, how it can be improved, and a credit never hurts.
Photographer's Website Workshop
Maine Photographic Workshops
Jane Pirone -- jane@notfortourists.com

Outline:

Workshop Overview
KISS
Active Participation - use what exists
Hosting a Site
Building a Site - make your own
Setting up Dreamweaver
Scanning Photographs
Saving images for the web
cs2 web photogallery as basis for displaying images
dreamweaver basics - setting up server/project
dreamweaver - image maps
image ready - animated gifs
set up a blog; integrate into their website
imageready - slices
dreamweaver - how to make rollovers

Workshop Overview back to top

The power of the web/internet is awesome and unprecedented. Previously, participating in the creation and dissemination of media was enormously expensive, requiring investment of substantial capital. Until the web, the average person did not have the ability to reach millions of people GLOBALLY for minimal cost. Now you can reach the world and show your work. Today, using the web as a way to promote your work as a photographer is commonplace and essential. However, the strategy is not for you to become an expert web programmer or spend a gazillion dollars working with one, but to allow you to get your work onto the web as easily and cheaply as possible. The point of this workshop is to help you create a stunning, simple, and elegant site that showcases your work... in only a week! The idea is to allow you to focus on what you do best, photography, and not get distracted with an entire new discipline that can take years to master. Using basic and simple techniques, you can make a very professional-looking site. It's about the design, structure, and content more than the technology you use!

Regularly updated web stats can be found at ClickZ.

Many of the Web/Internet's qualities, specifically the abilities to be INTERACTIVE and to publish & distribute timely, cheaply, and globally, provide us with two very unique opportunities that we don't have with traditional media -

  • to build communities not limited by geographic location
  • to have independent voices represented globally to potentially mass audiences

    • Interactivity basically means the ability to have an "exchange" - where the user has the ability to be involved at a very active level and participate in the creation of the content. More traditional media - like TV and Radio, considered "broadcasting", is a "one to many" model that has no ability for interactivity. The telephone - considered "one to one" is highly interactive, but you can only reach a single set of ears at any given time. The Internet, however, has the potential of Many to Many - and this power of interactivity is the power of the internet. I want to encourage you to think about how users can actively participate in your site, and what types of content you will be providing that will make it "sticky" (people visit often and stick around).

    Three Operating Principles of the workshop

  • Everything you need to know about getting on the web can be found on the web.

  • When using/building the web, keep it as simple & cheap as possible - the most important thing is the content and communicating with people (building community) .

  • The web is constantly changing and evolving.

    Goals
  • to have a website by the end of the week. 
  • DIY basic web skills.
  • how to learn what you don't know.
  • how to make something easy to maintain.
  • how to focus on being a photographer and showing your work and not becomming a web programmer (which would take a lot longer than a week).
  • How to design an elegant, professional looking site
    back to top

    • KISS (Keep It Simple Stupid) back to top

    As web consumers (and I don't just mean e-commerce), we need to critically evaluate and analyze what's on the web, how we are using it, how we find it, and how it influences us. By finding sites we like and don't like, we can start to articulate principles of good web design.

    We need to showcase a gazillion sites this week and discuss what makes them good and bad - it's usually not the technology, but the design. In addition to looking at really good sites, we need to look at really bad sites and together we'll generate guidelines or a set of principlies for good sites. Qualities I like are: uncluttered, intuitive, easy to understand the point/purporse immediately, immediate content - economy of clicks, etc. Your first assignment is to choose 3 sites you love and 3 you think are terrible. The challenge is to actually articulate what is good and bad about them. Use this set of Critiquing Guidelines to start learning how to talk about websites:

    Things you should think about/note:

  • URL - is it easy to remember? is it related to the purpose of the site?
  • Browser and connection optimization
  • How did you find the site
  • Purpose of the web-site (what are they trying to do – make money?, disseminate ideas or opinions? Entertain?, etc)
  • Discuss the target audience and the actual audience of this web-site
  • Site Statistics – i.e. how many visitors? Return visitors?
  • Background/History of Site
  • Background/History/Profile of company or individual that creates or maintains the site
  • Assess the Homepage – it’s arguably the most important page of a site. What’s the interplay between the rest of the site? Does it make you stay or leave?
  • Basic scope and structure (navigation) of the site – how big it is, how frequently is the content updated, how is the information organized-- Does the structure of the site enhance or detract from the success of the site?
  • How hard is it to find what you’re looking for, get what you need? What mechanisms are used for information retrieval?
  • What opportunities do the users have to add to the content of the website?
  • Is the interactivity of the site uni-directional, bi-directional, or multidirectional?
  • What type of “community” if any, does the site create? How difficult is it for users to connect with other people?
  • How dynamic or static is the experience of the site?
  • Promotion/Marketing – what efforts is the company or individual making to draw traffic to the site
  • $$$ - how is the site financed, is it making any money, and if so, how? How is this related to the purpose of the site?
  • Technical features and functionality of the site – how quickly does it load, do all the features work, do the features work well, does the site have rollovers, frames, search engines, databases, e-commerce? What tools do they use for development (hint – take a look at the source to get insight into how they are doing certain things) Does the site require plug-ins?
  • Visual design and interface (the look and feel or “front-end”) - What kind of palette are they using? Is the look and feel consistent from page to page – if not, does it still make sense? How are they handling text and type – what font, what size – how consistent is it? How is the layout of all the elements – Does the visual design of the site enhance or detract from the success of the site? How much scrolling is there? What kind of images are they using? Are they optimized for the web? Are they using tacky, tiled backgrounds? Is everything on the screen balanced? Is the design hierarchy consistent with the intended information hierarchy? How easy or difficult is it to read the text on the screen?
  • Media Elements – what types of media are used on the site – audio, text, graphics, photos, illustrations, video, animation, etc? How well do they use each type of media? How well are they implemented? Are they gratuitous, or do they actually enhance the site?
  • How is the quality of the actual CONTENT of the site – if it’s a digital newspaper, how well does it cover the news?, if it’s an online store, how well do they sell their product – how good is their catalog, etc
  • How well do they maintain the site?
  • How successful is this site – how well does it achieve its purpose? How can the site be improved? What unique qualities does it have that you haven’t seen anywhere else? What is good about this web-site? What is bad about this web-site?
  • Consider the interplay of the Technology, Content, and Business of the site, and how that has influenced its success.

    • Example sites (try to find an example that's not on this list). These sites, as well as the ones you choose, should spawn great discussion on navigation, conventions, structure, consistency of interface, interface design, scripting, etc.:

    www.webpagesthatsuck.com
    http://www.tenneson.com/
    http://www.uelsmann.net/
    http://     www.maggietaylor.com
    http://www.johnpaulcaponigro.com/
    http://www.clintb.com/home.htm
    http://www.toddhido.com/todd.html
    http://www.reduxpictures.com/
    http://photo.net
    http:// www.stephenjablonsky.com
    http://www.imaginarystudio.com/launch_high.html
    http:// www.jlipkin.com
    http://charlestraub.com/photo.html
    http://www.angelajimenezphotography.com
    http://www.romanloranc.com/
    seankernan.com
    janetbordeninc.com
    kendanorth.com
    billcharles.com
    robertmann.com
    blackflash.ca
    www.killersites.com

    back to top

    Active Participation back to top

    Use what's already there to have a web presence...

    back to top

    Hosting A Site back to top

    Step 1 – Setting up your web host/server & selecting a DOMAIN:

    Very, very simply and basically, when you think of how the web works, think of two sorts of people – those that seek information and those that provide it. People seeking information on the web (called CLIENTS), need two things; their computer connected to the Internet (usually through what's called an ISP – Internet Service Provider – like AOL, or Verizon or TimeWarner), AND a special software program called a browser (the most ubiquitous browser these days is Microsoft's Internet Explorer - IE) that can request web pages from a web server and then display them (think of html as a recipe that the browser interprets and translates into something displayed in the browser window). When people speak of the term “client”, they are referring to someone using a program (in this case, called the browser) to communicate through a network to seek and retrieve something that resides on a server.

    Those other folks, the ones that provide information on the web, need a more sophisticated set-up to host web pages anyone on the web can access. If you were a super-techie person and had the right software (web server software), and a fast, always-on web connection, you could actually make web pages available to the world right from your own machine at home. However, there are serious drawbacks to doing this, and the majority of the world rents space on machines in specially air-conditioned rooms, running special software, maintained by specialists, with very superb internet connections so that their website will be accessible on the web ALL THE TIME. These special places are called web hosts, and there are many to choose from.

    Some folks choose to use these commercial web hosts (either a monthly paid service like AOL or Earthlink or CI Host, or one of the free ones i.e. geocities or tripod). Others are able to access hosting space through their schools and institutions.

    The most basic difference between hosts is cost. The drawbacks to absolutely free hosts are that 1. you will most likely have banner and pop-up ads on your site, and 2. you will not be able to register and use your own domain. The drawback to close-to-free hosts is that if you want to leave and take your domain name elsewhere, it will cost you. CNET - a good source for reviews, identifies a couple of reasonable deals - http://reviews.cnet.com/.
    These days, when you work with a host, they will usually register your domain for you - sometimes free and with no catches. Read about domains at http://www.internic.net/faqs/index.html. Picking a Domain name can be tough at this point as most common names are taken. Have fun and be creative with your name. Most folks choose between .com, .org, and .net, based upon what they're doing with their site. When dealing with hosts, just make sure that 1. you are actually the one that owns the domain name when it's registered, and 2. there's no fee if you choose to move it to a different host. Two hosts that I'm fond of are norex.ca & vervehosting.com. There's a lot to assess when you choose your web hosting package - from space, to type of server, to bandwidth, to email accounts. As a guideline, the $5 per month "starter" package on vervehosting is perfectly fine until you start getting really greasy!

    Once you register with a host, you will get access to a control panel for administering your space, and a HOST NAME, USER ID & PASSWORD that you will use to UPLOAD your work to your server space.

    back to top

     

    Building a Site back to top

    There is nothing more satisfying (ok, there are lots of more satisfying things) than having the skills to make your own website. If you are experienced in authoring HTML (HyperText Markup Language) documents, and in using FTP (File Transfer Protocol) utilities to copy HTML documents to Web servers, then what follows will be easy and you will need a more advanced tutorial. If you are new to Web publishing, this all may seem tricky at first, but stick in there and don't panic and you'll have a website in no time. The complex and ever-changing technology behind the www can be intimidating and one of the biggest barriers for many people. WIth anything, the more familiar you become with the topic and its language, the easier it will feel. If you find yourself wondering what some acronym really means or how something actually works, try this helpful website - http://computer.howstuffworks.com/internet-channel.htm.

    Making a WEBSITE:

    There are 3 basic steps to making a website.

    1. Planning & Designing -- make sure to read: http://info.med.yale.edu/caim/manual
    2. Producing
    3. Maintaining

    we're going to focus on basic technical production for this tutorial...

    In Production, there are 4 technical steps you need to perform to make a website.

    1. Choose and set up a web host (aka web server) & register a DOMAIN (see above)
    2. Create .html files of your “Index” Page (otherwise known as homepage) and other pages for your website.
    3. Test your pages by viewing them in a browser on your machine (referred to as the “local” machine), before uploading it to your web server (aka host).
    4. Upload (FTP) your finely tuned pages (the .html files and any image files) to your web hosting account.

    I've included detailed instructions for each step, but before we go through them, let's cover some terminology and basics of the technology behind the www.

    http://public.web.cern.ch/public/Content/Chapters/AboutCERN/Achievements/WorldWideWeb/WWW-en.html
    http://public.web.cern.ch/public/Content/Chapters/AboutCERN/Achievements/WorldWideWeb/WebInternet/WebInternet-en.html
    http://public.web.cern.ch/public/Content/Chapters/AboutCERN/Achievements/WorldWideWeb/HowWorks/HowWorks-en.html

    http://www.learnthenet.com/english/html/13wworks.htm
    http://www.learnthenet.com/english/html/16addrss.htm

    Step 1 – Setting up your web host/server & selecting a DOMAIN:

    See previous topic - hosting a website.

    Steps 2 & 3 Create Your web pages and test them!

    The web is comprised of, among other things, .html files. When your browser requests a website (by you typing in a url or clicking on a link), basically what's happening is the browser communicates with the server that corresponds to the physical IP address of the URL you typed in or clicked on. Think of the IP address as similar to your street address or phone number – that there's actually a physical machine sitting in physical space at the other end of the connection. So your browser initiates a connection with that server and requests the specific “resource” you're after (hence URL standing for Uniform Resource Locator). The way the browser can find and communicate with a web server is by following a set of very strict rules (aka protocol). This is why you type in http:// before the url – you are specifying what set of rules everyone is following. That set of rules is called the Hyper Text Transfer Protocol. http://www.learnthenet.com/english/html/14wbpganat.htm

    If you simply type in a domain like http:// www.janepirone.com , you should notice that you haven't requested a specific file (as you would have typing in www.janepirone.com/sample.html ). This is because the software that is operating on the server has a set of defaults – it will always serve a hierarchy of file names if one was not specified. On most servers, when someone types in a straight domain, the server automatically looks for an index file (it needs to be named index.htm or index.html) and that's what the browser will then receive – the .html file of your homepage. The index (or homepage) is what we need to make - and it's best to make it first - but only after planning out your site. I CANNOT emphasize enough the importance of planning out your website BEFORE you start making it!

    Think of your homepage as a recipe that your browser will translate into what someone will see on their screen. When you create an .html file, you're really creating a set of instructions of what is to be displayed. You do this with what's called a mark-up language (hence Hyper Text Markup Language - HTML), By following the specific rules of the mark-up language, you get somewhat predictable results. These files are saved in the specific HTML format. In general, there are three options to creating and editing HTML documents:

    If you have never created Web pages before and don't know any HTML (hyper text markup language), I strongly advise that you acquire and use specialized graphical HTML editing software. The reason for this is that you can create what you want your pages to be like as though you were working with a graphics program, but you don't need to type any of the code (or markup language) yourself – the program does it for you. Beginners can save themselves a lot of grief by simply using the right tool. Dreamweaver is the absolute best tool. There is a 30 day trial you can download from macromedia. If you are a student, you can buy the full version from www.journeyed.com for $99. Believe it or not, this is a great price. If you spend any money at all to make web pages, don't waste your money on anything else! As an alternative, you can download Netscape's Communicator 4 which includes it's web editing program Composer FOR FREE - this is an excellent option for not spending any cash!

    Regardless of what you use, it's a good idea to start picking up some HTML -http://hotwired.lycos.com/webmonkey/96/53/index0a.html?tw=authoring

    There's two ways of going about creating html pages - modifying something that already exists, or creating something from scratch.... I will show you some modifying.

    Linking from one file to another...

    Making additional html pages is exactly like the steps you went through to make your index page, you just name the file differently - for instance, "webtutorial.htm". Make sure you keep track of EXACTLY what file names you use (this is why planning beforehand and making a flowchart with filenames will be helpful).

    1. Make sure that your home page ("index.htm"), any other web pages you make ("x.htm"), and associated graphics files are all stored in the same directory on your hard drive, just as they will be on your web server.
    2. Open the file you want to link FROM in Dreamweaver (or another comparable HTML editor).
    3. In that file, Highlight the text you want to use as a link to the different page - whether it's your page or a page that exists on the web.
    4. Call up the Edit Hyperlink dialog box by choosing Insert > Hyperlink. Enter the file name of your new HTML document (x.htm) OR the URL to the page on the web (http://www.janepirone.com/ITL/ITL.htm) in the "URL" field. Make sure that it is a relative link. Or, in Dreamweaver, simply type the filename (x.htm) or URL into the link field in the properties menu. If you're having trouble figuring out how to create a link in your HTML editor, try using the “HELP” feature of your program, or try to get someone in the class using the same program as you to help you.
    5. Save the file.

    Now check your work:


    Free online training courses for Netscape Composer, Microsoft FrontPage, and many other software products are available at Penn State 's Web-Based Training site: http://wbt.cac.psu.edu

    Step 4: Upload Your Home Page

    Once you've edited and tested your personal home page, you need to use an FTP (File Transfer Protocol) program to copy it to your web server. Don't forget, even though you are creating your .html files on your home or school machine, it is not suited to host webpages or make them available to everyone on the web. On the flip side, you can't work on developing your .html files with your web server. SO, every time you create a new web page or make changes to existing pages, you MUST transfer them (upload, copy, etc) to the web server that's hosting your site. Also, don't forget that if you use graphics you also have to upload ALL the graphic files that you added into your .html page.

    FTP

    To get your web pages from your local machine to your web server, you will need to use a program called FTP. You will also need your host name, your USER ID, your Password, and the location of the files you want to upload.
    If you do not already have an FTP program, you can download one from the web:

    For PC: http://www.coreftp.com (this is the one I use).

    For MAC: http://fetchsoftworks.com

    About FTP
    http://www.imagescape.com/helpweb/ftp/ftptop.html

    To actually FTP (this is with WSFTP- other FTP programs may be slightly different):

    1. Double Click on the FTP program. The interface to the FTP program is usually very straightforward
    2. First you will get a CONNECTION dialog box - this is where you “log in” - your host name is something like www.janepirone.com. Your user ID and password are what your host provides you with.
    3. When you click “connect” it will show a bunch of connection messages in the lower left hand corner of the main window of the program. (by the way, you must be connected to the Internet for all of this to work!)
    4. Once your machine connects to the server, a window will pop up that has two frames. The frame on the left is a directory list of your local machine. The frame on the right is the remote machine (the web server you've logged into).
    5. You can simply navigate through the file structure of each machine. Select the file you want to upload on the left frame. On the right hand frame (the server), you will see a file folder called WWW. Double click this folder (this is where you want to upload all your files to (the .html AND .jpgs or .gifs).
    6. Click the arrow button in between the frames. Use the one pointing from the local to the remote to upload. Use the arrow pointing from the remote to the local to download.

    If you are using DREAMWEAVER, then before you start, set up your project and server so that you can use Dreamweaver as your FTP client (see next tutorial).

    Once the files have been successfully uploaded to your web server you should test it with a browser – open IE, type in your URL and see what happens! Don't be discouraged if it doesn't work the first time! Go through the instructions and try again.

    Common problems include:

    Setting up Dreamweaver -

    1. set up file structure, site, and server
    2. new document - make document xhtml compliant. set preferences - general - use css instead of HTML tags. css styles - make sure open css files when modified is deselected.
    3. save file
    4. file in title box
    5. modify page properties
    6. build content.

    Resources:

    http://www.lynda.com/resources/links/#web_intro
    http://info.med.yale.edu/caim/manual
    www.webpagesthatsuck.com
    www.webmonkey.com
    http://www.zeldman.com/
    http://www.w3.org/Provider/Style/Overview.html
    webdesign.about.com
    www.htmlhelp.com
    jessica helfand - design observer
    ellen lupton
    jakob nielsen - useit.com
    www.pageresource.com
    www.webstyleguide.com
    www.oswd.org
    digitalmedia.oreilly.com
    pixel2life.com
    tutorialized.com

    Dreamweaver Resources
    www.macromedia.com
    www.dreamweaver-templates.org
    www.dreamweaverfever.com
    www.dwfaq.com
    www.dmxzone.com

    Add a goodle search to your page
    www.webassist.com

    Accepting credit cards
    www.payloadz.com (pay pal)

    Flash Pre-loaders
    www.flashkit.com

    Adding Forms
    www.phpbb.com

    www.educause.edu

    back to top

    Saving images for the web back to top

    file formats - gif, jpg, png, mp3,
    creating thumbnails
    batch processing

    Let's talk about Copyright and Watermarking

    http://creativecommons.org/license/
    http://lessig.org
    http://eff.org
    http://cameras.about.com/od/printing/ss/watermark.htm

     

    Searching search engine overview | search engine tips

    Part of the problem of searching is finding the meaningful stuff we're looking for - as oppossed to getting 4 billion results and then having to weed-through and evaluate each one - especially when you're searching general or vague topics that can return results that aren't of interest. An example is the large number of pornography sites you discover when searching the word "lesbian". It helps to have editorialized lists of resources that you can turn to - both for providing links to other lists or sites that are likely to be what you're after (btw - this is why hierarchical indexes can be beneficial).

    There are only two ways of getting to someone's website - either typing in a URL or linking to it. Think about this and think about how people are going to find your site!!

    http://searchenginewatch.com

    Where it goes from here

    Flash
    Database Driven sites
    RSS and podcasting www.apple.com/education/resources/podcastingvideos

     

     

    Please email me at jane@notfortourists.com to use/re-use/abuse this work - I'd simply like to know who this is helpful to, how it can be improved, and a credit never hurts.