Saturday, 22 March 2008

Time to start testing your websites in Safari on Windows?

Apple recently added their Safari web browser to the Apple Software Update and pre-checked the box by default. This effectively means that a lot of Windows users will now, possibly without knowing it, have installed Safari.
I'm not going to discuss the ethics of this practice here, instead read John's Blog - CEO of Mozilla.

But what it means for the humble web designer or developer is that we should really be installing Safari on our Windows machines and adding it to the list of browsers we test our sites against as the number of users is bound to increase as a consequence.

Apple pushed Safari web browser through their Apple Updates service

Competition in the browser business is good and over the last few years Firefox has begun to gain ground on Microsoft's Internet Explorer domination. It has also forced the browsers to become more standards compliant, thereby helping web developers and designers design cross-browser, cross-platform web pages.

According to Apple, Safari is a standards compliant browser built on the open source WebKit project, so hopefully if your pages have been built to W3C standards they will require minimal checking, but it is always wise to test. Apple have a range of web developer resources for the Safari browser, including the Safari CSS support, Safari developer FAQ, and a general web development best practices guide.

Labels: , , , ,

Saturday, 13 October 2007

Request a web page using HTTP and a Telnet session

Ever wanted to be a real web geek?
Well, you can get one step closer by following these steps and browse a website using a Telnet session via the Windows(R) DOS terminal.
Believe it or not you can actually use this method to diagnose HTTP issues, and it also provides an insite into how the HyperText Tranfer Protocol (HTTP) works.

HTTP Request using Telnet

  1. Open a DOS prompt by clicking Start > Run and typing CMD and hitting Enter.
  2. Clear your screen of commands by typing CLS and pressing Enter.
  3. Start a Telnet session by typing telnet and pressing Enter.
  4. Configure the Telnet session to echo typed characters to the screen by typing set localecho.
  5. Instruct Telnet how you want to handle the Enter key by typing set crlf.
  6. Open up a connection to the site you want over HTTP port 80, by typing o nikmakris.com 80.
  7. Press Enter several times until the cursor lands on an empty line and then request a page from the site.
  8. Type the following carefully without making errors:
GET / HTTP/1.1
Host: nikmakris.com
  1. Then press Enter twice and you should receive the HTML response for the page you just requested from the web server, delivered to you by HTTP!
Here's what you should have typed, and the response from the DOS terminal and Telnet session. I've ommited the verbose HTML response from the web server.


Welcome to Microsoft Telnet Client

Escape Character is 'CTRL+]'

Microsoft Telnet> set localecho
Local echo on
Microsoft Telnet> set crlf
New line mode - Causes return key to send CR & LF
Microsoft Telnet> o nikmakris.com 80
Connecting To nikmakris.com...
GET / HTTP/1.1
Host: nikmakris.com

Labels: , , ,

Tuesday, 29 May 2007

Insert a Blogger Atom Feed into an ASP.NET web page

I've been busy recently migrated my homepage (and several others) from classic ASP to ASP.NET. My homepage displays the latest 5 posts with a summary and a link to the full blog post.
I eventually found a tutorial using XSLT explaining how to achieve this after discovering that XmlDataSource XPATH doesn't support namespaces!
I've tinkered with the XSLT that Arnaud Weil posted in his blog to achieve the following objectives:
  1. Limit the amount of posts returned by the transformation.
  2. Show a summary of the post.
  3. Show a summary that tries hard not to cut words in half when generating a snippet.
  4. Produce XHTML valid code.
Here's the source of my XSLT...

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<!--<xsl:output method="html"/>-->
<xsl:output method="xml" indent="yes" omit-xml-declaration="yes"/>
<xsl:template match="/atom:feed">
<div id="FeedSnippets">
<xsl:apply-templates select="atom:entry" />
</div>
</xsl:template>


<xsl:template match="atom:entry" name="feed">
<xsl:if test="position()&lt;6">
<h4><xsl:value-of select="atom:title"/></h4>
<p>
<xsl:choose>
<xsl:when test="string-length(substring-before(atom:summary,'. ')) &gt; 0">
<xsl:value-of select="substring-before(atom:summary,'. ')" />...<br />
</xsl:when>
<xsl:when test="string-length(substring-before(atom:summary,'.')) &gt; 0">
<xsl:value-of select="substring-before(atom:summary,'.')" />...<br />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="substring(atom:summary,0,200)" />...<br />
</xsl:otherwise>
</xsl:choose>
<strong>Read full post: </strong><a href="{atom:link[@rel='alternate']/@href}"><xsl:value-of select="atom:title"/></a></p>
<hr />
</xsl:if>
</xsl:template>
</xsl:stylesheet>

Labels: , , ,

Friday, 25 May 2007

Font and Text Styles for Websites

People find reading text on screen much more difficult than reading on paper, by following some simple guidelines web designers can help make this as painless as possible.

Due to the nature of how web browsers render textual content on the screen; using the fonts installed on the client machines, it severely limits the font variation web designers have at their disposal.
Most browsers will be able to render the following fonts without reverting to a default alternative:

  • Arial
  • Georgia
  • Verdana
  • Arial Black
  • Times New Roman
  • Trebuchet MS
  • Courier New
  • Impact
  • Comic Sans MS

I personally stick to the top 3 fonts in this list as they are very readable on-screen and are the most professional; avoid Comic Sans MS and Courier New.
It is also possible to specify alternative fonts in your CSS style sheets for the browser to use if your font of choice isn't available.

Once you've chosen a font for a website use that font throughout to maintain consistency. Websites that use too many fonts sprinkled through their pages look unprofessional. Verdana is the most readable font even at low point sizes.

Maintaining Readability

To increase a sites' readability you should focus your attention on three things:

  1. Choose a good font and a decent readable default font size.
  2. Make sure the text and background contrast in colours is high.
  3. Avoid using all capitals in blocks of text and headings.

Text in Images

Some web designers get around the font support problems mentioned above by creating a bitmap image of all headings, titles etc. Although this method does allow you to use any font your graphics program supports, including anti-aliased (smooth-edged) fonts, it causes a big accessibility and SEO problems. You should only use this technique for a company logo, all other textual information should be actual text in your HTML.

Labels: , , , ,

Monday, 23 April 2007

The Rel Attribute in HTML

The rel attribute is available for use in a few HTML tags namely the <link> and <a> anchor tags, but until recently it has been fairly pointless to use because web browsers did not support the intended functionality of most of the values you could assign to the rel attribute.

The rel attribute has been around since HTML 3 specifications and defines the relationship between the current document and the document specified in the href attribute of the same tag. If the href attribute is missing from the tag, the rel attribute is ignored.

For example:
<link rel="stylesheet" href="styles.css">

In this example the rel attribute specifies that the href attribute contains the stylesheet for the current document.
This is probably the only recognised and supported use of the rel attribute by modern web browsers and by far the most common use for it to date.
There are other semantic uses for the rel tag, beyond those which a browser might find useful; such examples include social networking, and understanding relationships between people; see http://gmpg.org/xfn/intro, the other use which has been talked a lot about recently concerns search engine spiders.

Search Engines and the rel Attribute

Recently Google has played a big part in finding another use for the rel attribute. This time the HTML tag in question was the humble anchor tag.
Google and the other major search engines (MSN and Yahoo!) have a constant battle with SERP SPAM which clutter their results and make them less useful. These pages make their way into the top results pages by using black hat SEO methods such as automated comment SPAM, link farms etc.
Rather than adopt a complex algorithm to determine these SPAM links which increase target pages search engine vote sometimes called "Page Rank" or "Web Rank", the search engines (Google, MSN and Yahoo!) have collectively decided that if blogging software, big directories and general links pages etc use anchor tags with a rel="nofollow" attribute those links will simply be ignored by search engine spiders, yet still be fully functional for end users.
Of course using rel="nofollow" does not mean the links are deemed as bad in any way, every link on a blog comment will be treated in the same fashion. The webmaster is essentially saying

"this link was not put here by me, so ignore it and do not pass any "link juice" on to it".

More on nofollow by Search Engine Watch.

Putting Webmasters in Control

Putting this kind of control in the webmasters hands hasn't been without controversy. People will always try to experiment with ways of manipulating the intended outcome to favour their own goals, such as using nofollow internally in their site etc. Others have welcomed the move as a way of reducing the problem of spamming.

Labels: , ,