# So you're considering an online portfolio.



## toastydeath (Nov 17, 2006)

*Preface.*

Having a general webpage is an excellent way to share photos with forums, family, and friends.  It's a simple process to put up a rudimentary webpage using Dreamweaver, Frontpage, or handwritten HTML.  The tools are fairly intuitive, and most hosting providers have brief tutorials on publishing what you've created.  This way, you can share your pictures no matter where you are, and not worry about specific usage/copyright demands many free image hosts have.

This thread is meant as "ideal situation."  If you are going to do this professionally, this is what you need to shoot for.  If you are an amateur, hopefully this will provide some good starting points to look for information and develop ideas about what to do.

*Understand if you want to attract business or present a serious online resume as a photographer, it is not simple and lots of work is involved.*

Like any paper resume, an unimpressive or visually poor presentation will get you passed over very quickly.  Thinking about _selling pictures_?  Forget it entirely.  You need to start out local in galleries, art shows, and wherever else you can plaster prints ready to sell.  The internet is a gargantuan network that spans the globe.  By comparison, most individuals are amateur photographers no one has ever heard of.  The search engines have NO evidence they should present your webpage as relevant to any search until you get recognition and links from other webpages.  They're in the business of providing the best results for a given search, and you aren't the best result.  So, you need to view it in that context.  You must get out, on foot, and promote yourself through galleries and other hard photographic experience.  Once your name starts to turn up and you have advertisements both online and in the real world, your webpage will grow in popularity.  You aren't going to get any hits except for friends, family, and forum members until you make it as a photographer.  It's how the web works in the new millennium.

*If this is a webpage used in something you are going into as a full time job, stop reading this here and go pay someone.*

Do not expect to crank out an amazing webpage.  It's a learning process, and you'll eventually hire someone else to redo your webpage if you become successful.  You will not rise to the level of creating professional webpages unless that is what you do as a business.  Do not fool yourself: If you are becoming a photographer, become a photographer.  I can do web development, but not design.  I would need to hire someone else to do that.  I already know all the languages and server administration involved, but I am not a designer.  I can code database applications, and do all sorts of fancy things.  But I am not a designer.  Again, do not fool yourself.  Risking business is not worth the savings.  If you are easing into the business world or keeping it a weekend job, you can afford to do this, and can present yourself as a weekend-jobber.

Now that that bit of reality is out of the way, on to building webpages.

*Successful, serious business websites or websites for other professional purposes are not done in Flash, Frontpage, Dreamweaver, or plain-jane HTML.*

There are exceptions to this.  But the people who do web design and development for a living are the only people who know when those exceptions are.  You haven't the slightest idea, so go return that copy of SuperDuperWebPageBuilderPro 5.

These are the tools you will need to build a small but serious website. All of the tutorials you need to get started are on W3Schools (an amazing resource and reference):


*HTML* - http://www.w3schools.com/html/default.asp
HTML is the basic language of the web.  It tells the browser what to display.  Links, images, tables, and other basic layout elements.

*CSS* - http://www.w3schools.com/css/default.asp
CSS is closely related to HTML.  It describes how things should look on a webpage: Background colors, text color/font/size, default formatting, link color, etc.  One file can be referenced across an entire page, so that site-wide changes can be made quickly.

*PHP* - http://www.w3schools.com/php/default.asp
PHP is a programming language.  It generates webpages on the fly.  A good example of PHP is this forum.  All the information about usernames, forums, and threads are stored in a database.  The program, written in PHP, reads the data from the database and generates a new page every time we visit.  For photography, this is used for galleries, blog posts, and other content that you want to add or change quickly.

*SQL* - http://www.w3schools.com/sql/default.asp
SQL is how PHP talks to the database.  If you have an image gallery, your PHP program running the webpage has to get the image data and file locations from somewhere.  You tell it where and how to get that information using SQL.

You will need additional items, such as a good text editor.  I'm going to leave this up to the reader, as so many options exist.  Notepad2 (Free), EditPad, and UltraEdit are common choices.  VIM and Emacs are also very common free editors, but they are difficult to learn.

*Go to your library and borrow some books on proper web design and the applications above.  Better yet, buy some.*

There is just too much to talk about in terms of making a webpage that makes sense.  You need to be comfortable writing formal essays, because that's what a business webpage is.  You have to understand where to put things on a page, what color to make them, and other design considerations that have a serious impact on how effective your site is in generating you business.  You are about to put in a very serious effort, and if you do it wrong, you are going to have to go back and fix it.  Do it right the first time around.  By the way, the _For Dummies_ books are not what you are looking for.  You are looking for serious discourse on using powerful tools.

The last time I was just goofing around and made a webpage using this set of tools, it wound up being 2134+ lines of text, excluding whitespace lines.  It wasn't finished, and it had bugs.  But it took a long time to do.  If you make a poor decision or take a shortcut in the beginning, you're going to have to review the entire thing to see what happened.

*Some quick tips on winding up with a non-retarded webpage.*


Pick a uniform page width.  800 pixels is a good standard width.  Do not make it any wider than necessary.  Someone may have a 30" wide screen.  Your webpage will look awful if you have it span the entire thing.
Use left alignment.  English is read from left to right.  Trying to read a center-aligned page that is not properly sized (read: done by a professional) is difficult.  Eliminating mistakes is the name of the game: just use left align for everything except tabular information.
Soft, unsaturated background colors.  You want the page to be easy on the eyes, and you want the webpage _foreground_ to stand out.  They should be ignoring the background.
Break the background up some.  Some webpages use a different background color where text and menus are: you can do this with CSS.  This keeps the webpage visually stimulating during the boring task of browsing around for content.
If you are selling something, anything, make sure you have a FULL set of contact information.  A phone number, address/PO box, e-mail address, and a brief contact form are good things to have on a contact page.  The contact form, if you include one, should be small.  Consider not including a contact form, as many people have a hard time creating one that looks good.
Write in a formal manner.  Do not tell people what equipment you use, unless you have an autobiographical section.  Consider not having one of these, as again, most people can't write one without it sounding horrid.
Content sections that make sense.  You want a couple content sections, to make the page look full and flush.  If you do multiple kinds of photography, have a section for each, a welcome/home/about page, and a contact page.  Things like that.
Use PHP and CSS to make absolutely sure each page is identical.  When one page to the next varies in color or style, it's as if you painted half a room poop brown and the other neon green.  It takes a second to adjust to, and it reminds people they're on a webpage instead of searching for a photographer.
Just because your friends like it, doesn't mean it looks good. They're your friends.  I have friends with horrible taste.  Be critical of your own work, and try to get some serious commentary on it.  If you made your webpage without most of the "newbie" mistakes, you'll get good criticism on refining it.  If you have a lot of beginner mistakes, the criticism you're going to get won't be helpful.  Also, you probably won't be able to do anything with useful criticism if you're making those mistakes in the first place.  This is why books are important.

_continued in next post..._


----------



## toastydeath (Nov 17, 2006)

*Taking things a step further:  Development environment.*
_Full disclosure:  I am a Linux guy.  I am a fan of free software.  Please be aware that I use only free software in my servers. However, Linux and open source software are what most of the industry is using for web applications.

Microsoft products exist for all of these functions.  You will have to pay for it. They are also not as common, should you look for hosting that uses Microsoft products and scripting languages. _

Web hosts need servers to run stuff on.  Thankfully, most of the stuff they use to run their business is free to anyone.  This allows you to set up the programs at home to make changes and test without fouling up your real webpage.

You have two options doing this:  Setting up your own server, or just running the programs on your desktop.  I'll cover both, but I suggest just running the programs on your own desktop.  It'll take about six months to a year to learn how to run your own server.  Until that time, you'll kill the server several times learning a new operating system.  

The basic server programs to install on your desktop.  Download the "windows binary" option for each.

_You will have to find online tutorials for these programs, as they are all horribly complex, but flexible.  Think of this as thinning the herd.  If you really need it, you're going to learn it._


*Apache* - http://httpd.apache.org/download.cgi
The webserver itself.  This program is what your web browser connects to when you browse a webpage.  The browser connects to the webserver, asks for a specific webpage, and the webserver sends it back.  One webserver can serve many different webpages, if you want to do a lot of different testing.

 *PHP* - http://www.php.net/downloads.php
When apache sees a PHP file, it sends that file to the PHP interpreter.  PHP generates the proper content at that point, and kicks it back to apache to be served.

 *MySQL* - http://dev.mysql.com/downloads/mysql/5.0.html
This is the database program.  It stores information sent to it by PHP, so that PHP can get it later.  Just like apache and PHP, one instance of MySQL can be used for many different webpages, as you may have multiple databases inside one installation of MySQL.

*Even further than that.*

Running your own server.  At home.  No web hosting to pay until your home connection can't handle it, so no bills until you start to get traffic.  I used to do this, and it's a lot of fun.  It also increases your knowledge of computers and how the internet works a hundredfold.

This is not for the faint of heart, and it took me months to learn just the basics.  So I'll give you a starting point, and let you run.

First thing is first: You need the operating system.  Linux, of course, as it's free from front to back.  I personally suggest:


 *Debian* - http://www.debian.org/
 *Ubuntu* - http://www.ubuntu.com/

I use Debian, but both of these are essentially the same thing.  Many other options exist.  If you're just learning how to run a server under Linux, I can't recommend anything else for a variety of reasons.

I'm going to cut my talk about this topic short, as it's easily several pages long, and I'm not sure if anyone is interested in DIY server administration.  If there's interest, I'll go further.

*The end.*

Hopefully, this is helpful to somebody.  I've barely scratched the surface of getting a _modern_ webpage done, and I've nannered on for two posts.  I've tried to give a brief look into what it takes when someone wants a modern page, in terms of the wide scope of knowledge required and time investment it takes.

You have to stick out to succeed, and that's never been easy.  When the internet was new, all you had to do was have a webpage in the first place.  In 1996, that was cutting edge.  It's 2006 now.  We have Facebook, Myspace, Youtube, Flikr, Photobucket, and the list goes on.  Everyone is on the internet.  The market is established.  Don't believe the news hype.  It's now business like anything else, only now, you can't choose where to place your business physically.  Search engines do that for you.  You have to become known first, or spend millions of dollars in advertising to the same end.

Good luck, crazy entrepreneur.


----------



## morydd (Nov 18, 2006)

Fan-freakin-tastic. One other thing though is that you should test your page in every browser you're able to, and have other people test it too.

IE 6 and 7, Firefox, Opera, Safari, Lynx (yes lynx) And use the validators that are available to make sure your code is clean.

Finally, Set a background color! Don't assume that everyone leaves their default background color as white (I use grey, easier on my eyes) so just because it looks okay on your screen, if the background color isn't set, you may have sections that some people can't see well.


----------



## astrostu (Nov 18, 2006)

Yeah.  Test in all browsers you can, on all operating systems.  All because it works on a Mac doesn't mean it will work on Linux.  And all because it works on Windows has absolutely no bearing on whether it will work on anything else.  Also, stay away from proprietary Microsoft stuff, like asp and active-x and wmv.

And please stay away from Flash.  Personally, if I get to a website that's completely Flash, I close out of it.  It might look cool to you and be all flowy and pretty, but it's extremely annoying when you're just trying to browse, especially since Flash doesn't work the same on all OSs and all browsers, and you have to wait to load the thing until you can do anything.

And stay away from frames, as well.  Frames are a great way to divide up a navigation bar from the main page, and have a title bar, etc., but it's horrible for trying to bookmark, or even view in the History menu in many browsers.


----------



## ironsidephoto (Dec 16, 2006)

great information. i'm working on completely revamping my site. i've had it up for a few months, and it's time to make it good.
any tips would be appreciated, if you feel like glancing.


----------



## Alex_B (Jan 1, 2007)

i agree with ted ... if you do not enjoy website design basics, then doing it all by had is quite an effort and cost a lot of time which you cannot use for photography then. if you are a pro, then let someone do it for you, if you are a namateur, do it yourself with the tools out there.

and if you like a challenge, have too much time, or simply enjoy php and html, then do it yourself.

I chose the latter, it was fun, but also a waste of time in a way


----------

