Commits

Anonymous committed 255d783

Added the "Create a Great Personal Homesite" page.

  • Participants
  • Parent commits 36fbffa

Comments (0)

Files changed (1)

t2/philosophy/computers/web/create-a-great-personal-homesite/index.html.wml

+#include '../template.wml'
+
+<latemp_subject "Create a Great Personal Home Site" />
+<latemp_description "How to create a Great Personal Homesite" />
+<latemp_more_keywords "Shlomi Fish, Shlomi, Fish, HTML, Homesite, Homepage, Home, Page, Site, Perl, PHP, Python, JavaScript, Content, Presentations" />
+
+<h2 id="meta">Document Information</h3>
+
+<dl class="meta">
+<dt>
+Written By:
+</dt>
+<dd>
+<a href="http://www.shlomifish.org/">Shlomi Fish</a>
+</dd>
+<dt>
+Finish Date:
+</dt>
+<dd>
+28-November-2005
+</dd>
+<dt>
+Last Updated:
+</dt>
+<dd>
+28-March-2006
+</dd>
+</dl>
+
+<h2>The Article Itself</h2>
+
+<h3 id="intro">Introduction</h3>
+
+<p>
+We've all seen it - the bad home site: flashy or non-standard colours,
+annoying animations, large text all over the place; too little content,
+obscure pages that no one knows how to get to from the reachable ones;
+no navigation menus, no site map, and no breadcrumbs trail; horrible markup and
+too little content to show for. If you want to have a good laugh, then
+<a href="http://www.divisiontwo.com/">DivisionTwo magazine</a> has an
+<a href="http://www.divisiontwo.com/articles/kellysworld.htm">insanely funny
+parody of the bad homepage</a> (warning: contains a lot of explicit
+content).
+</p>
+
+<p>
+However, occasionally in one's infinite browsing, one can find some good
+personal home sites. They have a consistent style, valid markup, a common look
+and feel, are attractive to the eye, load quickly and have a lot of good
+content for hours of experiencing. The purpose of this essay is to
+explain what the elements that make a good home site are, for everybody there
+who have a home site or want to have one. It will also touch on some of the
+technicalities of creating and setting up one.
+</p>
+
+<h4 id="why_have_one">Why have a Home Site?</h4>
+
+<p>
+So why should you bother with having a personal home site? There are several
+advantages to have a great one. Here are some:
+</p>
+
+<ol>
+<li>
+More people will know about you.
+</li>
+<li>
+You'll receive a lot of feedback from other people, and often engage in
+interesting conversations with them.
+</li>
+<li>
+You can bring in a lot of publicity to yourself, and your business.
+</li>
+<li>
+You can make money from advertisements and donations.
+</li>
+<li>
+You'll be able to practise and improve your writing skills, artistic skills, 
+etc.
+</li>
+<li>
+You can link to your favourite pages and resources on the Web.
+</li>
+</ol>
+
+<h3 id="elements_of_a_good_site">Elements of a Good Site</h3>
+
+<p>
+The elements that make a good home site are divided into two: content and
+presentation. Let's tackle them one at a time.
+</p>
+
+<h4 id="great_content">Great Content</h4>
+
+<p>
+Filling your home site with a lot of content takes a lot of time
+and requires quite a lot of work. It is also <b>a process</b> that requires
+one to invest more time working on the site into the future. It is, however,
+very fun.
+</p>
+
+<p>
+Here is a list of items you can put on your web-site in its early incarnations
+if you don't have any good ideas of your own:
+</p>
+
+<ol>
+<li>
+Information about yourself: resumé, biography, etc.
+</li>
+<li>
+Hyperlinks to pages and resources you like or are related to.
+</li>
+<li>
+Photographs you took.
+</li>
+<li>
+List of recommended books, movies, artists, etc. Note that you can benefit
+from such items using
+<a href="http://www.amazon.com/gp/browse.html?node=3435371">the
+Amazon.com associate program</a> and similar associate programs.
+</li>
+<li>
+Fan sites for Music artists, T.V. shows, Movies, etc.
+</li>
+<li>
+Archives of favourite quotations and collections of jokes.
+</li>
+<li>
+A weblog (= online diary), or at least a link to it.
+</li>
+<li>
+Paypal donate link and Google ads (which bring income from the site).
+</li>
+</ol>
+
+<p>
+Once you've set up a home site you'll probably find that you have more and
+more ideas on what to put there. But you first need to overcome the first
+obstacle and actually have a web-site.
+</p>
+
+<h4 id="good_presentation">Good Presentation</h4>
+
+<p>
+Now for the second aspect of a great site: a good presentation. This involves
+a very large number of different elements. The list below aims to be as
+encompassing as possible, but it is possible some points are missing or some
+will need to be added in the future.
+</p>
+
+<h5 id="pres_security">Security</h5>
+
+<p>
+A website needs to be secure. The most possibly secure web site is a static
+HTML one where the HTML is served directly from the server, without the
+server processing it. This is adequate for the needs of most web-sites, 
+especially personal home sites.
+</p>
+
+<p>
+Alternatively, if you want to have a server-side generated web-site you need
+to make sure it doesn't have SQL injection attacks, Cross-Site Scripting (or
+HTML injection or XSS) attacks, privilege escalation, comment or wiki spam
+(see <a href="http://googleblog.blogspot.com/2005/01/preventing-comment-spam.html">the
+rel="nofollow" attribute</a>), or any other security problem. This requires 
+much more conscious effort and discipline than a plain HTML site.
+</p>
+
+<h5 id="pres_navigation">Navigation Aids</h5>
+
+<p>
+In my previous article
+<a href="http://www.perl.com/pub/a/2005/07/07/navwidgets.html">"Building
+Navigation Menus"</a> I gave a list of common patterns in web-site
+navigation. They appear under the heading "Common Patterns in Navigation Menus
+and Site Flow" in the article. Here is a list of them without too much explanation:
+</p>
+
+<ol>
+<li>A tree of items</li>
+<li>Next/Previous/Up links to traverse a site</li>
+<li>Breadcrumb trails</li>
+<li>hidden pages and skipped pages</li>
+<li>A site map</li>
+</ol>
+
+<p>
+A good site should have a navigation menu, and possibly the other navigation
+aids mentioned here.
+</p>
+
+<p>
+One thing that was omitted from the article (due to being too new to be 
+included) is 
+<a href="http://www.google.com/webmasters/sitemaps/docs/en/protocol.html">a 
+Google Sitemap</a>. This provides a list of interesting pages in the site for Google
+and other search engines, and is also recommended. One can see it in action
+<a href="http://www.google.com/search?hl=en&amp;lr=&amp;c2coff=1&amp;q=kde&amp;btnG=Search">in
+the Google search for KDE</a>, where the top result displays more pages in the
+site.
+</p>
+
+<h5 id="pres_visual_appeal">Visual Appeal</h5>
+
+<p>
+A good site has good visual appeal. It is pleasing to the eye, interesting
+to look at, and isn't intrusive. A central element to such a design is a common
+look and feel of the site. Generally all pages should contain a navigation bar
+or two, some common icons, a footer, etc. If the general display of the page
+changes from page to page, the site's visitor will feel confused. If the pages
+are plain HTML pages, with no dedicated blocks, then the site will be harder
+to navigate and also look unprofessional.
+</p>
+
+<h5 id="pres_valid_markup">Valid and Semantic Markup</h5>
+
+<p>
+There are definitive standards for HTML and related technologies as set by the
+<a href="http://www.w3.org/">World-Wide Web Consortium</a>. By following the
+standards, one can make sure that present and future browsers will know how to
+handle the page correctly. See
+<a href="http://www.shlomifish.org/lecture/LAMP/slides/compatibility/">the
+designing for compatibility section</a> in my
+<a href="http://www.shlomifish.org/lecture/LAMP/slides/">"Web Publishing Using
+LAMP" presentation</a> for more information.
+</p>
+
+<p>
+A good site master makes sure the markup of all or most of his pages
+validates. It leaves a better impression, is much easier to maintain this way,
+and would make sure your web page is displayed correctly in the future
+(barring some surfacing web browser bugs). Note that the valid markup does not
+affect how the page is presented and you can easily style it in very attractive
+ways, while still adhering to web standards.
+</p>
+
+<p>
+Refer to <a href="http://www.webstandards.org/">the Web Standards Project</a>
+for more information.
+</p>
+
+<p>
+Aside from being markup, your markup should be semantically correct. So, for
+example if you want to make a text larger, you should use CSS instead of
+designating it as a heading (<tt>&lt;h1&gt;</tt>, <tt>&lt;h2&gt;</tt>, etc.).
+</p>
+
+
+<h5 id="pres_colour_choice">Colour Choice</h5>
+
+<p>
+Aside from looking attractive, the choice of colours in a site needs to be
+non-intrusive enough, and correspond to how people read the page. For example,
+flashy colours are too hard to see through, and should not be used as
+the backgrounds of titles. The body of the page itself should be distinguished
+from the main page layout somehow. 
+</p>
+
+<p>
+I admit that I am not an expert in this area, and some of my designs are 
+bad in this regard. Someone once pointed me to several problems with one 
+of my designs, which he and I thought were relatively OK. I must say, what
+he said simply made a lot of sense, and was perfectly obvious, yet I thought
+the design was OK beforehand.
+</p>
+
+<p>
+A different issue with colour choice is making sure one's page is accessible
+to people with the various types of colour-blindness. The problem is that 
+are three such types (Red-impaired, Green-impaired, and Blue-impaired) and
+making a good colour choice for that is hard. Most colour blind people can
+be expected to customise the page layout using custom CSS stylesheets, so
+it may not be much of an issue. And if all the important content is in text,
+it will always be accessible enough.
+</p>
+
+<h5 id="pres_responsiveness">Responsiveness</h5>
+
+<p>
+The pages of a good web site load quickly and the web site as a whole feels
+responsive. Putting an excessive amount of images (especially large and poorly
+compressed ones) on a web site is guaranteed to cause it to load more slowly.
+Other culprits are a bloated markup, an excessive amount of JavaScript,
+and a slow connectivity of the host.
+</p>
+
+<p>
+Good web-sites heavily optimise for limiting the bandwidth, because it affects
+broadband users, and people with a slow connectivity much more so.
+</p>
+
+<h5 id="pres_no_annoyances">Various Annoyances</h5>
+
+<p>
+There are many common annoyances in web-sites. Some of the most common ones
+are:
+</p>
+
+<ol>
+<li>
+<a href="http://www.useit.com/alertbox/20021223.html">A horizontal
+scroll bar</a>, that prevents the entire width of the site from being visible.
+A webmaster should realise that it's not enough to make sure there is none
+when the browser is maximised in a large screen. By all means, many people
+use much lower widths, and the web designer should accommodate for them.
+</li>
+<li>
+<a href="http://www.html-faq.com/htmlframes/?framesareevil">Frames are
+evil</a>, and should be avoided. If you want a common look and feel, you should
+generate your pages from templates, either off-line or on the fly.
+</li>
+<li>
+Most JavaScript is incredibly annoying and often useless. It also many times
+makes the site much less portable across different browsers and accessible.
+It is often added either because people want to demonstrate their JavaScript
+skills, or because broken site-generation programs insert it there.
+</li>
+<li>
+Animation on web pages is incredibly annoying and distracting. Some people
+claim that a web page should only have at most one animated image. I think that
+usually even one animated image is too much. (If you want to display a movie
+demonstrating some action, then an animation on an isolated page is naturally
+an option.)
+</li>
+<li>
+Pop-ups are annoying and should be avoided. Plus, most browsers give mechanisms
+to prevent them from appearing anyway.
+</li>
+<li>
+There shouldn't be any excessive dependency on Macromedia Flash, and no Flash
+animations on the front page. Flash is not open-source, often causes
+accessibility problems, can be very annoying, and most people quickly grow to
+hate it. Some people completely disable Flash on their default browsers.
+</li>
+</ol>
+
+<h5 id="pres_nice_urls">Nice URLs</h5>
+
+<p>
+Imagine the URL <tt>http://www.myhost.tld/index.php?section=about&amp;subsection=personal&amp;page=bio</tt>.
+Such URLs that contain an excessive amount of CGI parameters are hideous. A
+good site is served on the root, and uses nice URLs with slashes. Something
+like <tt>http://www.myhost.tld/about/personal/bio/</tt>. Assuming you're using
+a server-side scripting technology, you can easily implement it using the
+<tt>PATH_INFO</tt> environment variable. (You should avoid using Apache's
+mod_rewrite and friends for that, because they cause a lot of trouble for
+such things).
+</p>
+
+<p>
+The sections in the site should be properly nested. If something belongs under
+something else it should follow its URL with a slash and with the new
+component. So for example, graphical art created using Inkscape should be
+under "/art/graphics/inkscape/", etc. It will be a good idea to browse
+<a href="http://www.google.com/Top/Society/People/Personal_Homepages/">other
+people's homepages</a> and see what kind of things they have there to see
+how to appropriately section and sub-section your home site.
+</p>
+
+<h5 id="pres_absolute_links">Absolute Links</h5>
+
+<p>
+A good site shouldn't have any links like
+<tt>http://www.mysite.tld/some/place/</tt> within the site, as they will break
+if the site moves to a different place. Preferably, no links that begin with
+slash, should be present, either, because they will break if more components
+are added or removed to the beginning of the site. Coding a logic that will
+calculate the relative link to an absolute path within the site, is not very
+hard using with some rudimentary programming skills.
+</p>
+
+<h5 id="pres_email">E-mail for Giving Feedback</h5>
+
+<p>
+A web-site should have a meaningful E-mail at the footer for giving
+feedback. Many web-sites have a form for submitting feedback. This is less
+comfortable for many users (including most power users, which you should really
+cater for), and often also breaks in many browsers.
+</p>
+
+<p>
+Some people believe one should not mention his or her E-mail on the web so
+he won't receive any spam. So let me assure you of this: spammers will
+eventually learn of your E-mail address whether you like it or not. The best
+way to battle spam is to make sure you filter it on your side using a good
+spam filter. (I'm using
+<a href="http://spamassassin.apache.org/">SpamAssassin</a> and am very happy
+with it, but there are many others).
+</p>
+
+<p>
+On the other hand, preventing legitimate users from sending you mail just by
+pressing a link at the bottom is going to make everyone annoyed. So make sure
+you have a link like
+<tt>&lt;a href="mailto:webmaster@myhost.tld"&gt;webmaster@myhost.tld&lt;/a&gt;</tt>
+at the bottom of all your pages.
+</p>
+
+<p>
+It would be a good idea to also have a contact form, so people can contact
+you just by browsing the web. But it's not a replacement for an E-mail
+address.
+</p>
+
+<h5 id="pres_accessibility">Accessibility</h5>
+
+<p>
+Accessibility is a very important aspect of a good web-site. There are several
+aspects of accessibility:
+</p>
+
+<ul>
+<li>
+<p>
+<b>Accessibility for People with Disabilities</b> - not everyone can view
+the web site in with full colours, in full page and clearly. Some people are
+blind, or even both blind and deaf. Some people are colour-blind. Some people
+can't see rapid flickering properly. And so forth. A good web-site uses
+semantic markup that accommodates for all of them, and enables viewing the
+web-site in any medium.
+</p>
+</li>
+<li>
+<p>
+<b>Accessibility for Different Browsers and Platforms</b> - 
+<a href="http://www.shlomifish.org/no-ie/">not everyone are using Microsoft
+Internet Explorer 6.0 on a Windows machine</a>. Some people are using Linux,
+Mac OS, or a different version of UNIX. Some people are using 
+<a href="http://www.mozilla.org/products/firefox/">Mozilla 
+Firefox</a> or a different browser, and their percentage is significant 
+(about 10% as of November 2005) and growing. Plus, they are a very important
+minority, because they tend to know better than the masses who use Explorer.
+</p>
+<p>
+A site should be compatible with as many browsers as possible. This should be
+done by adhering to web standards, and using portable markup.
+</p>
+</li>
+<li>
+<p>
+<b>User Interface Accessibility</b> - a web site should have a familiar user
+interface, which people would be able to know their way around very easily.
+</p>
+</li>
+</ul>
+
+<h5 id="pres_site_news">Site News</h5>
+
+<p>
+Visitors who frequent the site would probably like to know what has changed
+in the site since their last visit. Unfortunately, many web-sites don't have
+an accessible feed of news items. Generally, the front page of the site
+should display the most recent news, with all the old news items archived
+somewhere for prosperity.
+</p>
+
+<p>
+Recently, news syndication technologies such as 
+<a href="http://www.xml.com/pub/a/2002/12/18/dive-into-xml.html">RSS</a> or 
+the more modern <a href="http://atomenabled.org/">Atom</a> have emerged
+that allow users to concentrate the news items from various sites. A good
+web-site should have such feeds for what has changed there.
+</p>
+
+<h5 id="pres_site_search">Site Search</h5>
+
+<p>
+A search engine for your site is a wonderful enhancement for your site. You 
+can easily set up such a search engine using 
+<a href="http://www.google.com/searchcode.html">the Google Search Code</a>
+and similar services from other online search engines.
+</p>
+
+<h3 id="how_to_build">How to Build such a site?</h3>
+
+<p>
+By now, you probably have a good idea about what to put and not to put in a
+good personal home site. However, you may not know how to do it. So here's
+a step by step explanation of how to build a web-site for people who are
+completely new to programming and web-design.
+</p>
+
+<ol>
+<li id="how_to__learn_html">
+<p>
+<b>Learn HTML According to the Standard</b>. The first thing you need to do
+is learn standard XHTML (an XML-based dialect of HTML, which is cleaner
+and more powerful than standard HTML). I recommend the
+<a href="http://www.htmldog.com/">HTML Dog HTML and CSS Tutorials</a>, which
+are very good.
+</p>
+</li>
+<li id="how_to__web_site_gen">
+<p>
+<b>Learn to Use a Web Site Generation System</b> - complex and <i>good</i> 
+sites are impossible to maintain by editing a large number of separate HTML 
+pages. For example, you want all the page to have a navigation menu and a 
+common layout and you'd better maintain it all in one place without
+keeping a lot of duplicate markup. Here is an overview of several
+alternatives:
+</p>
+
+<ul>
+
+<li>
+<p>
+<a href="http://web-cpan.berlios.de/latemp/"><b>Latemp</b></a> - what I'm 
+personally using for most of my sites. Based on <a href="http://thewml.org/">Web Meta
+Language</a> which has a relatively steep learning curve. Latemp and Web Meta
+Lang are very powerful and capable, and one can create very good sites with
+them, with very little redundant markup.
+</p>
+</li>
+
+<li>
+<p>
+<b>A Templating System</b> - Perl's <a href="http://www.template-toolkit.org/">Template
+Toolkit</a> is an extremely powerful and capable templating system. 
+<a href="http://html-template.sourceforge.net/">HTML::Template</a> is not as 
+powerful, but easier (and, in my opinion, much lamer). The Python programming
+language has <a href="http://www.cheetahtemplate.org/">a templating system
+called Cheetah</a> which I did not look into yet and cannot review.
+</p>
+<p>
+<a href="http://www.clearsilver.net/">Clearsilver</a> is a cross-language 
+templating system, that can be used from several common languages, and combine
+code from any of them.
+</p>
+</li>
+
+<li>
+<p>
+<b>Other Web-site Generation Systems</b> - I'm aware of 
+<a href="http://webmake.taint.org/">WebMake</a>, and you can find others
+in <a href="http://www.la-grange.net/cms">the list of Open Source Content
+Management Systems</a>.
+</p>
+</li>
+
+<li>
+<p>
+<b>Rolling your own</b> - once you learn programming, you can naturally roll
+your own framework for generating your site. This will not be hard at first,
+but you may find that you may need to constantly enhance it, fix bugs, etc.
+As a result, it will be a better idea to use an open-source framework, that
+is already quite usable, and will be maintained into the future.
+</p>
+</li>
+
+<li>
+<p>
+<b><i>A Note about WYSIWYG Site Creators</i></b> - some web workers are
+using WYSIWYG (= "What you see is what you get") site creators to maintain the
+content of their sites. Among the most-prominent ones are 
+<a href="http://www.microsoft.com/frontpage/">Microsoft FrontPage</a>,
+<a href="http://www.macromedia.com/software/dreamweaver/">Macromedia (now 
+Adobe) Dreamweaver</a> and the open source Mozilla-based 
+<a href="http://www.nvu.com/">Nvu</a>. There are a few facts that you need
+to know about them.
+</p>
+<p>
+The first is that they often have generated markup or server-side code that 
+is often non-standard, non-semantic, or non portable across browsers. 
+Hopefully, it's better with more recent versions of them, but possibly still
+not perfect. The second fact is that they often have a "lock-in" behaviour,
+in which you only get the final output, and not the actual internal
+templates used to generate them. Reverse-engineering them is possible, but
+less trivial than with the programmatic site generation frameworks that I 
+described. 
+</p>
+<p>
+Finally, another problem with them is that when writing HTML one has to 
+write a semantic markup for the pages, and then decide how to style it
+appropriately, rather than design a page visually, and then generate markup.
+</p>
+<p>
+Whether you use such tools or not, you still have to learn HTML and CSS
+beforehand, to have a good understanding of what the tool does behind the 
+scenees. I personally had little experience with such tools, as I find writing
+markup by hand to be very quick, fun, and like the fact that it produces 
+optimal results.
+</p>
+</li>
+
+</ul>
+</li>
+<li id="how_to__write">
+<p>
+<b>Write the Code</b> - now comes the fun part: write the markup. You can
+start from a very minimal site, and gradually expand it, and, if necessary,
+clean it up. Don't worry if you don't have enough content at first - you can
+always add more later, and you can refer to <a href="#great_content">my earlier
+ideas for content you can always put on your site</a>.
+</p>
+<p>
+You can use a web server running on your local machine to serve the files on
+your local host and test that everything works. 
+<a href="http://httpd.apache.org/">Apache</a> is a very nice
+cross-platform and flexible web-server, and it is probably included in your
+Linux or Mac OS X system assuming you are using one of them. If you're using
+Windows you can always install it separately - it's open-source and gratis.
+</p>
+</li>
+<li id="how_to__set_up_hosting">
+<p>
+<b>Set up a Good Hosting for your Site</b> - once you have a basic site ready,
+the next step is to set up a good hosting for your site. A good hosting has
+a good connectivity to the Internet backbone and the rest of the world, does not
+display any ads or pop-ups, and allows one to have an unlimited bandwidth 
+(possibly while paying for more bandwidth as it is generated). It will also
+probably cost you money, but not too much.
+</p>
+<p>
+One can use various mechanisms to update the remote copy from your local copy.
+Covering them all is out of scope here, but it's possible you can find 
+some documentation on your hosting provider's site.
+</p>
+</li>
+<li id="how_to__version_control">
+<p>
+<b>Use a Version Control System for Maintaining your Site</b> - as you work on 
+your site and revise it, it is possible you'll break something. A version
+control system, allows you to keep the entire history of the pages, view the 
+difference between two versions, and easily perform rollbacks.
+</p>
+<p>
+The various ad-hoc ways of version control like keeping <tt>.bak</tt>, 
+<tt>.bak2</tt>, etc. files or keeping periodic archives, are not as robust,
+or failsafe as using a true version control system.
+</p>
+<p>
+The <a href="http://better-scm.berlios.de/">Better SCM site</a> contains a
+lot of links and information regarding the various version control system.
+I am personally using <a href="http://subversion.tigris.org/">the Subversion
+version control system</a>, which I can wholeheartedly recommend.
+</p>
+<p>
+In any case, note that you <b>must</b> eventually use a version control system,
+because otherwise the integrity of your work would be at risk.
+</p>
+</li>
+</ol>
+
+<p>
+Now you should remember that your homepage is a process. Make sure you add more
+content as time goes by, <a href="http://www.refactoring.com/">refactor</a> 
+it, adapt it for more modern styles, fix problems, and in general give it some
+love. The more you care for your home site, the more popular it will become
+, the more visitors it will attract and the more fun you'll have.
+</p>
+
+<h3 id="critique">Critique of some Home Sites</h3>
+
+<p>
+The purpose of this section is to review some prominent home sites which I'm
+familiar with, and see what their originators have done well, and what
+they have not. All these web-sites have these things in common: they
+all belong to people I don't know very well, and they all have great content.
+I will conclude by reviewing <a href="http://www.shlomifish.org/">my own 
+personal site</a>.
+</p>
+
+<h4 id="critique_paul_graham">Paul Graham's Home Site</h4>
+
+<define-tag pg_url>http://www.paulgraham.com/%0.html</define-tag>
+<define-tag pg_link1><a href="<pg_url "%0" />">/%0.html</a></define-tag>
+
+<p>
+<a href="http://www.paulgraham.com/">Paul Graham's site</a> is beautifully designed, and contains a lot of interesting
+essays and articles. It has a navigation menu to the left, made out of images,
+but it does not expand or change from page to page. What's worse is that all
+the pages are present on the same top directory - <pg_link1 "arc" />, 
+<pg_link1 "faq" />, <pg_link1 "books" />, <pg_link1 "nerds" />. Let's suppose
+you end up at <a href="<pg_url "zero" />">this page</a>, called "zero.html",
+what page does it belong to? Even <a href="http://www.google.com/search?sourceid=mozclient&amp;q=link:http%3A//www.paulgraham.com/zero.html">the Google 
+back-links feature is no help today</a>. (The spoiler is that it belongs
+to <a href="http://www.paulgraham.com/saynotes.html">this page</a>). 
+</p>
+
+<p>
+Graham routinely adds new essays to the site but he does not maintain an RSS 
+feed by himself. Instead, the RSS feed is maintained by someone else, and 
+often lags behind the dates in which the actual essays appear.
+</p>
+
+<p>
+The URLs of the various pages are often not semantic enough. For example:
+<pg_link1 "hp" />. Without accessing the URL, what do you think of when
+you see "hp"? My immediate guess would be Hewlett-Packard and 
+<a href="http://www.google.com/search?sourceid=mozclient&amp;ie=utf-8&amp;oe=utf-8&amp;q=hp">Google 
+agrees with me</a>. I might also think of "Harry Potter", 
+but in the case of Graham's site it stands for "Hackers and Painters".
+</p>
+
+<h4 id="critique_joel">The "Joel on Software" Site</h4>
+
+<p>
+The <a href="http://www.joelonsoftware.com/">Joel on Software</a> site hosts
+Joel Spolsky's weblog about the software industry, as well as articles
+he routinely publishes. The web-site I'm talking about is 
+<a href="http://web.archive.org/web/20041130084416/http://www.joelonsoftware.com/">its 
+slightly older incarnation</a>, as Spolsky heavily modified the style and
+layout of his homesite recently (for better or for worse). The front page used 
+to be a tag soup, that did not even
+validate as HTML 4.01 Transitional. Now <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.joelonsoftware.com%2F">it's much 
+better</a>, but there are still many problems. Some of the other pages also 
+do not validate. The web pages do look fine
+in <a href="http://lynx.browser.org/">the lynx browser</a>, and so they are 
+most probably very accessible.
+</p>
+
+<p>
+The site contains a navigation menu and some links to the left, which is 
+good. The <a href="http://www.joelonsoftware.com/navLinks/fog0000000262.html">book 
+reviews</a> 
+section contains only the books Joel thinks are a must, and not others that he
+read and reviewed in time, or mentioned. (That's not good.)
+</p>
+
+<p>
+Some of the URLs contain long numbers: <a href="http://www.joelonsoftware.com/articles/fog0000000069.html">http://www.joelonsoftware.com/articles/fog0000000069.html</a>. This is quite user-un-friendly. It has been fixed in newer articles,
+but there are still some leftover articles like that.
+</p>
+
+<p>
+The site looks great, and is very aesthetic and pleasing. 
+</p>
+
+<h4 id="critique_esr">Eric S. Raymond's Site</h4>
+
+<p>
+<a href="http://www.catb.org/~esr/">Eric S. Raymond's Home site</a> contains
+a lot of software Raymond has written, documents he wrote, and some
+information. Most of the pages on the site validate as XHTML 1.0. Most of the
+pages contain a rudimentary navigation menu to the left, but it remains static,
+and doesn't change. The pages are quite plain looking and boring from this 
+regard. The site contains <a href="http://www.catb.org/~esr/sitemap.html">a 
+site map</a> which is a good thing.
+</p>
+
+<p>
+The pages in the site are arranged hierarchically. So for example 
+<a href="http://www.catb.org/~esr/writings/cathedral-bazaar/">the essay "The
+Cathedral and the Bazaar"</a> is below 
+<a href="http://www.catb.org/~esr/writings/">the Writings directory</a>. This
+is also good. Sometimes this hierarchy as far as the URLs is concerned 
+has been broken, due to historical or other reasons.
+</p>
+
+<h4 id="critique_djb">Daniel J. Bernstein's Personal Site</h4>
+
+<p>
+<a href="http://cr.yp.to/">Daniel J. Bernstein's Personal Site</a> is probably
+the worst best site on the Internet. It uses plain HTML pages without any 
+style or eye candy. Similarly to Paul Graham's site, almost all the pages are
+found under the root directory - "/qmail.html", "/djbdns.html", "/crypyo.html",
+etc. There is no navigation menu, or any other organisational or navigation
+aids.
+</p>
+
+<h4 id="critique_self">Critique of my Own Personal Home Site</h4>
+
+<p>
+<a href="http://www.shlomifish.org/">My home site</a> has a common look and
+feel, a navigation menu, a breadcrumbs trail, and a site map. 
+Most of the pages there validate as XHTML 1.1, It has a news feed that mentions
+what has been updated in the site, and 
+<a href="http://www.shlomifish.org/old-news.html">old News items are
+preserved in their page</a>.
+</p>
+
+<p>
+I heard ambivalent opinions about the design of the page. Some people said
+it was attractive enough, and other claimed it still looks plain. It has
+some colours, some images, etc. but I otherwise didn't try to push HTML
+to its limits in its design. Instead, I opted to create a familiar home site
+layout that the vast majority of visitors will feel comfortable with,
+right away.
+</p>
+
+<p>
+Some of the sections of the homepage, contain their own navigation menus,
+in order to make the main navigation menu less crowded.
+</p>
+
+<p>
+One thing bad about the site is that it stretches across two domains:
+<a href="http://www.shlomifish.org/">http://www.shlomifish.org/</a>
+and 
+<a href="http://vipe.technion.ac.il/~shlomif/">http://vipe.technion.ac.il/~shlomif/</a>.
+What's worse is that the number of components in the URL of each domain, is
+different by 1, and so may be confusing. There are cross-links from pages
+of each domain to those of the different one.
+</p>
+
+<p>
+The layout of the site is mostly hierarchical, but often breaks, due to 
+the fact pages were placed at certain places, and I'd rather not move them,
+so they won't break in the results pages of search engines.
+</p>
+
+<h3 id="conclusion">Conclusion</h3>
+
+<p>
+Having a good web-site is a lot of hard work, but it's also very fun and
+rewarding. It is my hope that this article explained how to get on your
+way in creating a wonderful web-site. Alternatively, if you already have a 
+home site, then this essay may have given you many ideas on how to perfect it.
+</p>
+
+<p>
+I'd be happy to hear about what you think of this article, your experience
+with setting up a web site of your own, and may be able to evaluate your 
+present and future web sites.
+</p>
+
+<p>
+So until then, happy web-authoring!
+</p>
+
+<h3 id="links">Links and More Information</h3>
+
+<p>
+<a href="http://www.catb.org/~esr/">Eric S. Raymond</a> has written
+<a href="http://www.catb.org/~esr/html-hell.html">the HTML Hell page</a>,
+which makes a pretty good read. <a href="http://www.useit.com/">Jakob
+Nielsen's site about web usability</a> has a lot of good advice. Especially of 
+note is his <a href="http://www.useit.com/alertbox/designmistakes.html">the
+worst Web design mistakes series</a>. 
+</p>
+
+<p>
+The <a href="http://www.joelonsoftware.com/">"Joel on Software" site</a> 
+has
+<a href="http://www.joelonsoftware.com/uibook/chapters/fog0000000057.html">an 
+excellent online book called "User Interface Design for Programmers"</a>. It's
+a very recommended read and also incredibly amusing. Finally,
+<a href="http://www.goingware.com/">Michael Crawford</a>
+has written 
+<a href="http://www.goingware.com/tips/search-engine-optimization/">a very 
+good essay about White Hat Search Engine Optimisation</a>.
+</p>
+
+<h3 id="acknowledgements">Acknowledgements</h3>
+
+<p>
+Thanks to Sagiv Barhoom, to <a href="http://freenode.net/">the Freenode IRC 
+network</a> people b0at, cochi, intrr, Pete_I,  
+Windrose and kaitlyn, and to <a href="http://oftc.net/">the OFTC IRC network</a>'s JasonF for commenting on earlier drafts of
+this essay.
+</p>
+
+<h2 id="coverage">Coverage</h2>
+
+<p>
+None so far.
+</p>
+