My Web Portfolio

Various types of pages I've designed, and the market-based reasoning behind them

List / discussion of the web design elements I've used on various pages, and market-based reasoning to support why the content exists.


Follow wjhonson on Twitter!

Written Feb 2010 by Will Johnson, email me at
or post your comments for public view far below.
Creative Commons Attribution 3.0 License
The Knol Self-Tweeter on the left, is designed to work only for an article's author.

Firstly, this page shows how a consistent heading device, can give your content a more professional feel.  Within this heading, is also found a clickable image which the author can use to alert their twitter followers whenever they wish to tweet that this article has been updated.  All of the below articles, scripts, pages were  written by me.

Google Gadgets: Lesson 1 "Hello World".  I show you how to start making your own Google Gadgets.

PHP Tutorial - Six lessons and counting.  Let your web readers email you a filled-in form!  Write a simple guestbook!

Parsing Knol's Search Toolkit Results  - How to return the Knol Search Toolkit results page, into a PHP and parse the values into a array or a new HTML table for further manipulation or display.  At the end I give a link to a PHP script I wrote which will use these details to grab my top fifty knols by pageviews, and return them in a brief HTML table, as an example.

Big Calendar with Pop-Out Events - A calendar that displays Events, and when the reader hovers, a larger pop-out box describes the event.  The month and year can't be changed on this one.

Calendar with browsing and jumping - Another calender which will start on this month, but you can either browse forwards or backwards, or jump directly to some other month and year.

WebForm with text file logging of user input - Only the sales registration form is working today.  I should have the other one working in a few days.  You enter the data, click submit.  It records answers in a log file, one line per submission.  If the logfile doesn't exist it will create it.  By the way, if the folder that the logfile is in, is not owned by the apache user, you probably won't be able to create the logfile at all.  In that case, you have to set the folder to permission 777.

Members Site - Force Registration - This form and PHP script will require a user register or login with their password (if already registered) and then take them to a members area.  The information is written to a file in order to validate against future login attempts.

Cloud Programming - Add two numbers together - Simple example of cloud programming.  Two numbers can be pushed in from a previous POST (the fields are "number1" and "number2") or entered on this form.  This PHP will add the two numbers and display the result.

Using PHP to help parse any file - Parse a datafile, see what's hiding under the hood by showing all the hidden characters.

Web and Database Designs - As you can tell I was here just playing around with text colors and background colors, and how tables affected the paragraph settings in HTML.

Knol Color Test : What are my Choices? - More displays of various colors by name only.  Since names are much easier to remember than Hex values.

Chairpotato Presents : Full Movies on YouTube - Illustrates the use of unordered lists, indenting, a table with a border and both column and row spanning, bullets, sub-directories and a view counter.

Twilight Zone: Where Is Everybody?  - Illustrates the use of a clickable image which clicks-through to a direct sales page at Amazon, and the use of clickable YouTube videos, embedded so customers do not leave your site.

Science Fiction Movies on YouTube - Illustrates the use of multi-dimensional data representations.  Items are categorized by decade, by type, by actor and by date accessed.  Allowing the user to slowly move around the multi-dimensional cube in any data dimension they wish, without ever leaving the site environment.

List of Top Viewed Authors on Knol - Which finds that eyeballs not otherwise drawn to particular content, can be drawn to meta-data on whole universe metrics.  Then re-focused on specific targeted content.

Chairpotato Presents : Henry Jaynes Fonda - Demonstrates that detailed, unique research, can continue to draw new eyeballs over a long period of time.  This page also shows the use of an embedded Google Map image, text wrapping around pictures, and picture captions.

Chairpotato Presents : Alice Ghostley - Another example to prove that detailed, unique research continues to draw new eyeballs over a long period of time.  In this case, even or perhaps more especially for the slightly obscure yet famous individuals.  Also a good illustration of right and left picture alignment, and how toggling these gives a better overall page appearance.

Chairpotato's "Night at the Movies!" - Proof of concept - that VJ channel's can work on Knol, and that there is a customer demand for such services.  This channel has been inoperative for several months, and yet continues to generate a healthy view rate nonetheless.

Rock and Roll Number One Hits - Mashing Amazon, Wikipedia, lyrics sites, and YouTube to be a one-stop page for everything about Rock and Roll songs which hit Number One in the U.S.  Shows that such mashings although research-intensive can draw a healthy return in view rate.

Net Operating Loss Carryforward - Proof of concept - that detailed tax form completion instructions is a consumer demand.  Also shows use of Paypal link, and Keen link. 

Best Picture Oscar Winners on YouTube - My most complete example of clickable images.  Each movie box cover is a clickable image which clicks-through directly to its associated Amazon sales page.

Ancestry of Warren Buffet - My clickable image here for Ancestry goes through a LinkShare counter.  This page also illustrates the use of an "HTML jump within a page" with the use of headers.  Notice how in Warren's write-up his mother Leila Stahl is underlined.  Click on her and you jump right to her section on the same page.  You can view the code to see how easily this is done.  Also a good example of the use of an ordered list (see Ascent 1).

Ahnentafel "Ancestor Table" of Diana Spencer, Princess of Wales: Entries 32-63 - Use of an ordered list, with an initial value set.  Notice how this ordered list starts at "32" instead of the default "1".

Curtis Bean Dall (1896-1991), F.D.R.'s first son-in-law - Shows the use of the HTML "name" directive to jump to footnotes.  Another way of jumping within the same page.  Also shows the use of the HTML "sup" directive to superscript footnotes, so they look like they would if found in print.

Chairpotato Presents: Star Trek Episodes 1:1 - 1:8 - Illustrates a device to increase AdSense exposure, limit your articles to only as much as fits until the AdSense ad appears.  Further content would then appear on subsequent pages.  This causes more ads to be served, which theoretically should drive more actual click-through and thus sales.  Notice how only eight episodes are detailed here, while the reader is then led to a subsequent page for the next eight, and so on.

English-language Knol Project - Universal hierarchy tree, causes "hungry readers" (those who read many pages on one site) to stay within a consistent site-experience model.

Lincolnshire Pedigrees : Volume I - Proof of concept - that there is a market demand for human-edited tables of contents of at least some sources posted on Google Books.

Populate a template with form entered reponses - Here I'm passing the user's entries from an HTML form to a PHP script, which opens this tagged-filled text file, and replaces the tags with the form answers.

Fake Mustache Productions - Showing a more complex table, including an embedded table.  Just added some cartoon illustrations to this page.  PBWiki (the host site) has, I just found out, constantly resizeable images.  That is really cool.

SabreTooth Magic - A form embedded within a table.  And also two large pictures and a clickable thumbnail linking to a gallery.  And finally remove link underlining, make underlining appear and text-color change only when you hover, using CSS and also highlight and underline header link to current page, so user knows where they are.

Font Test - Goofing around with some font properties.  How do you like my pink shadowing?