creating a photographic website by dr. philip lawson frps dpagb

Creating a Photographic website

By

Dr. Philip Lawson FRPS DPAGB

Why do you want a website?

• Personal websites – Not connected to the Internet

• Private websites – Not publicised, for family and friends

• Public websites – Exhibit your work

• Commercial websites – Sell something

Creating a website: Costs

• Connecting to the Internet and acquiring both your own IP address, a URL and the domain name registration.

• A machine that is big enough and fast enough to act as a server.

• Software to act as a server and, if necessary, an e-mail server.

Creating a website:Risks

• Vunerable to intrusive hacking and virus attacks.

• Regular overhead of the site maintenance.

Internet Service Provider (ISP)

• Examples include Freeserve, NTL and BT• Offer only a limited amount of web space

which, for photographic images, can be severely limiting.

• Websites must be simplistic and, by modern standards, inactive.

• Impose the inclusion of advertising or banners.

Example: NTL

• They offer all NTL customers 10 megabytes of workspace.

• No active facility (ASP, CGI, PHP)

• URL will be something like http://homepage.ntlworld.com

• Register DNS name such as http://JamesDean.com and re-direct.

Off-Line Development 1

• Develop a local version of this website on your own machine and to test it out before up-loading it.

• Test With Internet Explorer or Netscape.

• Up-load it to NTL using an FTP program such as WSftp or Smartftp.

Off-Line Development 2

• Prepare pictures using Photoshop and save for Web using optimisation.

• Develop pages using programs such as Microsoft FrontPage, Macromedia Dreamweaver or HotMetal.

• Optional – test on your own server using Personal Web Server or Apache (free).

Structure of the website?

• All websites possess a single page, which can be considered to be the front door to the whole of the other pages in your site.

• This usually goes by the name of index.htm or index.html and is often described as being the top page in a tree root like metaphor.

• If your site is very small and needs only a few pages then these can be linked from this single page.

Links and URLs

• from index.htm to each of the other pages;

• from each of the other pages back to index.htm;

• and possibly from each page to any of the other pages;

• and possibly from each page to any of the other pages.

Links and URLs

Index.htm

Page_3.htmPage_2.htm

Page 1

Home

Page 3

Home

Page_1.htm

Page 2

Page 3

Home

Page 1

Page 2

Page 3

A hierarchical structure

Img_7.jpg

Images

Cornwall ‘98

Index.htm


Page 5

Home

Page 3

Home

Page_1.htm

Page 2

Page 3

Home

Page 1

Page 2

Page 3

Page_5.htm

Page 1

Home

Img_3.jpg

Img_3.jpg Img_7.jpgImg_3.jpg

The look of pages

• The simpler the page the better

• Photographic images are best portrayed against a black or dark background

• However, unless any accompanying text is very bright this is not as easy to read as dark text on a white background

Images

• Physically take up space on the page.

• Slow the loading of the page down if these images are very large.

• All images on the Internet must be in the form of .jpg or .gif and jpegs are not renowned for their quality.

Size and Resoulution

• Reduce all images to no more than the size and resolution that the average domestic monitor will support.

• 72 dpi (the screen resolution)

• No more than 1000 pixel wide by 800 high.

Compression

• GIFs are NOT commressed and can be big.• Jpeg compression factors play an important

role in determining both the final quality of the image and the download time.

• Extremely high compression severely posterises photographic images.

• Medium to low compression makes very little difference on the average screen.

Placement of text and images

• The layout of pages on the Web is dictated by what is known as html (hypertext mark-up language).

• Easy to master the basics, achieving an aesthetically pleasing design can be tedious.

• Simple text and images can be aligned to the left, centrally or to the right and text can be written in a choice of fonts and styles.

• More complicated layouts need the concept of tables with hidden borders.

Hyperlinks

• Everything that you see and much of what you don't see on the visible page can be used as a hyperlink to another page.

• When the cursor moves over it, it would change to a finger and when you click on it, it will take you somewhere else.

• Can use small pictures (icons) as a button for a link since, as the saying goes, a picture speaks a 1000 words.


Img_7.jpg

Images

Cornwall ‘98

Index.htm


Page 5

Home

Page 3

Home

Page_1.htm

Page 2

Page 3

Home

Page 1

Page 2

Page 3

Page_5.htm

Page 1

Home

Img_3.jpg


Index.htm

Welcome to the Website of James Dean

I have incorporated a little about myselfAnd something about my cameras and techniques as well as some images from my last outing to Cornwall in 1998

Index.htm



<html><head><title>Home of James Dean</title></head>

<body>Welcome to the Website of James Dean 

I have incorporated a little about <a href=”page_1.htm”>myself</a>

And something about my <a href=”page_2.htm”>cameras and techniques</a> as well as some images from my last outing to <a href=”page_3.htm”>Cornwall</a> in 1998

</body></html>


Img_7.jpg

Images

Cornwall ‘98

Index.htm


Page 5

Home

Page 3

Home

Page_1.htm

Page 2

Page 3

Home

Page 1

Page 2

Page 3

Page_5.htm

Page 1

Home

Img_3.jpg


Page_1.htm

About James Dean home Hi, I’m James and photography is my main hobby.I use a number of different cameras and techniques in pursuit of this hobby and have some wonderful pictures from many different locations:Amsterdam 1997Cornwall 1998Dordogne 1999Poland 2000

Page_1.htm



<html><head><title>About page</title></head>

<body>About James Dean <a href=”index.htm”>home</a> 

Hi, I’m James and photography is my main hobby.

I use a number of different <a href=”page_2.htm”>cameras and techniques</a> in pursuit of this hobby and have some wonderful pictures from many different locations: 

Amsterdam 1997 

<href=”page_3.htm”>Cornwall 1998</a> 

Dordogne 1999 

Poland 2000


Img_7.jpg

Images

Cornwall ‘98

Index.htm


Page 5

Home

Page 3

Home

Page_1.htm

Page 2

Page 3

Home

Page 1

Page 2

Page 3

Page_5.htm

Page 1

Home

Img_3.jpg


Page_2.htm

Cameras and Techniques home

One of my favourite lenses it the wide angle. I used is extensively on my trip to Cornwall in 1998 to shoot some dramatic images of the sunsets and skies.

Page_2.htm



<html><head><title>cameras and techniques page</title></head>

<body>Cameras and Techniques <a href=”index.htm”>home</a> 

One of my favourite lenses it the wide angle. I used is extensively on my trip to <href=”page_3.htm”>Cornwall 1998</a> in 1998 to shoot some dramatic images of the sunsets and skies 

<img src=”Images/Img_3.jpg” align=”center”>


Img_7.jpg

Images

Cornwall ‘98

Index.htm


Page 5

Home

Page 3

Home

Page_1.htm

Page 2

Page 3

Home

Page 1

Page 2

Page 3

Page_5.htm

Page 1

Home

Img_3.jpg


Page_3.htm

Cornwall 1998 home

The sunsets across to the west can be spectacular.

next

Page_3.htm



<html><head><title>Cornwall page 1</title></head>

<body>Cornwall 1998 <a href=”index.htm”>home</a> 

The sunsets across to the west can be spectacular. 

<img src=”Images/Img_3.jpg” align=”center” width=”150%”>

<href=”page_5.htm”>next</a>

Good HCI

• Much of the research on HCI (Human Computer Interfaces) suggests that people preferred and performed better on computer interfaces that they get to know and can build mental maps of.

• Stylistically each of your pages should show marked similarities i.e. the buttons and links used for “navigation” from one page to another should remain the same and in the same place.

© Copyright

• Anything on the web will be ”stolen”. • Copyright of your images resides with you.• Commercial enterprises would not risk being sued and

if you place a copyright message with the image and a contact point they should contact you.

• A low Jpeg quality factor of about 30 will produce acceptable images on screen but render them useless for anything other than reproduction to a size less than 4” x 5”.

• Consider officially stating the terms under which others might freely use your images.

References

• A guide to web design http://www.jessett.com• Establishing An Internet Presence

http://www.tssphoto.com/estab_p.htm• The Essential Connection: Resource Center

http://www.essential- connect.com/rescntr/links/links2.html

• and of course the reference for HTML itselfhttp://www.w3.org/TR/PR-html40/

References

el-imâge a Photographic website

by janet edwards & philip lawson

http://www.el-image.co.uk

el-imâg

e

creating a photographic website by dr. philip lawson frps dpagb

Documents

home page

single page

visible page

white background slide

images cornwall

photographic website

better photographic

posterises photographic