Michael J.A. Clark
Michael Clark is a Computer Science student from England providing freelance programming and design when not studying at Cambridge. Skills: C#, Sitecore, PHP, XHTML, CSS, AS3, Java, ML, F#.

Sections

Contact details

Email
mjac@mjac.co.uk
Skype
mjacdotuk
Twitter
mjacuk

Articles tagged coding/xhtml

Setting up Disqus Comments

For a while I disagreed with comment systems with the assumption that someone would email if they had something relevant to say. This is naive. Interaction is far more important: if it only takes 5 seconds to comment then plenty of individuals will contribute and there is no need for hard mental operations. Once there has been a premature commitment, from the initial interaction, users are more likely to return.

So which comment system to use? Drafting my own is not an option. It has been done thousands of times before and I do not want to support commercial global identifiers that change over time. Is it worth the effort?

A couple of comment systems

Disqus integrates with Facebook/Twitter and is used by Wired magazine. Known for keeping up with developments from other social networking sites.

Intense Debate targets blogging platforms like WordPress, Blogger, Tumblr. I previously used this system while helping the Cambridge Tab last year. It was easy to administer through Wordpress.

My choice

Disqus won through because of its clean interface. Installation required a single JavaScript snippet at the bottom of my article pages. Further integration is possible by providing Disqus permalinks and unique article IDs to enhance their interface.

Thanks for reading, please add your comments.

Search engine optimisation

Search engine optimisation is one of the most important aspects to consider when creating a website because it determines the success and popularity by controlling the majority influx of new users. Everyone serious about creating content on the internet is interested in reaching the largest audience possible — search engine optimisation is therefore an important topic to discuss in depth.

I mentioned in my earlier entry “Ranked 8th on Google” that “XHTML coupled with good page structure results in high search engine rankings” which is true but the content matters more: when a user writes a search term the search engine will judge the page against how many times that term appears. I managed to achieve a high ranking on Google by increasing how many times I wrote my name and aliases on my homepage with content in the title, headings and meta-description having the greatest effect. The meta-description tag is really important because search engines will use that instead of a content excerpt if it is relevant enough to the search term. From a variety of source I now concluded that meta keywords are obsolete unused tags and a substantial waste of time — don’t use them.

Getting featured on a popular website, usually caused by good website content, can dramatically increase the amount of visitors to your page: the more sites that link to your site the better, however the gains are simply immense when featured on a website with a high Google PageRank.

Google SitemapsYahoo! Site ExplorerYahoo! Site Explorer and Google Sitemaps are great resources for examining how your site is indexed. Site Explorer shows all the pages that have been indexed under a specific domain and all the pages that link to that domain. Sitemaps is a more useful resource which provides a large amount of information about your site. One advantage of Site Explorer is that you do not have to register to use it while Sitemaps require both this and verification that you are the site owner. Once logged in, however, Sitemaps provides query, crawl and index statistics including keywords used to find your site and the position of your page under those keywords. By using page analysis you can see common words in page content and external links.

Matt Cutts’ blogMatt Cutts, a Google employee, has posted some very informative videos on his blog about search-engine related topics including “Qualities of a good site”, “Some SEO Myths” and “Should you optimize for Search Engines or for Users?”. He seems to be posting videos relatively quickly and now has eight sessions, as the time of writing this entry, hosted on Google Videos; his latest video is Google Terminology which doesn’t appear quite so interesting or useful when compared to his other ones.

Google has a section called “Webmaster Help” that contains a more specific page “Webmaster Guidelines” that help Google rank and index your website. Important points mentioned include:

  • Have other relevant sites link to yours
  • Submit your site to relevant directories such as the Open Directory Project and Yahoo!
  • Every page should be reachable from at least one static text link
  • Make sure that your site actually includes the words users type to find your pages
  • Use text instead of images to display important names, content, or links
  • Examine your site in a text browser (such as Lynx) because this is how search engine spiders see your site

Another common point that arises is using URLs that search engines can easily index, and users remember, instead of long query strings. SitePoint demonstrates three common methods in the article “Search Engine-Friendly URLs” which I may apply to my homepage in future.

Thanks for reading, please add your comments.

Inline style and script elements

In XHTML, unlike HTML, the script and style elements are declared as having parsed character data (#PCDATA) content — certain characters (such as <>&"') must be represented by character entity references. Wrapping the content of the script or style element within a CDATA marked section avoids having to use these references.

<script type="text/javascript">
<![CDATA[
JavaScript here
]]>
</script>

For these sections to be compatible with both the text/html (HTML) and application/xhtml+xml (XHTML) mime types the following escape strings must be used. Simply trying to understand these escape strings is useful as it reinforces core knowledge of HTML and XHTML syntax.

JavaScript template

<script type="text/javascript">
<!--//--><![CDATA[//><!--
JavaScript code
//--><!]]>
</script>

CSS template

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
CSS styles
/*]]>*/-->
</style>

Thanks for reading, please add your comments.

XHTML 1.0 document template

Creating internet websites is made much simpler by using consistent templates throughout projects. This is my XHTML document template designed specifically for delivering print, screen and news content — all of which required for a high-quality internet site. News feeds are great additions to any homepage: I recently inserted the <link rel="alternate" type="application/rss+xml" title="RSS feed" href="feed.rss" /> markup into my homepage header enabling users equipped with a good browser — not internet explorer in other words — to instantly recognise my news feed.

If I decide to edit my default XHTML template, I'll update it on this article afterwords enabling me to use it as a reference for other projects. Any comments containing improvement suggestions will be greatly appreciated!

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Extremely concise and descriptive title for this page (Name of website, page name)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Name, homepage and e-mail address of author" />
<meta name="description" content="Two sentence description to appear in search engines." />
<link rel="alternate" type="application/rss+xml" title="RSS feed" href="feed.rss" />
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<h1>Extremely concise and descriptive title</h1>
<p>Main content here starts.</p>
</body>
</html>

Thanks for reading, please add your comments.